/* Tela de jogo — paleta e peças seguindo as referências: fundo azul-escuro, bordas douradas,
   títulos em versalete, abas e cartões. */
body.playing {
  --navy: #0a131b;
  --panel: rgb(12 22 31 / 94%);
  --panel-solid: #0f1b26;
  --panel2: #142432;
  --edge: #22384a;
  --line: #c9a24a;
  --gold: #e8c872;
  --gold-dim: #a8873a;
  --cyan: #4fd8e8;
  --text: #e9eef2;
  --muted: #9fb0bd;
  --red: #e5533d;
  --green: #4cd964;
  --blue: #4aa3ff;
  --yellow: #f0c040;
  font: 14px/1.4 "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--navy);
  color: var(--text);
}
body.playing main { display: block; padding: 0; }

/* Barras de rolagem "fio neon": sem setas, fio ciano que engrossa no mouse. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-track { background: transparent; border-left: 1px solid rgb(79 216 232 / 12%); }
::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid rgb(79 216 232 / 12%); }
::-webkit-scrollbar-thumb { border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; background-color: rgb(79 216 232 / 55%); }
::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: #4fd8e8; }
::-webkit-scrollbar-thumb:active { background-color: #9ff4ff; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgb(79 216 232 / 55%) transparent; }
}
body.playing #app {
  width: 100%;
  height: 100vh;
  max-width: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.playing button {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
body.playing button:hover:not(:disabled) { border-color: var(--line); }
body.playing button:disabled { opacity: 0.5; cursor: default; }
body.playing button.gold {
  background: linear-gradient(#f1d27a, #c9a24a);
  color: #20180a;
  border-color: #e8c872;
  font-weight: 600;
}
body.playing button.gold:hover:not(:disabled) { filter: brightness(1.08); }
body.playing button.link { background: none; border: 0; color: var(--gold); padding: 0 4px; text-decoration: underline; }
body.playing button.small { padding: 3px 8px; font-size: 12px; }
body.playing button.iconbtn { padding: 4px; width: 30px; height: 30px; }
body.playing input, body.playing select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: #0a141c;
  color: var(--text);
  font: inherit;
  width: auto;
}
body.playing input[type="range"] { padding: 0; accent-color: var(--line); }
body.playing p { text-align: left; color: inherit; margin: 4px 0; }
body.playing p.small { color: var(--muted); }
body.playing p.center { text-align: center; }
.icon { display: inline-flex; width: 22px; height: 22px; line-height: 0; }
.icon svg { width: 100%; height: 100%; }
.small { font-size: 12px; color: var(--muted); }
.center { text-align: center; }
.gold { color: var(--gold); }
.warn { color: #ffb86b; }
.hidden { display: none !important; }
.label {
  margin: 12px 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { padding: 3px 8px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--edge); font-size: 12px; }
.pill { padding: 3px 10px; border-radius: 999px; background: #0a141c; border: 1px solid var(--edge); font-size: 12px; }
.pill.gold { color: var(--gold); border-color: var(--gold-dim); }
.bar { height: 7px; background: #0a141c; border: 1px solid #1d2f3d; border-radius: 99px; overflow: hidden; margin: 3px 0; }
.bar span { display: block; height: 100%; background: var(--green); transition: width 0.15s linear; }
.bar.hp span { background: linear-gradient(#ffd766, #e0a630); }
.bar.xp span { background: linear-gradient(#6ab7ff, #2f7fd6); }
.bar.stat-health span { background: #4cd964; }
.bar.stat-attack span { background: #e5533d; }
.bar.stat-defense span { background: #4aa3ff; }
.bar.stat-speed span { background: #f0c040; }
.portrait { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.portrait.big { width: 72px; height: 72px; }

/* Tipos */
.type { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; border: 1px solid rgb(255 255 255 / 15%); background: #555; }
.type.type-normal { background: #8a8a7a; } .type.type-fire { background: #d9602e; } .type.type-water { background: #3b7fd0; }
.type.type-grass { background: #4c9a3c; } .type.type-electric { background: #c9a71e; color: #1a1500; } .type.type-ice { background: #4fb3c4; }
.type.type-fighting { background: #a63a30; } .type.type-poison { background: #8b3f9e; } .type.type-ground { background: #b58a3b; }
.type.type-flying { background: #6f7fd0; } .type.type-psychic { background: #d84a7a; } .type.type-bug { background: #8aa322; }
.type.type-rock { background: #8a7a45; } .type.type-ghost { background: #5a4a8a; } .type.type-dragon { background: #5a3fc0; }
.type.type-dark { background: #4a3a30; } .type.type-steel { background: #7a8a9a; } .type.type-fairy { background: #d88ab0; }
.rank { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; }
.rank-C { color: #9fd38a; } .rank-B { color: #7fc4ff; } .rank-A { color: #c89bff; } .rank-S { color: #ffd166; }
.rank-SS { color: #ff9f5a; } .rank-SSS { color: #ff6ad5; } .rank-OP { color: #ffe08a; } .rank-DEUS { color: #fff; } .rank-U { color: #4fd8e8; }

/* Barra superior */
.topbar {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgb(255 255 255 / 6%), transparent 40%),
    linear-gradient(#1b2633, #0c131b 70%, #0a1017);
  border-bottom: 1px solid #2c3b4b;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 60%), 0 2px 10px rgb(0 0 0 / 45%);
  flex: none;
}
.strip { display: flex; gap: 5px; padding: 0 8px; }
/* Botão no modelo de "ladrilho": placa escura com chanfro, arte pintada e nome em caixa alta. */
body.playing .shortcut {
  width: 58px; height: 56px; padding: 3px 0 0; gap: 0;
  border-radius: 9px;
  background:
    linear-gradient(rgb(255 255 255 / 9%), rgb(255 255 255 / 0%) 45%),
    linear-gradient(#26313f, #141b25 60%, #10161e);
  border: 1px solid #3a4858;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), inset 0 -2px 0 rgb(0 0 0 / 45%), 0 2px 4px rgb(0 0 0 / 55%);
  color: var(--gold);
  position: relative;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
body.playing .shortcut:hover, body.playing .scgroup.open .scgroupbtn {
  border-color: var(--cyan);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -2px 0 rgb(0 0 0 / 45%), 0 0 0 1px rgb(79 216 232 / 30%), 0 0 12px rgb(79 216 232 / 35%);
}
.shortcut:active { transform: translateY(1px); }
.shortcut .scart {
  width: 36px; height: 36px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 60%)); transition: transform 0.12s;
}
.shortcut:hover .scart { transform: translateY(-1px) scale(1.1); }
.shortcut .sclabel {
  padding: 0 2px 3px; max-width: 100%; white-space: nowrap;
  font: 800 8.5px/1.3 "Segoe UI", Verdana, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  color: #e9eef4; text-shadow: 0 1px 0 #000, 0 0 3px rgb(0 0 0 / 80%); pointer-events: none;
}
.shortcut:hover .sclabel { color: var(--gold); }
@media (max-width: 1280px) {
  .topbar { height: 50px; }
  .strip { gap: 3px; }
  body.playing .shortcut { width: 42px; height: 42px; padding: 0; grid-template-rows: 1fr; }
  .shortcut .scart { width: 32px; height: 32px; }
  .shortcut .sclabel { display: none; }
}
.autobtn .pkicon { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 50%)); }
.window header h2 .pkicon { width: 22px; height: 22px; }
.shortcut::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #f4f4f4;
  color: #111;
  font-size: 12px;
  padding: 3px 7px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 50;
}
.shortcut:hover::after { opacity: 1; }

/* Palco */
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0b1a12; }
.stage > canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}
.stage > canvas.textlayer { object-fit: fill; image-rendering: auto; pointer-events: none; }
.stage .empty {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 10px;
  color: var(--muted); font-size: 18px;
  background: radial-gradient(circle at 50% 40%, #16302a, #0b1a12 70%);
}
.stage .empty p { margin: 0; }
.timer {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--edge);
  font-size: 12px; color: var(--text);
}
.timer .icon { width: 14px; height: 14px; color: var(--muted); }

/* Tipo do dia */
.typebadge { --tc: #8a8a7a; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc) 60%, color-mix(in srgb, var(--tc) 70%, #000));
  border: 1px solid rgb(255 255 255 / 25%); box-shadow: 0 0 6px color-mix(in srgb, var(--tc) 55%, transparent); }
.typebadge svg { width: 68%; height: 68%; display: block; filter: drop-shadow(0 1px 0 rgb(0 0 0 / 35%)); }
.typebadge.big { width: 34px; height: 34px; }
.t-normal { --tc: #8a8a7a; } .t-fire { --tc: #d9602e; } .t-water { --tc: #3b7fd0; } .t-grass { --tc: #4c9a3c; }
.t-electric { --tc: #c9a71e; } .t-ice { --tc: #4fb3c4; } .t-fighting { --tc: #a63a30; } .t-poison { --tc: #8b3f9e; }
.t-ground { --tc: #b58a3b; } .t-flying { --tc: #6f7fd0; } .t-psychic { --tc: #d84a7a; } .t-bug { --tc: #8aa322; }
.t-rock { --tc: #8a7a45; } .t-ghost { --tc: #5a4a8a; } .t-dragon { --tc: #5a3fc0; } .t-dark { --tc: #4a3a30; }
.t-steel { --tc: #7a8a9a; } .t-fairy { --tc: #d88ab0; }
.timer.dailytype { z-index: 30; gap: 7px; padding: 3px 10px 3px 4px; cursor: default; outline: none;
  border-color: color-mix(in srgb, var(--tc) 45%, var(--edge)); box-shadow: 0 2px 10px rgb(0 0 0 / 40%), inset 0 0 0 1px rgb(255 255 255 / 3%); }
.timer.dailytype .slot { display: inline-flex; }
.timer.dailytype .dtname { font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--tc) 55%, #fff); }
.timer.dailytype .dtsep { width: 1px; height: 12px; background: var(--edge); }
.timer.dailytype .dtleft { font-variant-numeric: tabular-nums; color: var(--text); }
.dtcard { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); width: 250px;
  padding: 10px 12px; border-radius: 8px; background: rgb(9 17 25 / 97%); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(232 200 114 / 12%);
  opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.12s; white-space: normal; text-align: left; }
.dtcard::before { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: rgb(9 17 25); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.timer.dailytype:hover .dtcard, .timer.dailytype:focus-visible .dtcard { opacity: 1; transform: translateX(-50%); }
.dthead { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--edge); }
.dthead .dtkicker { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dthead b { font: 700 17px Georgia, serif; font-variant: small-caps; letter-spacing: 0.06em; color: var(--gold); }
.dtcard p { margin: 0 0 6px; font-size: 12px; line-height: 1.4; color: var(--text); }
.dtends { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.dtnext { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.dtnext .typebadge { width: 14px; height: 14px; }
.dtnext b { color: var(--text); font-weight: 600; }
.dtnote { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 3px 8px 3px 4px; border-radius: 5px; font-size: 11px; font-weight: 700;
  color: color-mix(in srgb, var(--tc) 45%, #fff); background: color-mix(in srgb, var(--tc) 16%, #0a141c);
  border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); }
.dtnote .typebadge { width: 16px; height: 16px; }

.card {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 45%);
}
.card h3 { margin: 0; font: 600 15px/1.2 Georgia, serif; font-variant: small-caps; letter-spacing: 0.06em; color: var(--gold); }

/* Equipe (esquerda) */
.teamcard { left: 10px; top: 10px; width: 236px; cursor: pointer; }
.teamcard .head h3 { font-size: 17px; }
.teamcard .goldline { display: flex; align-items: center; gap: 5px; margin: 4px 0 6px; color: var(--gold); font-weight: 600; }
.teamcard .goldline .icon { width: 16px; height: 16px; }
.teamcard .rows { display: grid; gap: 6px; }
.prow {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center;
  padding: 5px 6px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge);
}
.prow.active { border-color: var(--gold-dim); }
.prow .line { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.prow .line b { color: var(--gold); font-weight: 600; }
.prow .lv { color: var(--cyan); font-size: 11px; }
.prow .bar { height: 5px; margin: 2px 0; }
.prow .evolve { font-size: 11px; padding: 3px 7px; }

/* Direita: Auto-Helper e resultado */
.right { position: absolute; right: 10px; top: 10px; width: 272px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.autobtn { background: var(--panel); border-color: var(--edge); font-weight: 600; padding: 7px 14px; }
.autobtn .icon { color: var(--gold); width: 16px; height: 16px; }
.outcome { position: static; width: 100%; display: none; }
.outcome.shown { display: block; }
.outcome .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.outcome .head b { display: block; font: 600 15px Georgia, serif; font-variant: small-caps; letter-spacing: 0.06em; }
.outcome .head .small { text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; }
.outcome .line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; margin: 4px 0; border-radius: 6px;
  background: #0a141c; border: 1px solid var(--edge); border-left: 3px solid var(--red);
  font: 600 12px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em;
}
.outcome .line b { color: var(--red); font-size: 14px; }
.outcome .gain { color: var(--gold); margin: 6px 0 0; font-size: 12px; }
.outcome .chips .chip { background: #0a141c; }
.outcome .chips .chip.got { border-color: rgba(125, 255, 154, 0.45); color: #c9ffd6; }
.outcome .drops { display: grid; gap: 2px; margin-top: 4px; max-height: 120px; overflow: auto; }
.outcome .drop {
  display: grid; grid-template-columns: 1fr auto 52px; gap: 8px; align-items: center;
  padding: 3px 6px; border-radius: 4px; background: rgba(10, 20, 28, 0.7); font-size: 12px;
}
.outcome .drop b { text-align: right; color: var(--gold); font-size: 12px; }
.outcome .drop.got { background: rgba(40, 90, 55, 0.55); box-shadow: inset 2px 0 0 #7dff9a; }

/* Captura (direita, embaixo) */
.capture { right: 10px; bottom: 10px; width: 300px; transition: opacity .25s, visibility .25s; }
.capture.off { opacity: 0; visibility: hidden; pointer-events: none; }
.capture .head { display: flex; align-items: center; gap: 8px; }
.capture .head .icon { color: var(--red); }
.capture .head h3 { margin-right: auto; }
.capture .balls { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; max-height: 84px; overflow-y: auto; }
.capture .ballpill { padding: 2px 7px; font-size: 12px; gap: 3px; }
.ithumb { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.ithumb canvas { image-rendering: pixelated; }
.ithumb.mini canvas { width: 18px; height: 18px; }
.ithumb.mini .icon { width: 14px; height: 14px; }
.itemchip { display: inline-flex; align-items: center; gap: 5px; }
.dropname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ballpill .ithumb.mini canvas { width: 20px; height: 20px; }
.ballpill { padding: 3px 10px; border-radius: 999px; background: #0a141c; gap: 5px; }
.ballpill .icon { width: 16px; height: 16px; color: var(--red); }
.ballpill.active { border-color: var(--ball, var(--line)); background: #1a2a38; box-shadow: 0 0 6px color-mix(in srgb, var(--ball, #8fd3ff) 45%, transparent); }
.wild .info .odds { display: inline; color: var(--text); }
.wild .info .odds.high { color: #7dffa8; }
.wild .info .legendline { color: var(--gold); }
.wild .info .oddsbonus { margin-left: 5px; font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 999px; background: #3a2c0a; color: var(--gold); }
.capture .wilds { display: grid; gap: 6px; max-height: 190px; overflow: auto; }
.wild {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge);
}
.wild .info b { display: block; }
.wild .info .small { color: var(--cyan); }
.wild button { padding: 5px 12px; font-size: 13px; }
.wild.shiny {
  border-color: #e8c14a; background: linear-gradient(90deg, #2a2208, #0a141c 70%);
  box-shadow: 0 0 8px rgba(255, 214, 80, 0.45), inset 0 0 6px rgba(255, 214, 80, 0.15);
}
.wild.shiny .info .wildname { color: #ffe36b; }
/* Card Shiny holográfico (client/ui.mjs → holoCard) */
.holo {
  --s: 32px;
  position: relative; display: inline-block; vertical-align: middle; flex: none; box-sizing: border-box;
  width: var(--s); height: var(--s); border-radius: 22%; padding: calc(var(--s) * 0.055);
  background: linear-gradient(145deg, #fff6c8, #f2c14e 30%, #b9821c 55%, #ffe58a 80%, #c48a1e);
  box-shadow: 0 0 calc(var(--s) * 0.12) rgba(255, 214, 90, 0.75), 0 0 calc(var(--s) * 0.3) rgba(255, 200, 80, 0.28), inset 0 0 0 1px rgba(80, 50, 0, 0.6);
}
.holo .foil {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 18%; overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1.2%, transparent 1.6%),
    radial-gradient(circle at 78% 16%, #fff 0 1%, transparent 1.4%),
    radial-gradient(circle at 86% 64%, #fff 0 1.3%, transparent 1.7%),
    radial-gradient(circle at 28% 80%, #fff 0 0.9%, transparent 1.3%),
    radial-gradient(circle at 60% 88%, #fff 0 1.1%, transparent 1.5%),
    radial-gradient(circle at 10% 55%, #fff 0 0.8%, transparent 1.2%),
    linear-gradient(125deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0) 70%),
    conic-gradient(from 210deg at 50% 50%, #ffd1f1, #cdb7ff, #9fdcff, #a9ffe0, #fff4a3, #ffc8a6, #ffd1f1);
  box-shadow: inset 0 0 calc(var(--s) * 0.12) rgba(40, 20, 90, 0.45);
}
.holo .foil::after {
  content: ""; position: absolute; inset: 11%; border-radius: 10%;
  border: max(1px, calc(var(--s) * 0.018)) solid rgba(255, 220, 120, 0.95);
  box-shadow: 0 0 calc(var(--s) * 0.05) rgba(255, 220, 120, 0.9), inset 0 0 calc(var(--s) * 0.06) rgba(255, 255, 255, 0.5);
  background: radial-gradient(circle at 50% 45%, rgba(40, 30, 90, 0.35), rgba(20, 20, 60, 0.05) 70%);
}
.holo img.pk {
  position: absolute; left: 50%; top: 52%; width: 96%; height: auto; max-width: none; transform: translate(-50%, -50%); z-index: 2;
  image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 0 1px #1a0f00) drop-shadow(0 0 calc(var(--s) * 0.06) rgba(255, 240, 180, 0.85));
}
.holo .star {
  position: absolute; z-index: 3; width: calc(var(--s) * 0.16); height: calc(var(--s) * 0.16); background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #ffe88a); animation: holotwinkle 2.4s ease-in-out infinite;
}
.holo .s1 { top: 6%; right: 10%; }
.holo .s2 { bottom: 12%; left: 6%; width: calc(var(--s) * 0.11); height: calc(var(--s) * 0.11); animation-delay: 0.8s; }
.holo .s3 { top: 40%; left: 4%; width: calc(var(--s) * 0.08); height: calc(var(--s) * 0.08); animation-delay: 1.6s; }
.holo .tier {
  position: absolute; z-index: 4; right: -6%; bottom: -6%; min-width: calc(var(--s) * 0.26); height: calc(var(--s) * 0.26);
  display: grid; place-items: center; border-radius: 50%; font: 800 calc(var(--s) * 0.14)/1 "Segoe UI", sans-serif; color: #2a1800;
  background: radial-gradient(circle at 35% 30%, #fff7cf, #f0b93a 60%, #9c6a10); box-shadow: 0 0 6px rgba(255, 210, 80, 0.9), inset 0 0 0 1px #5a3a00;
}
/* Caçador de Shiny: alerta neon e resultado do lançamento (client/shiny-alert.mjs) */
.shalert { position: fixed; left: 50%; top: 78px; z-index: 900; width: min(640px, 94vw); transform: translateX(-50%); cursor: pointer; animation: shin 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.shalert.out, .shres.out { animation: shout 0.45s ease-in both; }
.shtape { height: 16px; border-radius: 3px; background: repeating-linear-gradient(-45deg, #ffd23c 0 14px, #1a1400 14px 28px); box-shadow: 0 0 10px rgba(255, 210, 60, 0.8), 0 0 22px rgba(255, 200, 60, 0.35); animation: shtape 0.9s linear infinite; background-size: 39.6px 39.6px; }
.shbox {
  position: relative; margin: 6px 0; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 6px; background: linear-gradient(180deg, rgba(30, 22, 0, 0.94), rgba(12, 9, 0, 0.94));
  border: 2px solid #ffd84a; box-shadow: 0 0 14px rgba(255, 216, 74, 0.85), 0 0 40px rgba(255, 200, 60, 0.35), inset 0 0 22px rgba(255, 216, 74, 0.18);
  animation: shglow 1.1s ease-in-out infinite;
}
.shbox::before, .shbox::after { content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid #fff1a8; filter: drop-shadow(0 0 4px #ffd84a); }
.shbox::before { left: -8px; top: -8px; border-right: 0; border-bottom: 0; }
.shbox::after { right: -8px; bottom: -8px; border-left: 0; border-top: 0; }
.shtri svg { display: block; width: 84px; height: 76px; filter: drop-shadow(0 0 6px #ffd84a) drop-shadow(0 0 14px rgba(255, 210, 60, 0.7)); animation: shblink 0.8s steps(2) infinite; }
.shtext { min-width: 0; }
.shalert h3 { margin: 0; font: 900 32px/1.02 "Segoe UI", sans-serif; letter-spacing: 0.08em; color: #fff6c2; text-shadow: 0 0 6px #ffd84a, 0 0 16px #ffb800, 0 0 30px rgba(255, 170, 0, 0.7); }
.shsub { margin-top: 6px; font: 600 15px/1.3 "Segoe UI", sans-serif; color: #ffe9a0; }
.shsub b { color: #fff; }
.shauto { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 4px; font: 800 12px/1 "Segoe UI", sans-serif; letter-spacing: 0.1em; color: #0e0a00; background: linear-gradient(90deg, #ffe066, #ffbf2e); box-shadow: 0 0 10px rgba(255, 210, 60, 0.8); }
.shauto.none { padding-left: 12px; background: linear-gradient(90deg, #ffb24a, #ff7a2e); }
.shauto img { width: 20px; height: 20px; image-rendering: pixelated; background: #1a1400; border-radius: 3px; padding: 2px; }
.shauto .chev { letter-spacing: -2px; }
.shscan { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); }
.shres {
  position: fixed; left: 50%; bottom: 120px; z-index: 900; transform: translateX(-50%); cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 6px;
  font: 900 22px/1 "Segoe UI", sans-serif; letter-spacing: 0.1em; animation: shin 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.shres small { display: block; margin-top: 4px; font: 600 12px/1.3 "Segoe UI", sans-serif; letter-spacing: 0.02em; opacity: 0.9; }
.shres.ok { color: #d8ffe6; background: rgba(0, 30, 14, 0.92); border: 2px solid #3dff8a; box-shadow: 0 0 14px rgba(61, 255, 138, 0.8), 0 0 30px rgba(61, 255, 138, 0.3); text-shadow: 0 0 8px #3dff8a; }
.shres.fail { color: #ffd9d9; background: rgba(36, 4, 4, 0.92); border: 2px solid #ff4d5e; box-shadow: 0 0 14px rgba(255, 77, 94, 0.8), 0 0 30px rgba(255, 77, 94, 0.3); text-shadow: 0 0 8px #ff4d5e; }
.shic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; border: 2px solid currentColor; }
@keyframes shin { from { opacity: 0; transform: translate(-50%, -18px) scale(0.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes shout { to { opacity: 0; transform: translate(-50%, -12px) scale(0.96); } }
@keyframes shglow { 50% { box-shadow: 0 0 22px rgba(255, 216, 74, 1), 0 0 60px rgba(255, 200, 60, 0.5), inset 0 0 26px rgba(255, 216, 74, 0.28); } }
@keyframes shblink { 50% { opacity: 0.55; } }
@keyframes shtape { to { background-position: 39.6px 0; } }
@media (max-width: 600px) { .shbox { grid-template-columns: 56px minmax(0, 1fr); } .shbox > .holo { display: none; } .shtri svg { width: 56px; height: 50px; } .shalert h3 { font-size: 22px; } }
@keyframes holotwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.6); } }

/* Altar Shiny */
.window.altar { width: min(780px, 96vw); }
.altarlayout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; }
.altarleft { display: grid; gap: 8px; align-content: start; }
body.playing .altarleft p { margin: 0; }
.altarleft .gold { color: #ffe36b; }
.altarempty { padding: 18px 12px; border: 1px dashed var(--edge); border-radius: 10px; text-align: center; color: var(--muted); }
.altargrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 330px; overflow: auto; padding: 2px; }
body.playing .altarcard {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 9px 6px 7px; min-width: 0;
  border-radius: 10px; border: 1px solid var(--edge); background: #0a141c; color: var(--text);
}
body.playing .altarcard:hover { border-color: #b8952f; }
body.playing .altarcard.sel { border-color: #e8c14a; background: linear-gradient(180deg, #2a2208, #0a141c); box-shadow: 0 0 10px rgba(255, 214, 80, 0.45); }
.altarcard .holo { margin: 4px 0 2px; }
.altarcard b { font-size: 12px; color: #ffe36b; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.altarcard i { font-style: normal; font-size: 10px; color: var(--cyan); }
.altarcount { position: absolute; top: 5px; right: 7px; font-size: 11px; font-weight: 700; color: #ffe36b; }
.altarside {
  display: grid; align-content: start; gap: 9px; padding: 12px; border-radius: 10px;
  border: 1px solid #e8c14a; background: radial-gradient(circle at 50% 28%, #3a2d08 0, #0a141c 70%);
}
.altarhero { display: grid; justify-items: center; gap: 3px; text-align: center; }
.altarhero .holo { margin: 6px 0 8px; }
.altarhero b { font-size: 17px; color: #ffe36b; }
.altarhero .small { color: var(--cyan); }
.altarfacts { justify-content: center; }
.altarballs { display: flex; flex-wrap: wrap; gap: 5px; }
.altarballs .ballpill.off { opacity: 0.45; }
.altarchance { text-align: center; font-size: 13px; }
.altarchance b { color: #ffe36b; }
.altarchance b.high { color: #7dffa8; }
body.playing .altargo { padding: 9px; font-size: 14px; }
.altargo small { opacity: 0.75; font-size: 11px; }
.altarresult { padding: 8px 10px; border-radius: 8px; font-size: 13px; text-align: center; }
.altarresult.win { background: #10301c; border: 1px solid #3fae6a; color: #9dffbf; }
.altarresult.lose { background: #3a1212; border: 1px solid #b54848; color: #ffb0b0; }
.altarresult.caught { background: #2a2208; border: 1px solid #e8c14a; color: #ffe36b; }
@media (max-width: 720px) { .altarlayout { grid-template-columns: 1fr; } .altargrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chip.shinychip { border-color: #e8c14a; color: #ffe36b; box-shadow: 0 0 6px rgba(255, 214, 80, 0.4); }
.wild .shinytag {
  display: inline-block; margin-left: 2px; padding: 0 5px; border-radius: 999px; font-style: normal; font-size: 9px;
  letter-spacing: 0.08em; background: #ffe36b; color: #2a1d00; vertical-align: 1px;
}

/* Chat (esquerda, embaixo) */
.chat {
  left: 10px; bottom: 10px; width: 330px; height: 200px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 8px;
}
.chattabs { display: flex; gap: 2px; }
.chattabs button { padding: 3px 10px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 5px 5px 0 0; background: transparent; border-color: transparent; color: var(--muted); }
.chattabs button.active { background: #0a141c; border-color: var(--edge); color: var(--gold); }
.messages { overflow: auto; font-size: 12px; background: #0a141c; border: 1px solid var(--edge); border-radius: 6px; padding: 6px; }
.msg { margin: 2px 0; }
.msg .time { color: var(--blue); margin-right: 5px; font-size: 11px; }
.msg b { color: var(--gold); font-weight: 600; }
.chatform { display: flex; gap: 6px; }
.chatform input { flex: 1; padding: 5px 8px; font-size: 12px; }
.chatform button { padding: 4px 10px; font-size: 12px; }

/* Controle da caça */
.hud {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--edge);
}
.hud .status { font-size: 13px; color: var(--muted); }

/* Avisos */
.toasts { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; z-index: 200; pointer-events: none; }
.toast { padding: 8px 14px; border-radius: 8px; background: var(--panel-solid); border: 1px solid var(--edge); font-size: 13px; box-shadow: 0 4px 14px rgb(0 0 0 / 50%); transition: opacity 0.4s; }
.toast.ok { border-color: var(--green); } .toast.warn { border-color: var(--yellow); } .toast.error { border-color: var(--red); }
.toast.out { opacity: 0; }

/* Personagem aberto em outra aba */
.session-lock { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgb(10 30 45 / 78%), rgb(3 8 12 / 92%)); backdrop-filter: blur(3px); }
.session-panel { position: relative; width: min(420px, 92vw); padding: 26px 26px 18px; text-align: center; color: var(--text);
  background: linear-gradient(180deg, rgb(18 34 48 / 97%), rgb(10 19 27 / 97%)); border: 1px solid var(--cyan); border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(79 216 232 / 15%), 0 0 28px rgb(79 216 232 / 22%), 0 14px 40px rgb(0 0 0 / 60%); }
.session-panel::before, .session-panel::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--gold); }
.session-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.session-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.session-badge { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; color: var(--cyan);
  background: rgb(79 216 232 / 10%); border: 1px solid rgb(79 216 232 / 45%); box-shadow: 0 0 16px rgb(79 216 232 / 25%); }
.session-panel h2 { margin: 0 0 8px; font-size: 17px; letter-spacing: 0.02em; color: var(--gold); }
body.playing .session-panel p { margin: 0 0 16px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); }
.session-panel .session-play { width: 100%; padding: 10px; font-size: 15px; letter-spacing: 0.06em; }
body.playing .session-panel .session-note { margin: 10px 0 0; font-size: 12px; }

/* Depois de curar um desmaio: voltar para a caça */
.faint-return { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; min-width: 360px; color: var(--text); border: 1px solid var(--cyan); border-radius: 10px;
  background: linear-gradient(180deg, rgb(18 34 48 / 96%), rgb(10 19 27 / 96%));
  box-shadow: 0 0 0 1px rgb(79 216 232 / 12%), 0 0 22px rgb(79 216 232 / 20%), 0 10px 26px rgb(0 0 0 / 55%); animation: faint-in 0.25s ease-out; }
.faint-return[hidden] { display: none; }
@keyframes faint-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.faint-return .faint-thumb { flex: none; width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; border-radius: 8px;
  background: rgb(79 216 232 / 8%); border: 1px solid rgb(79 216 232 / 35%); }
.faint-return .faint-text { display: grid; gap: 2px; flex: 1; font-size: 12px; color: var(--muted); }
.faint-return .faint-text b { font-size: 14px; color: var(--green); }
body.playing .faint-return .faint-go { padding: 9px 14px; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; }
.faint-return .faint-close { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--edge); background: var(--panel-solid); color: var(--muted); cursor: pointer; }
.faint-return .faint-close:hover { color: var(--text); border-color: var(--cyan); }
.faint-return .faint-close .icon svg { width: 12px; height: 12px; }
.notice { padding: 8px 12px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); font-size: 13px; margin: 8px 0; }
.notice.ok { border-color: var(--green); color: #cfeecf; }
.notice.error { border-color: var(--red); }

/* Janelas */
.windows { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.window {
  pointer-events: auto;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 94vw); max-height: 92vh;
  display: grid; grid-template-rows: auto 1fr;
  background: linear-gradient(170deg, #0f1c27, #0b1620 60%, #0e1f24);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 0 0 1px #0a1119, 0 16px 50px rgb(0 0 0 / 60%);
  overflow: hidden;
}
.window header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 8px 12px; min-height: 48px;
  background: linear-gradient(#0d1821, #0a131b);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.window header::before, .window header::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px;
  background: var(--cyan); transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 8px var(--cyan);
}
.window header::before { left: -5px; }
.window header::after { right: -5px; }
.window header h2 {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font: 600 19px/1 Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold);
}
.window header h2 .icon { color: var(--gold); }
.window .wright { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.window .close { padding: 2px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); }
.window .close:hover { color: #fff; }
.window .wbody { padding: 14px; overflow: auto; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { flex: 1; padding: 8px 12px; background: #0a141c; font-weight: 600; }
.tabs button.active { border-color: var(--line); background: linear-gradient(#1a2a38, #0f1b26); color: var(--gold); }
.tabs button em { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 6px; }
.statrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.statrow.four { grid-template-columns: repeat(4, 1fr); }
.statbox { padding: 10px 12px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); text-align: center; }
.statbox b { display: block; font-size: 20px; color: var(--text); }
.statbox span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.statbox.red b { color: #ff8a80; }
.kv { display: grid; gap: 4px; }
.kv div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 6px; background: #0a141c; border: 1px solid var(--edge); font-size: 13px; }
.kv span { color: var(--muted); }
.actions { display: flex; gap: 8px; margin: 8px 0; }
.table .thead, .trow { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 6px 10px; }
.table .thead { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--edge); }
.trow { border-radius: 6px; background: #0a141c; border: 1px solid var(--edge); margin: 4px 0; font-size: 13px; }
.trow .name { display: flex; align-items: center; gap: 8px; }
.trow.ok { border-left: 3px solid var(--green); } .trow.fail { border-left: 3px solid var(--red); }
.recent .trow { grid-template-columns: auto 1fr auto auto; }

/* Mapa */
.mapwin { width: min(900px, 96vw); height: 92vh; }
.mapwin .wbody { padding: 0; display: grid; grid-template-rows: auto auto auto 1fr; overflow: hidden; position: relative; }
.regions { display: grid; gap: 6px; padding: 12px 18px 8px 12px; background: linear-gradient(#0f1c27, #0a141c); border-bottom: 1px solid var(--edge); }
.plaques { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: center; }
body.playing .plaque {
  position: relative; display: block; padding: 0; min-width: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  cursor: pointer; transition: transform 0.12s, filter 0.12s; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 60%));
}
.plaque img { display: block; width: 100%; height: auto; pointer-events: none; }
.plaque .ptxt { position: absolute; left: 34%; right: 6%; top: 50%; transform: translateY(-50%); text-align: center; line-height: 1.1; white-space: nowrap; pointer-events: none; }
.plaque b { display: block; font: 700 14px Georgia, serif; font-variant: small-caps; letter-spacing: 0.05em; color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000, 0 0 8px rgb(0 0 0 / 70%); }
.plaque b.long { font-size: 11.5px; letter-spacing: 0.02em; }
.plaque i { display: block; font: 700 9.5px "Segoe UI", sans-serif; font-style: normal; letter-spacing: 0.06em; color: #ffe8a8; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
body.playing .plaque:hover:not(:disabled) { transform: translateY(-2px); filter: drop-shadow(0 3px 4px rgb(0 0 0 / 60%)) brightness(1.1); background: none; }
body.playing .plaque.active { filter: drop-shadow(0 0 6px #4fd8e8) drop-shadow(0 0 2px #4fd8e8); }
.plaque.locked img { filter: grayscale(0.35) brightness(0.88); }
.plaque.locked i { color: #c9d3dc; }
body.playing .plaque:disabled { cursor: default; opacity: 1; }
.plaque .psoon { position: absolute; right: 6px; top: -6px; padding: 1px 6px; border-radius: 4px; background: #e07b1a; color: #fff; font: 800 8.5px "Segoe UI", sans-serif; letter-spacing: 0.08em; box-shadow: 0 0 0 1px #0b141c; }
.regionnote { text-align: right; }
@media (max-width: 760px) { .plaques { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mapwin .filters { display: flex; gap: 10px; padding: 8px 14px; align-items: center; border-bottom: 1px solid var(--edge); }
.search { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); color: var(--muted); }
.search input { border: 0; background: transparent; padding: 7px 0; width: 200px; }
.levels { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.levels input { width: 64px; padding: 6px 8px; }
.typechips { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding: 6px 14px 8px; border-bottom: 1px solid var(--edge); }
.typechips .type { padding: 4px 6px; border-radius: 4px; text-align: center; opacity: 0.55; justify-content: center; }
.typechips .type.active { opacity: 1; box-shadow: 0 0 0 2px var(--line); }
.mapwin .viewport { overflow: auto; position: relative; background: #5a6a90; cursor: grab; user-select: none; touch-action: none; }
.mapwin .viewport.dragging { cursor: grabbing; }
.mapwin .viewport.dragging .spot, .mapwin .viewport.dragging .citymark { pointer-events: none; }
.mapwin .world { position: relative; background-repeat: no-repeat; image-rendering: pixelated; }
.mapwin .world.far .spot .tag { display: none; }
.mapwin .world.far .spot:hover .tag { display: block; }
body.playing .citymark {
  position: absolute; z-index: 5; width: 0; height: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer;
  transform: scale(var(--city-k, 1));
}
.citymark .badge {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff4f8 0%, #ffd3e2 45%, #ff8fb5 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px #e2306c, 0 0 0 5px #0a141c, 0 0 18px rgb(255 90 150 / 70%), 0 6px 12px rgb(0 0 0 / 55%);
  transition: transform 0.12s ease;
}
.citymark .badge img {
  width: 64px; height: 64px; max-width: none; image-rendering: pixelated;
  transform: scale(1.15) translate(-13px, -7px); filter: drop-shadow(0 1px 0 rgb(0 0 0 / 40%));
}
.citymark .cross {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: #e2306c; border: 2px solid #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}
.citymark .cross::before, .citymark .cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); }
.citymark .cross::before { width: 10px; height: 3px; }
.citymark .cross::after { width: 3px; height: 10px; }
.citymark .tag {
  position: absolute; top: 34px; left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center; line-height: 1.1;
  padding: 2px 9px 3px; border-radius: 6px; background: rgb(10 20 28 / 82%); border: 1px solid #e2306c;
  box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
}
.citymark .tag b { display: block; font: 700 14px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; color: #fff; }
.citymark .tag i { display: block; font: 700 10px Verdana, sans-serif; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #ff8fb5; }
.citymark:hover { z-index: 8; }
.citymark:hover .badge { transform: scale(1.1); }
.citymark.current .badge { box-shadow: 0 0 0 3px var(--cyan), 0 0 0 5px #0a141c, 0 0 18px var(--cyan); }
.citymark.current .tag { border-color: var(--cyan); }
body.playing .spot {
  position: absolute; z-index: 2;
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  border-radius: 50%; border: 3px solid var(--line);
  background: radial-gradient(circle at 50% 40%, #1a2a38, #0a141c);
  box-shadow: 0 0 0 2px #0a141c, 0 4px 10px rgb(0 0 0 / 50%);
  display: grid; place-items: center; padding: 0;
  transform: scale(var(--spot-k, 1));
}
.spot .portrait { width: 40px; height: 40px; }
.spot .tag {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; text-align: center; line-height: 1.15; margin-top: 4px;
  text-shadow: 0 1px 0 #000, 0 0 4px #000, 0 0 8px #000;
}
.spot .tag b { display: block; font: 700 14px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; color: #fff; }
.spot .tag i { font: 700 13px Georgia, serif; font-variant: small-caps; font-style: normal; color: #ff6a5a; letter-spacing: 0.08em; }
body.playing .spot:hover { z-index: 4; border-color: #fff; }
body.playing .spot.current { z-index: 3; border-color: var(--cyan); box-shadow: 0 0 0 2px #0a141c, 0 0 14px var(--cyan); }
body.playing .spot.pending { z-index: 1; opacity: 0.45; border-style: dashed; width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.spot.pending .portrait { width: 30px; height: 30px; }
.spot.pending .tag { display: none; }
.spot.pending:hover { opacity: 0.9; }
.spot.pending:hover .tag { display: block; }
body.playing .spot.locked { border-color: #a9b8c6; cursor: not-allowed; background: radial-gradient(circle at 50% 40%, #6a7f93, #3a4a5a); }
.spot.locked .portrait { filter: grayscale(0.6) brightness(1.3); }
.spot.locked .tag b { color: #dbe3ea; }
.spot.locked .tag i { color: #b9c5cf; }
.spot.locked .lockbadge {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: #1a2834; border: 2px solid #9aabba; color: #eef3f7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.spot.locked .lockbadge .icon { width: 12px; height: 12px; }
body.playing .spot.locked:hover { border-color: #c2ced8; }
/* Marcadores que se encostam (map-declutter.mjs): anel com linha até o ponto real, bolha "+N" e nomes que não cabem. */
.spot.merged { display: none; }
.spot .leader, .spot .count { display: none; }
.spot.fanned .leader {
  display: block; position: absolute; left: 50%; top: 50%; z-index: -1; height: 2px; width: var(--len, 0);
  transform-origin: 0 50%; transform: rotate(var(--ang, 0)) translateX(var(--start, 33px)); margin-top: -1px;
  background: rgb(255 255 255 / 80%); box-shadow: 0 0 0 1px rgb(10 20 28 / 70%); pointer-events: none;
}
.spot.fanned .leader::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--cyan); border: 2px solid #0a141c;
}
.spot.cluster .count {
  display: grid; place-items: center; position: absolute; left: -6px; top: -6px; min-width: 28px; height: 24px; padding: 0 6px;
  border-radius: 12px; background: var(--gold); color: #1a1206; border: 2px solid #0a141c;
  font: 800 13px/1 "Segoe UI", sans-serif; box-shadow: 0 2px 6px rgb(0 0 0 / 60%);
}
body.playing .spot.cluster { box-shadow: 0 0 0 2px #0a141c, 0 0 0 6px rgb(232 200 114 / 35%), 0 4px 10px rgb(0 0 0 / 50%); }
.spot.notag .tag { display: none; }
.spot.notag:hover .tag { display: block; z-index: 6; }
.spot[data-side="r"] .tag { top: 50%; left: 100%; transform: translateY(-50%); margin: 0 0 0 6px; text-align: left; }
.spot[data-side="l"] .tag { top: 50%; left: auto; right: 100%; transform: translateY(-50%); margin: 0 6px 0 0; text-align: right; }
.spot[data-side="t"] .tag { top: auto; bottom: 100%; margin: 0 0 4px; }
body.playing .onlyopen.active { border-color: var(--line); color: var(--gold); background: linear-gradient(#1a2a38, #0f1b26); }
.hovercard {
  position: absolute; z-index: 10; width: 230px; padding: 10px 12px;
  background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 8px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 50%); display: none; pointer-events: none;
}
.hovercard.shown { display: block; }
.hovercard h4 { margin: 0 0 2px; font: 700 15px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; }
.hovercard .chip { font-size: 11px; }

/* Equipe */
.teamwin { width: min(780px, 95vw); height: min(600px, 92vh); }
.teamwin .wbody { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; overflow: hidden; }
.teamcount { color: #8fd3ff; border-color: #2f7fd6; font-weight: 700; white-space: nowrap; }
.teammain { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; min-height: 0; }
.teamlist { display: grid; gap: 6px; align-content: start; overflow-y: auto; padding-right: 4px; }
.teamlist .label { margin-top: 6px; }
body.playing .membercard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left;
  padding: 7px 10px; background: #0a141c; border: 1px solid var(--edge); border-radius: 8px; color: var(--text);
}
body.playing .membercard:hover { border-color: var(--gold-dim); background: #0e1b26; }
body.playing .membercard.selected { border-color: #8fd3ff; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 0 1px #8fd3ff, 0 0 12px rgb(74 163 255 / 35%); }
body.playing .membercard.fainted .thumb canvas { filter: grayscale(1) brightness(0.8); }
.membercard.empty { grid-template-columns: auto 1fr; border-style: dashed; opacity: 0.55; color: var(--muted); }
.membercard .bar { height: 4px; margin-top: 3px; }
.membercard .shoptext b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teamtag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--edge); }
.teamtag.on { color: var(--green); border-color: #1e5a30; background: #0b1f12; }
.teamtag.off { color: #ff8a80; border-color: #5a2020; background: #1f0c0c; }
.teamtag.evo { color: var(--gold); border-color: var(--gold-dim); background: #1f1808; }
.teamwin .thumb {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; border-radius: 4px; color: var(--muted);
}
.teamwin .thumb canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.teamwin .thumb.big { width: 62px; height: 62px; border-radius: 8px; border-color: #2f7fd6; box-shadow: 0 0 12px rgb(74 163 255 / 20%); }
.teamwin .thumb.big canvas { width: 56px; height: 56px; }
.teamside { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.teamhero { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(160deg, #0d1c28, #09121a); border: 1px solid #1f4256; box-shadow: inset 0 0 18px rgb(79 216 232 / 6%); }
.teamtop { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.teamtitle { display: grid; gap: 5px; min-width: 0; }
.teamtitle h3 { margin: 0; font: 700 22px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); }
.teamtitle .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.teamlv { color: var(--gold); border-color: var(--gold-dim); font-weight: 700; }
.teambars { display: grid; gap: 4px; }
.meter { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; font-size: 11px; }
.meter .mlabel { color: var(--muted); letter-spacing: 0.08em; }
.meter .mvalue { color: var(--text); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.meter .bar { height: 7px; }
body.playing .teamtabs { grid-template-columns: repeat(3, 1fr); }
body.playing .teamtabs button.ready::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.teampane { overflow-y: auto; padding-right: 4px; min-height: 0; }
.teampane .statpanel { margin: 0; }
.teamfoot { grid-template-columns: 1fr; }
body.playing .teamevolve { width: 100%; }
.evopanel { display: grid; gap: 10px; justify-items: center; padding: 14px 12px; border-radius: 10px; background: #0a141c; border: 1px solid var(--edge); text-align: center; }
.evopanel p { margin: 0; }
.evopath { display: flex; align-items: center; gap: 14px; }
.evoarrow { font-size: 22px; color: #8fd3ff; text-shadow: 0 0 8px rgb(74 163 255 / 60%); }
.evonames { display: flex; gap: 52px; font-size: 13px; }
.evonames b.ready { color: var(--gold); }
.evolist { display: grid; gap: 8px; }
.evopanel.pickable { cursor: pointer; opacity: .72; }
.evopanel.pickable:hover { opacity: .9; }
.evopanel.picked { opacity: 1; border-color: #8fd3ff; box-shadow: 0 0 0 1px rgb(143 211 255 / 35%); }
.evopanel.mega { background: radial-gradient(circle at 50% 0%, rgb(120 80 200 / 22%), #0a141c 70%); }
.evopanel.mega .evoarrow, .evoarrow.mega { color: #d8a8ff; text-shadow: 0 0 8px rgb(180 110 255 / 70%); }
.evoreqs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.evoreqs .chip { font-size: 11px; }
.evoreqs .chip.ok { color: var(--green); border-color: #1e5a30; background: #0b1f12; }
.evoreqs .chip.miss { color: #ff8a80; border-color: #5a2020; background: #1f0c0c; }
.statpanel { display: grid; gap: 8px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(160deg, #0d1c28, #09121a); border: 1px solid #1f4256; box-shadow: inset 0 0 18px rgb(79 216 232 / 6%); }
.statpanel .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.statpanel .chip { font-size: 11px; color: var(--cyan); border-color: #1f4256; background: #08131b; }
.statpanel p { margin: 0; }
.stattable { display: grid; grid-template-columns: 110px 1fr 54px 44px 64px; gap: 5px 10px; align-items: center; font-size: 12px; }
.stattable .th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.stattable .sname { color: var(--text); }
.stattable .sname.up { color: #ff9a8a; }
.stattable .sname.up::after { content: " ▲"; font-size: 9px; }
.stattable .sname.down { color: #8ab4ff; }
.stattable .sname.down::after { content: " ▼"; font-size: 9px; }
.stattable .sbase { display: grid; grid-template-columns: 1fr 30px; gap: 6px; align-items: center; }
.stattable .sbase .bar { height: 6px; }
.stattable .sbase b { text-align: right; color: var(--muted); font-weight: 600; }
.stattable .siv, .stattable .sev { color: var(--muted); text-align: right; }
.stattable .sfinal { text-align: right; color: var(--gold); font-size: 14px; }
.bar.stat-hp span { background: #4cd964; } .bar.stat-atk span { background: #ff7a4a; } .bar.stat-def span { background: #f0c040; }
.bar.stat-spa span { background: #4aa3ff; } .bar.stat-spd span { background: #7ad0a0; } .bar.stat-spe span { background: #ff6aa8; }
.moves { display: grid; gap: 4px; }
.move { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 5px 10px; border-radius: 6px; background: #0a141c; border: 1px solid var(--edge); font-size: 12px; }
.moveline { display: flex; align-items: center; gap: 8px; }
.moveline b { margin-right: auto; }
.moveline .type { font-size: 10px; padding: 1px 6px; }
.moveline .cat { font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--edge); color: var(--muted); }
.moveline .cat-physical { color: #ffb08a; border-color: #5a2f1c; }
.moveline .cat-special { color: #9ac8ff; border-color: #1f3c5a; }
.moveline .pw { color: var(--muted); min-width: 64px; text-align: right; }
.moveline .cd { min-width: 72px; text-align: right; color: #ffcf6a; font-variant-numeric: tabular-nums; }
.moveline .cd.ready { color: var(--green); }
.move.skill { grid-template-columns: auto 1fr; align-items: center; border-color: #7a3a1c; background: linear-gradient(90deg, rgba(255, 110, 40, .16), #0a141c 60%); box-shadow: inset 0 0 0 1px rgba(255, 150, 60, .08), 0 0 12px rgba(255, 100, 30, .12); }
.move.skill b { color: #ffcf8a; text-shadow: 0 0 6px rgba(255, 120, 40, .55); }
.move .skilltag { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1a0a02; background: linear-gradient(180deg, #ffd27a, #ff7a2e); }
.move .skillinfo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.move .skillinfo p { margin: 0; width: 100%; color: var(--muted, #9fb3c2); font-size: 11px; }
.move .skillinfo .chip { font-size: 10px; color: #ffb27a; border-color: #5a2a14; background: #160b06; }

/* Perfil */
.profilewin { width: min(560px, 94vw); }
.profilewin .head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.profilewin .head h3 { margin: 0; font: 700 22px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); }
.profilewin .head > div { flex: 1; }

/* Pokédex (padrão do Pescador/Loja/Equipe: grade à esquerda, ficha à direita) */
.dexwin { width: min(1100px, 96vw); height: min(780px, 94vh); }
.dexwin .wbody { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 10px; overflow: hidden; }
.dexpill { color: #8fd3ff; border-color: #2f7fd6; font-weight: 700; white-space: nowrap; }
.dexseen { color: var(--muted); font-weight: 700; white-space: nowrap; }
.dexsummary {
  display: grid; grid-template-columns: auto minmax(120px, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px;
  background: linear-gradient(160deg, #0d1c28, #09121a); border: 1px solid #1f4256; box-shadow: inset 0 0 18px rgb(79 216 232 / 6%);
}
.dexkicker { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bar.dexprog { height: 8px; margin: 0; }
.bar.dexprog span { background: linear-gradient(90deg, #2f7fd6, #8fd3ff); box-shadow: 0 0 6px #4aa3ff; }
.dexsummary > .small { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dexfacts .chip { font-size: 11px; color: var(--muted); background: #08131b; }
.dexfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dexsearch { flex: 1 1 220px; min-width: 0; }
.dexsearch .icon { width: 16px; height: 16px; flex: none; }
body.playing .dexsearch input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 7px 0; outline: none; }
.dexsearch:focus-within { border-color: #2f7fd6; box-shadow: 0 0 10px rgb(74 163 255 / 20%); color: #8fd3ff; }
body.playing .dexselect { padding: 7px 10px; cursor: pointer; }
body.playing .dextoggle { padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--muted); background: #0a141c; }
body.playing .dextoggle .icon { width: 15px; height: 15px; }
body.playing .dextoggle.active { color: #8fd3ff; border-color: #2f7fd6; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 10px rgb(74 163 255 / 25%); }
.dextypes { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 9px; background: #0a141c; border: 1px solid var(--edge); }
body.playing .dextype { padding: 4px 0; border: 1px solid transparent; border-radius: 7px; background: transparent; transition: opacity 0.15s, background 0.15s; }
body.playing .dextype:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tc) 60%, transparent); background: color-mix(in srgb, var(--tc) 12%, #0a141c); }
body.playing .dextype.active { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 26%, #0a141c); box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 45%, transparent); }
.dextypes:has(.active) .dextype:not(.active):not(:hover) { opacity: 0.4; }
.dextype .typebadge { width: 24px; height: 24px; }
.dexstatusbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.playing .dexstatus { flex: 0 1 480px; grid-template-columns: repeat(4, 1fr); }
body.playing .shoptabs.dexstatus button { padding: 5px 8px; font-size: 12px; }
.dexcount { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dexmain { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 14px; min-height: 0; }
.dexleft { display: grid; min-height: 0; }
.dexgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 6px; align-content: start;
  overflow-y: auto; min-height: 0; padding: 2px 4px 2px 2px;
}
body.playing .dexcard {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 18px 4px 7px; text-align: center;
  background: radial-gradient(circle at 50% 42%, #132433, #0a141c 72%); color: var(--text);
  border: 1px solid var(--edge); border-bottom: 3px solid color-mix(in srgb, var(--tc) 85%, #000); border-radius: 8px;
  content-visibility: auto; contain-intrinsic-size: auto 112px;
}
body.playing .dexcard:hover { border-color: var(--gold-dim) var(--gold-dim) var(--tc); background: radial-gradient(circle at 50% 42%, #183044, #0e1b26 72%); }
body.playing .dexcard.selected { border-color: #8fd3ff #8fd3ff var(--tc); background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 0 1px #8fd3ff, 0 0 12px rgb(74 163 255 / 35%); }
body.playing .dexcard.unseen { border-bottom-color: color-mix(in srgb, var(--tc) 55%, #0a141c); }
.dextop { position: absolute; top: 3px; left: 6px; right: 5px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.dexno { font-size: 10px; font-style: normal; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.dexcard.caught .dexno { color: #8fd3ff; }
.dexmark { width: 12px; height: 12px; color: #4a5866; }
.dexmark.caught { color: #ff7a6a; filter: drop-shadow(0 0 3px rgb(255 122 106 / 55%)); }
.dexsprite { width: 48px; height: 48px; display: grid; place-items: center; flex: none; color: var(--muted); }
.dexsprite canvas { image-rendering: pixelated; }
.dexsprite.seen canvas { filter: grayscale(1) brightness(0.75); }
.dexsprite.unseen canvas { filter: brightness(0) drop-shadow(0 0 1px rgb(143 211 255 / 45%)); opacity: 0.85; }
.dexsprite.nosprite .icon { width: 26px; height: 26px; opacity: 0.35; }
.dexsprite.nosprite.caught .icon { color: #ff7a6a; opacity: 0.7; }
.dexsprite.nosprite.unseen .icon { opacity: 0.18; }
.dexname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 1.2; }
.dexcard.seen .dexname { color: #c3ccd3; }
.dexcard.unseen .dexname { color: var(--muted); font-weight: 600; }
.dexbadges { display: inline-flex; gap: 3px; }
.dexbadges .typebadge { width: 16px; height: 16px; }
.dexcard.unseen .dexbadges { opacity: 0.45; filter: saturate(0.4); }
.dexform { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; background: rgb(0 0 0 / 35%); }
.dexform.shiny { color: #ffd166; } .dexform.mega { color: #c89bff; } .dexform.variant { color: var(--cyan); }
.dexcard .dexform { position: absolute; top: 18px; right: 4px; padding: 0 4px; font-size: 8px; }
.dexempty { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--edge); border-radius: 8px; }
.dexside { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.dexside.loading .dexhero { opacity: 0.55; }
.dexhero .teamtitle h3 { font-size: 20px; overflow-wrap: anywhere; line-height: 1.1; }
.dexbig { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(#15304a, #0a141c); border: 1px solid #2f7fd6; box-shadow: 0 0 14px rgb(74 163 255 / 22%); }
.dexbig .dexsprite { width: 64px; height: 64px; }
.dexbig.unseen { border-color: var(--edge); box-shadow: none; background: radial-gradient(#132433, #0a141c); }
.dextags { display: flex; flex-wrap: wrap; gap: 4px; }
.dexside > * { min-width: 0; }
body.playing .dextabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.playing .shoptabs.dextabs button { padding: 6px 2px; font-size: 12px; gap: 4px; min-width: 0; white-space: nowrap; }
.dextabs .icon { width: 15px; height: 15px; flex: none; }
.dextabs button span { overflow: hidden; text-overflow: ellipsis; }
.dexpane { overflow-y: auto; min-height: 0; padding-right: 4px; }
body.playing .dexfoot .shopgo { padding: 9px; font-size: 13px; }
.dexdata { display: grid; gap: 10px; }
.dexstats {
  display: grid; grid-template-columns: 74px 1fr 34px; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 12px;
  background: linear-gradient(160deg, #0d1c28, #09121a); border: 1px solid #1f4256; box-shadow: inset 0 0 18px rgb(79 216 232 / 6%);
}
.dexstats .slabel { color: var(--muted); }
.dexstats .slabel.total { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.dexstats .bar { height: 6px; margin: 0; }
.dexstats .sline { height: 1px; background: var(--edge); }
.dexstats b { text-align: right; font-variant-numeric: tabular-nums; }
.dexstats b.top { color: var(--gold); }
.dexchips .chip { font-size: 11px; }
.dexchips .chip.ok { color: var(--green); border-color: #1e5a30; background: #0b1f12; }
.dexchips .chip.miss { color: #ff8a80; border-color: #5a2020; background: #1f0c0c; }
.dexchips .chip.legend { color: var(--gold); border-color: #6a5418; background: #2a2008; font-weight: 700; }
.dexkv div { font-size: 12px; }
.dexkv b { color: var(--gold); font-variant-numeric: tabular-nums; }
.dexballs { align-items: center; }
.dexballs .slabel { font-size: 11px; color: var(--muted); margin-right: 2px; }
.dexballs .chip { font-size: 11px; }
.dexevowrap { display: grid; gap: 8px; }
.dexevowrap p { margin: 0; }
.dexevo { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 10px; background: #0a141c; border: 1px solid var(--edge); }
.dexevo .evoarrow { font-size: 18px; flex: none; }
.dexstage { display: grid; gap: 6px; flex: 1 1 0; min-width: 0; max-width: 120px; }
.dexstage:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; max-width: 200px; flex-grow: 2; }
body.playing .dexevonode {
  display: grid; justify-items: center; gap: 3px; padding: 6px 4px; min-width: 0; text-align: center;
  background: radial-gradient(circle at 50% 35%, #132433, #0d1822 70%); border: 1px solid var(--edge); border-radius: 8px; color: var(--text);
}
body.playing .dexevonode:hover { border-color: var(--gold-dim); }
body.playing .dexevonode.current { border-color: #8fd3ff; box-shadow: 0 0 0 1px #8fd3ff, 0 0 10px rgb(74 163 255 / 30%); }
.dexevonode .dexsprite { width: 40px; height: 40px; }
.dexevonode b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.dexevonode.unseen b { color: var(--muted); }
.dexreq { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.dexreq .chip { padding: 1px 5px; font-size: 10px; }
.dexreq .itemchip { gap: 3px; }
.dexhabitat, .dexdrops { display: grid; gap: 6px; }
.dexplace, .dexdrop {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 7px 10px; background: #0a141c; border: 1px solid var(--edge); border-radius: 8px;
}
.dexplace:not(.locked) .autoicon { color: #8fd3ff; border-color: #2f7fd6; }
.dexplace.locked { opacity: 0.6; }
.dexdrop { grid-template-columns: auto minmax(0, 1fr) 84px; }
.dexdrop .thumb {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; border-radius: 4px; color: var(--muted);
}
.dexdrop .thumb canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.dexchance { display: grid; gap: 3px; justify-items: end; }
.dexchance b { color: var(--gold); font-size: 13px; font-variant-numeric: tabular-nums; }
.bar.dexdropbar { width: 100%; height: 5px; margin: 0; }
.bar.dexdropbar span { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
@media (max-width: 1000px) {
  .dexmain { grid-template-columns: minmax(0, 1fr) 300px; }
  .dextabs .icon { display: none; }
  .dextypes { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .dexsummary { grid-template-columns: auto minmax(120px, 1fr) auto; }
  .dexfacts { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dexwin { height: 94vh; }
  .dexwin .wbody { grid-template-rows: none; padding: 10px; gap: 8px; overflow-y: auto; }
  .dexmain { grid-template-columns: 1fr; grid-template-rows: 52vh auto; gap: 10px; }
  .dexgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .dexside { grid-template-rows: none; }
  .dexpane { overflow: visible; }
  .dexfacts { display: none; }
  .dexstatusbar { flex-wrap: wrap; }
  body.playing .dexstatus { flex: 1 1 100%; }
  .dexwin header .dexseen, .dexwin header .dexpill { display: none; }
}

/* Inventário */
.bagwin { width: min(520px, 94vw); height: min(680px, 92vh); }
.bagwin .wbody { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; overflow: hidden; }
.bagtotal { color: var(--gold); border-color: var(--gold-dim); font-weight: 700; white-space: nowrap; }
.bagtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.playing .bagtab {
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 4px 7px; border-radius: 10px;
  background: linear-gradient(180deg, #0f1f2c, #09131c); border: 1px solid var(--edge); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s, border-color .2s, color .2s;
}
body.playing .bagtab:hover { transform: translateY(-2px); color: var(--text); }
.bagtabico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(#183244, transparent 70%); }
.bagtabico canvas, .bagtabico img { width: 30px; height: 30px; image-rendering: pixelated; }
.bagtabart { display: grid; place-items: center; }
.bagtabcount { position: absolute; top: 4px; right: 6px; min-width: 18px; padding: 0 5px; border-radius: 99px; background: #13283a; border: 1px solid var(--edge); font-size: 10px; font-style: normal; line-height: 15px; letter-spacing: 0; color: var(--muted); }
body.playing .bagtab.active { color: #ffe7a3; border-color: var(--gold-dim); background: linear-gradient(180deg, #2a2412, #0e1820 75%); box-shadow: 0 0 14px rgb(232 200 114 / 18%), inset 0 1px 0 rgb(255 231 163 / 20%); }
.bagtab.active::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.bagtab.active .bagtabico { animation: tabpop .5s cubic-bezier(.3, 1.6, .5, 1); background: radial-gradient(rgb(232 200 114 / 30%), transparent 70%); }
.bagtab.active .bagtabcount { background: var(--gold); border-color: var(--gold); color: #2a1c04; }
@keyframes tabpop { 0% { transform: scale(.7); } 60% { transform: scale(1.15) translateY(-2px); } }
.baghint { font-size: 11px; }
.baggrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; overflow: hidden auto; align-content: start; padding: 2px 6px 2px 2px; }
body.playing .bagcard {
  --r: #3a4b5a;
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 9px; clip-path: inset(0 round 9px);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--r) 22%, #0e1c28), #08111a 72%);
  border: 1px solid color-mix(in srgb, var(--r) 55%, #1a2a38);
  box-shadow: inset 0 -10px 14px -8px color-mix(in srgb, var(--r) 45%, transparent);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.baggrid.intro .bagcard { animation: bagin .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes bagin { from { opacity: 0; transform: scale(.85) translateY(6px); } }
.bagcard canvas, .bagcard .animicon, .bagcard .holo { transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), filter .25s; filter: drop-shadow(0 3px 2px rgb(0 0 0 / 55%)); }
.bagcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 18%) 50%, transparent 65%); transform: translateX(-120%); transition: transform .5s; pointer-events: none; }
body.playing .bagcard:not(.empty):hover { transform: translateY(-2px); border-color: var(--r); box-shadow: inset 0 -14px 18px -8px var(--r), inset 0 0 12px color-mix(in srgb, var(--r) 35%, transparent); }
.bagcard:not(.empty):hover::before { transform: translateX(120%); }
.bagcard:not(.empty):hover canvas, .bagcard:not(.empty):hover .animicon, .bagcard:not(.empty):hover .holo { transform: translateY(-4px) scale(1.12); filter: drop-shadow(0 7px 3px rgb(0 0 0 / 45%)); }
.bagcard.pokemon .bagthumb canvas { animation: bagbreathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes bagbreathe { 50% { transform: translateY(-2px) scaleY(1.03); } }
.bagcard.glint::after { content: ""; position: absolute; width: 8px; height: 8px; right: 12px; top: 10px; background: radial-gradient(#fff, transparent 70%); opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: bagglint 5s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
@keyframes bagglint { 0%, 88%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 93% { opacity: 1; transform: scale(1.3) rotate(45deg); } }
body.playing .bagcard.selected { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 16px rgb(79 216 232 / 35%); }
.bagring { position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgb(79 216 232 / 70%); animation: bagspin 8s linear infinite; pointer-events: none; }
.bagcard.selected canvas, .bagcard.selected .animicon { animation: bagbob 1.4s ease-in-out infinite; }
@keyframes bagspin { to { transform: rotate(360deg); } }
@keyframes bagbob { 50% { transform: translateY(-3px); } }
.bagnew { position: absolute; left: 3px; top: 3px; padding: 0 4px; border-radius: 3px; background: var(--cyan); color: #04121a; font: 900 8px/12px "Segoe UI", sans-serif; font-style: normal; letter-spacing: .08em; animation: bagblink 1.4s ease-in-out infinite; }
@keyframes bagblink { 50% { opacity: .45; } }
body.playing .bagcard.empty { border: 1px dashed #2b4256; background: rgb(255 255 255 / 2%); box-shadow: none; opacity: .7; cursor: default; }
body.playing .bagcard.pokemon.active { border-color: var(--gold); }
.bagcard.pokemon.active::after { content: "ATIVO"; position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 900 8px/12px "Segoe UI", sans-serif; letter-spacing: .15em; color: #2a1c04; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.bagcard.pokemon.active .caughtball { display: none; }
.bagpicked { grid-template-columns: 84px 1fr; }
.bagpedestal { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.bagpedestal .r1, .bagpedestal .r2, .bagpedestal .glow { position: absolute; border-radius: 50%; pointer-events: none; }
.bagpedestal .r1 { inset: 4px; border: 1px solid rgb(79 216 232 / 45%); border-top-color: transparent; animation: bagspin 5s linear infinite; }
.bagpedestal .r2 { inset: 13px; border: 1px dashed rgb(232 200 114 / 50%); animation: bagspin 9s linear infinite reverse; }
.bagpedestal .glow { bottom: 8px; width: 60px; height: 14px; background: radial-gradient(rgb(79 216 232 / 60%), transparent 70%); }
.bagpedestal > :last-child { position: relative; animation: bagbob 2s ease-in-out infinite; filter: drop-shadow(0 6px 4px rgb(0 0 0 / 55%)); }
body.playing .bagpedestal .bagthumb.big { background: none; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .bagwin *, .bagwin *::before, .bagwin *::after { animation: none !important; transition: none !important; }
}
.bagcard.pokemon.fainted canvas { filter: grayscale(1) brightness(0.8); }
.bagcard.stone { box-shadow: inset 0 0 0 1px rgb(255 207 106 / 25%); }
.bagthumb { display: grid; place-items: center; color: var(--muted); }
.bagthumb canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.bagthumb .icon { width: 24px; height: 24px; }
.bagthumb.big { width: 56px; height: 56px; border-radius: 8px; background: radial-gradient(#132433, #0a141c); border: 1px solid #2f7fd6; }
.bagthumb.big canvas { width: 48px; height: 48px; }
.bagcount { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 700; font-style: normal; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.bagcard.pokemon .bagcount { color: var(--cyan); }
.caughtball { position: absolute; left: 3px; top: 3px; }
.caughtball canvas, .ithumb.mini.caughtball canvas { width: 14px; height: 14px; }
.bagfoot { min-height: 120px; align-content: start; }
.bagdesc { margin: 0; font-size: 12px; font-style: italic; color: var(--muted); }
.bagfacts { display: flex; flex-wrap: wrap; gap: 4px; }
.bagfacts .chip { font-size: 11px; }
.bagfacts .chip.gold { color: var(--gold); border-color: var(--gold-dim); }
.eggart { display: block; image-rendering: pixelated; }
body.playing .bagcard.incubator { border-color: #2f7fd6; background: radial-gradient(circle at 50% 55%, #1c3550, #0a141c 70%); }
body.playing .bagcard.incubator.ready { border-color: var(--gold); box-shadow: 0 0 10px rgb(255 207 106 / 35%); }
.bagcard.incubator .bagcount { color: var(--cyan); }
.bagcard.incubator.ready .bagcount { color: var(--gold); }
.bagcard.incubator.ready .eggart { animation: eggwobble 1.2s ease-in-out infinite; }
@keyframes eggwobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.eggmeter { grid-template-columns: 48px 1fr auto; }
.bar.egg span { background: linear-gradient(90deg, #2f7fd6, #8fd3ff); box-shadow: 0 0 6px #4aa3ff; }
.bar.egg.ready span { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

/* Loja */
/* Loja do Mark (padrão do Pescador) */
.shopwin { width: min(460px, 94vw); max-height: min(720px, 92vh); }
.shopwin .wbody { display: grid; grid-template-rows: auto auto minmax(120px, 1fr) auto auto; gap: 10px; overflow: hidden; }
.shopgold { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); border-color: var(--gold-dim); font-weight: 700; white-space: nowrap; }
.shopgold .icon { width: 13px; height: 13px; }
.shoptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 9px; background: #0a141c; border: 1px solid var(--edge); }
body.playing .shoptabs button { padding: 7px 10px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 700; }
body.playing .shoptabs button.active { color: #8fd3ff; border-color: #2f7fd6; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 10px rgb(74 163 255 / 25%); }
.shophint { margin: 0; font-size: 12px; color: var(--muted); }
.shoplist { display: grid; gap: 6px; overflow-y: auto; align-content: start; padding-right: 4px; }
body.playing .shopcard {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left;
  padding: 7px 10px; background: #0a141c; border: 1px solid var(--edge); border-radius: 8px; color: var(--text);
}
body.playing .shopcard:hover { border-color: var(--gold-dim); background: #0e1b26; }
body.playing .shopcard.selected { border-color: #8fd3ff; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 0 1px #8fd3ff, 0 0 12px rgb(74 163 255 / 35%); }
body.playing .shopcard.poor { opacity: 0.55; }
body.playing .shopcard.ball { border-left: 3px solid var(--ball, var(--edge)); }
body.playing .shopcard.locked { opacity: 0.6; filter: saturate(0.5); }
body.playing .shopcard.special { background: linear-gradient(90deg, color-mix(in srgb, var(--ball, #888) 14%, #0a141c), #0a141c 60%); }
.shopside .owned.lock { color: #ff9a7a; font-weight: 700; }
.shopsection { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--edge); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.shopwin .thumb {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; border-radius: 4px; color: var(--muted);
}
.shopwin .thumb canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.shopcard.stone .thumb { border-color: var(--gold-dim); }
.shoptext { display: grid; gap: 2px; min-width: 0; }
.shoptext b { font-size: 13px; }
.shoptext .small { color: var(--muted); font-size: 11px; }
.shopside { display: grid; justify-items: end; gap: 2px; }
.shopside .price { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.shopside .owned { font-size: 11px; color: var(--muted); }
.shopfoot { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--edge); }
.shoppicked { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.shopqty { display: flex; gap: 6px; align-items: center; }
.shopqty input { width: 72px; padding: 6px 8px; text-align: center; font-variant-numeric: tabular-nums; }
body.playing .shopqty .preset { min-width: 40px; }
body.playing .shopgo { width: 100%; padding: 10px; font-size: 15px; letter-spacing: 0.04em; }
body.playing .sleepactions .shopgo { flex: 1; width: auto; }
body.playing .sellall { width: 100%; }
.shopnote { margin: 0; font-size: 11px; color: var(--muted); text-align: center; }

/* NPCs e menu */
.npcwin, .menuwin { width: min(360px, 92vw); }
.npcwin .wbody { display: grid; gap: 12px; justify-items: center; text-align: center; }
.npcwin .wbody p { margin: 0; }
.menuwin .wbody { display: grid; gap: 8px; }

/* Pesca (piloto) */
body.playing button.blue {
  background: linear-gradient(#5db4ff, #2f7fd6);
  color: #06121f;
  border-color: #8fd3ff;
  font-weight: 700;
}
body.playing button.blue:hover:not(:disabled) { filter: brightness(1.1); }
body.playing button.blue:disabled { filter: grayscale(0.6) brightness(0.7); cursor: default; }
.npcface { width: 40px; height: 40px; object-fit: contain; object-position: bottom; image-rendering: pixelated; margin: -6px 0 -4px; }
.fisherdlg .wbody p { color: var(--text); }
.fishwin { width: min(440px, 94vw); max-height: min(640px, 92vh); }
.fishwin .wbody { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; overflow: hidden; }
.fishlv { color: #8fd3ff; border-color: #2f7fd6; font-weight: 700; white-space: nowrap; }
.fishprog { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; cursor: help; }
.fishprog .small { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar.fishxp { height: 6px; margin: 0; }
.bar.fishxp span { background: linear-gradient(90deg, #2f7fd6, #8fd3ff); box-shadow: 0 0 6px #4aa3ff; }
.fishhint { margin: 0; font-size: 12px; color: var(--muted); }
.tierlist { display: grid; gap: 6px; overflow-y: auto; align-content: start; padding-right: 4px; min-height: 120px; }
body.playing .tiercard {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left;
  padding: 8px 10px; background: #0a141c; border: 1px solid var(--edge); border-radius: 8px; color: var(--text);
}
body.playing .tiercard:hover:not(:disabled) { border-color: var(--gold-dim); background: #0e1b26; }
body.playing .tiercard.natural { border-color: #2f7fd6; }
body.playing .tiercard.selected { border-color: #8fd3ff; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 0 1px #8fd3ff, 0 0 12px rgb(74 163 255 / 35%); }
body.playing .tiercard.locked { opacity: 0.6; cursor: not-allowed; }
.tiercard .thumbs { display: flex; gap: 3px; flex-wrap: wrap; max-width: 190px; }
.tiercard .thumb {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; border-radius: 4px;
}
.tiercard .thumb canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.tiercard.locked .thumb canvas { filter: grayscale(1) brightness(0.8); }
.tiertext { display: grid; gap: 2px; min-width: 0; }
.tiertext b { font-size: 13px; line-height: 1.25; }
.tiertext .small { color: var(--muted); font-size: 11px; }
.tiertag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid var(--edge); }
.tiertag.current { color: #8fd3ff; border-color: #2f7fd6; background: rgb(47 127 214 / 15%); text-transform: uppercase; letter-spacing: 0.08em; }
.tiertag.lock { color: var(--muted); }
.tiertag.lock .icon { width: 12px; height: 12px; }
.tiertag.low { color: var(--muted); font-weight: 600; }
body.playing .fishgo { width: 100%; padding: 10px; font-size: 15px; letter-spacing: 0.06em; }

.castbar {
  position: absolute; left: 50%; bottom: 168px; transform: translate(-50%, 12px); z-index: 30;
  width: min(320px, 80vw); padding: 10px 12px; display: none; gap: 8px;
  background: var(--panel-solid); border: 1px solid #2f7fd6; border-radius: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 55%), 0 0 14px rgb(74 163 255 / 25%);
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.castbar.shown { display: grid; opacity: 1; transform: translate(-50%, 0); }
.casthead { display: flex; align-items: center; gap: 8px; font: 700 14px Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; color: #8fd3ff; }
.casttrack { height: 8px; background: #0a141c; border: 1px solid #1d2f3d; border-radius: 99px; overflow: hidden; }
.casttrack span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f7fd6, #8fd3ff); }
.castbar.done .casttrack { display: none; }
.castbar.caught { border-color: var(--line); }
.castbar.caught .casthead { color: var(--gold); }
.castbar.escaped .casthead { color: var(--muted); }
.castresult { display: grid; gap: 6px; }
.castresult:empty { display: none; }
.castcatch { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.castcatch .thumb { width: 40px; height: 40px; display: grid; place-items: center; background: radial-gradient(#132433, #0a141c); border: 1px solid var(--gold-dim); border-radius: 4px; }
.castcatch .thumb canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.castcatch div { display: grid; gap: 2px; }
.castgain { color: var(--muted); }
.castlevel { color: #8fd3ff; font-weight: 700; }
.castactions { display: flex; align-items: center; gap: 6px; }
.castactions .blue { flex: 1; }
body.playing .castactions .close { padding: 2px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); }
.menuitem { padding: 12px; font: 700 16px Georgia, serif; font-variant: small-caps; letter-spacing: 0.12em; color: var(--gold); background: transparent; border-color: transparent; }
.menuitem:hover { border-color: var(--edge) !important; background: #0a141c; }
.menuitem.danger { color: #ff8a80; }

/* Centro Pokémon e balão das NPCs */
.hud[hidden] { display: none; }
body.playing .npcbubble {
  position: absolute; z-index: 5; transform: translate(-50%, -100%); display: none; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #2a0d18;
  background: linear-gradient(180deg, #ffe0ec, #ff8fb5); border: 1px solid #ffd0e0;
  box-shadow: 0 0 0 2px rgb(255 122 168 / 25%), 0 6px 16px rgb(0 0 0 / 45%), 0 0 18px rgb(255 122 168 / 45%);
  animation: npcbob 1.6s ease-in-out infinite;
}
.npcbubble::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: #ff9cbd; border-right: 1px solid #ffd0e0; border-bottom: 1px solid #ffd0e0;
}
body.playing .npcbubble.shown { display: inline-flex; }
body.playing .npcbubble:hover { filter: brightness(1.08); border-color: #fff; }
.npcbubble svg { width: 14px; height: 14px; }
@keyframes npcbob { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }

/* Hunt Analyzer */
.analyzerwin { width: min(520px, 94vw); }
.balance { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); font-weight: 600; }
.balance.ok { border-color: var(--green); } .balance.ok b { color: var(--green); font-size: 18px; }
.balance.bad { border-color: var(--red); } .balance.bad b { color: #ff8a80; font-size: 18px; }
.rates { display: flex; gap: 6px; margin: 8px 0; }
.rates .pill { flex: 1; text-align: center; }
.drops { display: grid; gap: 4px; max-height: 200px; overflow: auto; margin-bottom: 10px; }
.drop { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 10px; border-radius: 6px; background: #0a141c; border: 1px solid var(--edge); font-size: 13px; }
.drop .gold { color: var(--green); }

/* Rankings */
.rankwin { width: min(760px, 96vw); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; margin-bottom: 12px; }
.place { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 10px; background: #0a141c; border: 2px solid #9aa5b0; text-align: center; }
.place.p1 { border-color: var(--line); background: linear-gradient(#162a3a, #0a141c); padding-top: 22px; }
.place.p3 { border-color: #b87333; }
.place.empty { min-height: 80px; align-content: center; }
.placename { font: 700 12px Georgia, serif; font-variant: small-caps; letter-spacing: 0.15em; color: var(--muted); }
.place.p1 .placename { color: var(--gold); }
.ranklist .trow { grid-template-columns: 32px 1fr auto auto; }
.ranklist .pos { color: var(--muted); font-weight: 700; }

/* Auto-Helper */
.autowin { width: min(500px, 94vw); max-height: min(720px, 92vh); }
.autowin .wbody { display: grid; gap: 10px; overflow-y: auto; }
.autocount { color: var(--muted); font-weight: 700; white-space: nowrap; }
.autocount.on { color: var(--green); border-color: #1e5a30; background: #0b1f12; }
.autosec { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: #0a141c; border: 1px solid var(--edge); transition: border-color 0.2s, box-shadow 0.2s; }
.autosec.on { border-color: #1e5a30; box-shadow: inset 3px 0 0 var(--green), 0 0 12px rgb(74 222 128 / 10%); }
.autohead { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.autoicon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; color: var(--muted); }
.autoicon .icon { width: 18px; height: 18px; }
.autosec.on .autoicon { color: var(--green); border-color: #1e5a30; }
.autotitle { display: grid; gap: 2px; min-width: 0; }
.autotitle h4 { margin: 0; font-size: 14px; color: var(--text); }
.autotitle .small { font-size: 11px; color: var(--muted); }
body.playing .autoswitch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #121c25; border: 1px solid var(--edge); color: var(--muted); font-size: 12px; font-weight: 700; min-width: 112px; }
.autoswitch .track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #2a3846; transition: background 0.2s; flex: none; }
.autoswitch .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9aa7b3; transition: left 0.2s, background 0.2s; }
body.playing .autoswitch.on { color: var(--green); border-color: #1e5a30; background: #0b1f12; }
.autoswitch.on .track { background: #1f7a3f; }
.autoswitch.on .knob { left: 18px; background: #eafff0; box-shadow: 0 0 6px var(--green); }
.autobody { display: grid; gap: 8px; transition: opacity 0.2s; }
.autosec:not(.on) .autobody { opacity: 0.45; }
.autosec:not(.on) .autobody:hover { opacity: 0.75; }
.autoitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
body.playing .autoitem {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 6px; text-align: center;
  background: #0d1822; border: 1px solid var(--edge); border-radius: 8px; color: var(--text);
}
body.playing .autoitem:hover { border-color: var(--gold-dim); background: #0e1b26; }
body.playing .autoitem.selected { border-color: #8fd3ff; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 0 1px #8fd3ff, 0 0 12px rgb(74 163 255 / 35%); }
.autoitem .thumb {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: radial-gradient(#132433, #0a141c); border: 1px solid #23394b; border-radius: 4px; color: var(--muted);
}
.autoitem .thumb canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.autoitem b { font-size: 12px; line-height: 1.2; }
.autoitem .small { font-size: 10px; color: var(--muted); }
.autoowned { position: absolute; top: 4px; right: 6px; font-size: 11px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.autoitem.empty .autoowned { color: #ff8a80; }
body.playing .autoitem[data-kind="ball"] { border-bottom: 2px solid var(--ball, var(--edge)); }
.autobonus { font-size: 10px; padding: 0 5px; border-radius: 999px; background: #3a2c0a; color: var(--gold); }
.autoitem.empty .thumb canvas { filter: grayscale(1) brightness(0.7); }
.autowarn { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12px; color: #ffb4a8; background: #1f0c0c; border: 1px solid #5a2020; }
.autowarn[hidden] { display: none; }
.autowarn .icon { width: 14px; height: 14px; flex: none; }
.autowarn span { flex: 1; }
.autolimit { color: var(--text); }
.autochips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 3px; border-radius: 9px; background: #0d1822; border: 1px solid var(--edge); }
body.playing .autochip { padding: 6px 4px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
body.playing .autochip.active { color: #8fd3ff; border-color: #2f7fd6; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 10px rgb(74 163 255 / 25%); }
body.playing .autoflag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #0d1822; border: 1px solid var(--edge); color: var(--muted); font-size: 12px; }
.autoflag .box { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; border: 1px solid #4a5866; background: #0a141c; }
.autoflag .box .icon { width: 12px; height: 12px; }
body.playing .autoflag.on { color: #8fd3ff; border-color: #2f7fd6; }
.autoflag.on .box { border-color: #8fd3ff; background: #2f7fd6; color: #06121f; }
.autoflags { display: flex; flex-wrap: wrap; gap: 8px; }
.shinysec { background: linear-gradient(180deg, rgba(60, 46, 4, 0.3), rgba(20, 16, 2, 0.2)); }
.shinysec .autoicon { color: #ffe066; border-color: #8a6d12; box-shadow: 0 0 8px rgba(255, 216, 74, 0.45); }
.autosec.shinysec.on { border-color: #8a6d12; box-shadow: inset 3px 0 0 #ffd84a, 0 0 14px rgba(255, 216, 74, 0.18); }
.autosec.shinysec.on .autoicon { color: #ffe066; border-color: #ffd84a; }
body.playing .shinysec .autoflag.on { color: #ffe066; border-color: #b8952f; }
.shinysec .autoflag.on .box { border-color: #ffe066; background: #ffd84a; color: #1a1400; }
.shinybest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #e9dcae; }
.shinybest b { color: #ffe066; }
.autonote { margin: 0; font-size: 11px; color: var(--muted); text-align: center; }
.switch { min-width: 90px; }
.switch.on { background: #16402a; border-color: var(--green); color: #cfeecf; }

/* Log */
.logwin { width: min(700px, 94vw); }

@media (max-width: 1100px) {
  .chat { width: 280px; height: 160px; }
  .capture { width: 260px; }
  .teamcard { width: 210px; }
}