/* PokeMonster Chrome Idle — tema escuro/dourado no estilo do client */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", Verdana, sans-serif;
  font-size: 13px;
  background: #05070a;
  color: #dfe6ee;
  user-select: none;
}
.hidden { display: none !important; }
.dim { color: #8b97a5; }
.tiny-txt { font-size: 10px; margin-top: 2px; }
b { color: #fff; }

/* ------------------------------------------------ painéis */
.panel {
  background: rgba(9, 13, 19, .93);
  border: 1px solid #715c25;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}
.hud { position: absolute; z-index: 10; }

.btn {
  background: #1a2330;
  color: #dfe6ee;
  border: 1px solid #37475c;
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}
.btn:hover { background: #243144; }
.btn.gold { background: #2e2410; border-color: #a3852f; color: #ffd964; }
.btn.gold:hover { background: #40331a; }
.btn.tiny { padding: 1px 8px; font-size: 11px; }
.btn:disabled { opacity: .4; cursor: default; }

.tag {
  background: #1a2330; border: 1px solid #37475c; border-radius: 8px;
  font-size: 10px; padding: 1px 7px; color: #aeb9c6;
}
.err { color: #ff7a7a; min-height: 18px; font-size: 12px; margin-top: 8px; text-align: center; }

/* ------------------------------------------------ login */
/* ================= LOGIN / REGISTER (dark épico) ================= */
.login-wrap {
  position: fixed; inset: 0; z-index: 100; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px;
  /* tema "Gengar": roxo fantasma escuro. Troque por login-bg.jpg pra sua arte. */
  background:
    radial-gradient(1000px 700px at 50% -8%, rgba(140, 70, 190, .30), transparent 60%),
    radial-gradient(800px 600px at 12% 25%, rgba(90, 40, 150, .28), transparent 55%),
    radial-gradient(900px 650px at 88% 80%, rgba(60, 40, 140, .26), transparent 55%),
    radial-gradient(600px 500px at 50% 110%, rgba(180, 60, 120, .18), transparent 60%),
    linear-gradient(180deg, #140a20 0%, #0c0714 55%, #050308 100%);
}
/* camada opcional: coloque backgrounds/login.jpg em public/ pra um fundo
   próprio (se não existir, fica só o gradiente roxo por baixo) */
.login-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('backgrounds/login.jpg') center/cover no-repeat;
  opacity: .38; filter: saturate(1.05);
}
.login-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, transparent 40%, rgba(2,4,8,.75) 100%);
}
/* logo/título */
.login-logo { position: relative; z-index: 2; text-align: center; margin-bottom: 18px; }
.lg-title {
  font-size: 46px; font-weight: 900; letter-spacing: 1px; line-height: 1;
  color: #ffd964; text-shadow: 0 3px 0 rgba(122,90,16,.6), 0 0 28px rgba(255,217,100,.45);
}
.lg-title span { color: #7fe0ff; text-shadow: 0 3px 0 rgba(16,70,90,.6), 0 0 28px rgba(127,224,255,.5); }
.lg-sub { margin-top: 6px; color: #9fb0c8; font-size: 12px; letter-spacing: 4px; }

/* card */
.login-card {
  position: relative; z-index: 2; width: 360px; max-width: 92vw; padding: 26px 26px 22px;
  background: linear-gradient(180deg, rgba(16,22,34,.94), rgba(9,13,22,.96));
  border: 1px solid #b9922f; border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(255,217,100,.05);
}
.login-head {
  text-align: center; color: #ffd964; font-weight: bold; letter-spacing: 3px;
  text-transform: uppercase; font-size: 15px; margin-bottom: 18px;
}
.login-note { color: #9fb0c8; font-size: 12px; margin: 4px 0 10px; line-height: 1.5; }

/* inputs com ícone */
.in-wrap { position: relative; margin-bottom: 12px; }
.in-wrap .in-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: .8; pointer-events: none;
}
.in-wrap input {
  width: 100%; box-sizing: border-box; padding: 12px 40px 12px 36px;
  background: #0b111c; color: #fff; font-size: 14px;
  border: 1px solid #2a3a52; border-radius: 9px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.in-wrap input::placeholder { color: #6a7d95; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.in-wrap input:focus { border-color: #c9a34e; box-shadow: 0 0 0 2px rgba(201,163,78,.2); }
.in-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #8b97a5; cursor: pointer; font-size: 15px; padding: 4px;
}
.in-eye:hover { color: #ffd964; }

/* botão épico */
.btn-epic {
  width: 100%; margin-top: 6px; padding: 13px; cursor: pointer;
  background: linear-gradient(180deg, #2a2208, #1c1706);
  border: 1px solid #c9a34e; border-radius: 10px;
  color: #ffd964; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 14px;
  box-shadow: inset 0 0 18px rgba(255,217,100,.12); transition: transform .05s, box-shadow .15s, background .15s;
}
.btn-epic:hover { background: linear-gradient(180deg, #3a2f0c, #241d08); box-shadow: inset 0 0 24px rgba(255,217,100,.25), 0 0 18px rgba(255,217,100,.2); }
.btn-epic:active { transform: translateY(1px); }
.btn-ghost {
  width: 100%; margin-top: 10px; padding: 11px; cursor: pointer;
  background: transparent; border: 1px solid #37475c; border-radius: 10px;
  color: #cfd8e3; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; font-size: 12px;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: #7fd0ff; color: #fff; }
.login-btns { display: flex; gap: 10px; }
.login-btns .btn-epic, .login-btns .btn-ghost { margin-top: 12px; }

/* divisor "ou" */
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; color: #5a6b82; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #2a3a52, transparent); }

.login-discord {
  position: relative; z-index: 2; margin-top: 20px; color: #9fb0c8; font-size: 12px;
  text-decoration: none; letter-spacing: 1px; text-transform: uppercase; font-weight: bold;
  display: inline-flex; align-items: center; gap: 8px;
}
.login-discord:hover { color: #8fa8ff; }

/* ------------------------------------------------ canvas */
#world { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

#zone-label {
  top: 10px; left: 50%; transform: translateX(-50%);
  margin-top: 52px;
  color: #cfe3b8; text-shadow: 0 1px 3px #000;
  font-size: 12px; letter-spacing: .4px; pointer-events: none;
}

/* ------------------------------------------------ painel do jogador */
#player-panel { top: 12px; left: 12px; width: 240px; padding: 10px 12px; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; }
#pp-name { font-weight: bold; color: #ffd964; font-size: 14px; }
.pp-poke { display: flex; gap: 8px; margin: 8px -4px 6px; padding: 4px; border-radius: 8px; align-items: center; }
.pp-poke.clickable { cursor: pointer; transition: background .15s; }
.pp-poke.clickable:hover { background: rgba(255,255,255,.06); }
.pp-poke.clickable:hover #pp-sprite { border-color: #c9a34e; }
#pp-sprite { image-rendering: pixelated; background: #0d141d; border: 1px solid #37475c; border-radius: 6px; transition: border-color .15s; }

/* ⚡ seletor rápido de pokémon ativo (popover sob o painel) */
#poke-switch { position: fixed; z-index: 120; width: 210px; padding: 10px; }
#poke-switch .ps-title { color: #ffd964; font-weight: bold; font-size: 12px; margin-bottom: 8px; }
#poke-switch .ps-grid { display: flex; flex-direction: column; gap: 5px; }
.ps-card {
  position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: #101823; border: 1px solid #1c2836; border-radius: 8px; padding: 5px 8px 5px 6px;
  transition: border-color .15s, transform .12s, background .15s;
}
.ps-card:hover { border-color: #31465f; transform: translateX(2px); background: #121c29; }
.ps-card.active { border-color: #3f7d46; box-shadow: 0 0 8px rgba(63,125,70,.3); cursor: default; }
.ps-card.active:hover { transform: none; }
.ps-card.shiny { border-color: #b98f1f; }
.ps-card canvas { image-rendering: pixelated; }
.ps-info { flex: 1; min-width: 0; }
.ps-nm { font-size: 12px; color: #eaf0f6; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-lv { font-size: 10px; color: #7c8a99; }
.ps-hp { height: 4px; background: #26303c; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.ps-hp > div { height: 100%; background: linear-gradient(#66d96b, #2f9d43); }
.ps-cur { color: #7fe08a; font-size: 12px; }
.pp-poke-info { flex: 1; min-width: 0; }
.pp-poke-info .row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.bar { height: 9px; background: #0d141d; border: 1px solid #37475c; border-radius: 4px; overflow: hidden; }
.bar > div { height: 100%; width: 0; transition: width .5s; }
.bar.hp > div { background: linear-gradient(#66d96b, #2f9d43); }
.bar.exp { margin-top: 6px; }
.bar.exp > div { background: linear-gradient(#ffd964, #b98f1f); }
.pp-cash { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; }

/* ------------------------------------------------ topbar */
#topbar {
  top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px 8px;
}
.tb {
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  font-size: 17px; padding: 3px 8px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.tb:hover { background: #223047; border-color: #46618a; }
.tb:active { transform: scale(.9); }
/* ícones reais do client (PNG) */
.tb.ic { padding: 5px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.tb.ic img {
  width: 26px; height: 26px; image-rendering: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
  opacity: .92; transition: opacity .12s, transform .1s;
}
.tb.ic:hover img { opacity: 1; transform: scale(1.08); }
/* botão de emoji (📢 Update) + bolinha de "tem novidade" */
.tb.ic { position: relative; }
.tb.ic.emoji span { font-size: 21px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.upd-dot {
  position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
  border-radius: 50%; background: #e5484d; border: 1px solid #1a1408;
}
.upd-card {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 10px;
}
.upd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.upd-head b { color: #ffd964; }
.upd-list { margin: 0; padding-left: 18px; }
.upd-list li { margin: 4px 0; font-size: 13px; }

/* ------------------------------------------------ auto helper */
#auto-panel {
  top: 12px; right: 12px; width: 232px; padding: 10px 12px; font-size: 12px;
  max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin;
  accent-color: #58c468; /* checkboxes verdes */
}
.ap-title {
  color: #ffd964; font-weight: bold; margin-bottom: 8px;
  border-bottom: 1px solid #273246; padding-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
#ah-min {
  background: #101823; border: 1px solid #37475c; border-radius: 5px;
  color: #aeb9c6; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 2px 8px; font-weight: bold;
}
#ah-min:hover { border-color: #c9a34e; color: #ffd964; }
/* minimizado: só a barra do título */
#auto-panel.min > :not(.ap-title) { display: none !important; }
#auto-panel.min { width: 150px; }
#auto-panel.min .ap-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
#auto-panel label { display: block; margin: 0; cursor: pointer; }
#auto-ball, #fish-bait {
  background: #0d141d; color: #fff; border: 1px solid #37475c;
  border-radius: 4px; padding: 3px;
}

/* Auto-Helper: cards — LIGADO fica com moldura verde */
.ah-hunt { width: 100%; margin: 0 0 8px; font-size: 12px; }
.ah-row {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 7px 9px; margin: 6px 0; transition: border-color .15s, background .15s;
}
.ah-row:hover { border-color: #37475c; }
.ah-row.on {
  border-color: #3f8f4a;
  background: linear-gradient(180deg, #0e1c13, #0c1610);
  box-shadow: inset 0 0 12px rgba(88, 196, 104, .07);
}
.ah-row label { margin: 0; }
/* descrição em SUB-LINHA alinhada (inline embolava com o título) */
.ah-row .ah-desc { display: block; color: #8b97a5; font-size: 10px; margin: 2px 0 0 21px; line-height: 1.3; }
.ah-row.on .ah-desc { color: #9fb8a4; }
.ah-row:not(.on) b { color: #aeb9c6; font-weight: 600; }
.ah-row.on b { color: #cfeed4; }
.ah-sub { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
/* sub-config some quando a função está desligada — exceto as .always
   (Bola e Isca também servem pra captura/pesca MANUAL) */
.ah-row:not(.on) .ah-sub:not(.always) { display: none; }
.ah-line { display: flex; align-items: center; gap: 6px; }
.ah-line span { flex: none; color: #aeb9c6; font-size: 11px; }
.ah-line select {
  flex: 1; min-width: 0; background: #0d141d; color: #fff;
  border: 1px solid #37475c; border-radius: 4px; padding: 3px; font-size: 11px;
}
.ah-line .tag { flex: none; }
.ah-check { font-size: 11px; color: #aeb9c6; margin-left: 12px !important; }
.ah-warn { color: #ffd964; font-size: 10px; margin-top: 4px; }
/* celular: o painel abre mais pra baixo — não deixa passar da tela */
@media (max-width: 980px), (pointer: coarse) {
  #auto-panel { max-height: calc(100vh - 72px); }
}

/* badges dos slots do time/box (✨ shiny · 🔒 travado) */
.eq-slot { position: relative; }
.slot-b { position: absolute; top: 2px; font-size: 11px; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.slot-b.sh { left: 3px; }
.slot-b.lk { right: 3px; }

/* barra fininha de EXP do pokémon (abaixo do HP no painel do jogador) */
.poke-exp { height: 5px; margin-top: 3px; }

/* 📊 Hunt Analyse */
.ha-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ha-card {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.ha-card span { color: #8b97a5; font-size: 11px; }
.ha-card b { font-size: 16px; color: #fff; }
.ha-card i { font-style: normal; color: #ffd964; font-size: 11px; }
.ha-loot { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ha-loot-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #0d141d; border: 1px solid #273246; border-radius: 6px;
  padding: 4px 10px; font-size: 12px;
}
.ha-loot-row > b { color: #ffd964; }
.ha-loot-item { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.ha-loot-item canvas { image-rendering: pixelated; flex: none; }
@media (max-width: 700px) { .ha-grid { grid-template-columns: repeat(2, 1fr); } }

/* 🗺️ minimapa ao vivo (canto superior esquerdo, sob o painel do jogador) */
#minimap {
  position: fixed; left: 12px; top: 262px; z-index: 26; padding: 5px 6px 6px;
  width: 194px;
}
.mm-head {
  display: flex; justify-content: space-between; align-items: center;
  color: #ffd964; font-size: 11px; font-weight: bold; margin-bottom: 4px; padding: 0 2px;
}
#mm-hide {
  background: #101823; border: 1px solid #37475c; border-radius: 4px;
  color: #aeb9c6; cursor: pointer; font-size: 11px; line-height: 1; padding: 1px 6px;
}
#mm-hide:hover { border-color: #c9a34e; color: #ffd964; }
#mm-canvas {
  display: block; width: 182px; height: 140px; border-radius: 5px;
  border: 1px solid #273246; background: #06090d; cursor: pointer;
  image-rendering: pixelated;
}
#mm-show {
  position: fixed; left: 12px; top: 262px; z-index: 26;
  background: rgba(10,16,24,.85); border: 1px solid #2a3d55; border-radius: 6px;
  color: #ffd964; cursor: pointer; font-size: 16px; padding: 5px 9px;
}
/* no celular o minimapa some (tela pequena) */
@media (max-width: 980px), (pointer: coarse) { #minimap, #mm-show { display: none; } }

/* 📊 mini Hunt Analyse (barrinha ao vivo sob o painel do jogador) */
#mini-hunt {
  position: fixed; left: 12px; top: 230px; z-index: 26; cursor: pointer;
  background: rgba(10, 16, 24, .85); border: 1px solid #2a3d55; border-radius: 6px;
  padding: 4px 10px; font-size: 11px; display: flex; gap: 10px; align-items: center;
  white-space: nowrap;
}
#mini-hunt:hover { border-color: #37475c; }
#mini-hunt .mh-xp { color: #ffd964; }
#mini-hunt .mh-gold { color: #9fe28f; }
#mini-hunt .mh-k { color: #ff9d9d; }
#mini-hunt .mh-x { color: #8b97a5; cursor: pointer; font-size: 13px; padding: 0 2px; }
#mini-hunt .mh-x:hover { color: #fff; }
@media (max-width: 980px), (pointer: coarse) { #mini-hunt { display: none; } }

/* 💰 feed de ganhos (+XP, +gold, loot) — lateral esquerda */
#gain-feed {
  position: fixed; left: 12px; top: 430px; z-index: 25;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.gain {
  background: rgba(10, 16, 24, .85); border: 1px solid #2a3d55; border-radius: 6px;
  padding: 3px 10px; font-size: 12px; color: #cfd8e3; max-width: 240px;
  animation: gainIn .25s ease-out;
}
@keyframes gainIn { from { opacity: 0; transform: translateX(-14px); } }
.gain.out { opacity: 0; transition: opacity .5s; }
.gain.xp { color: #ffd964; border-color: #7a5a10; }
.gain.gold { color: #9fe28f; border-color: #3f8f4a; }
.gain.loot { color: #8fc7ff; border-color: #2f6d9d; }
.gain.catch { color: #ff9d9d; border-color: #a33; }

/* ✨ banner GLOBAL de captura shiny (anúncio dourado) */
#shiny-banner {
  position: fixed; top: 14%; left: 50%; transform: translateX(-50%);
  width: min(92vw, 860px); z-index: 95; cursor: pointer;
  background: linear-gradient(105deg, #2b2007 0%, #4a3a10 30%, #67511a 50%, #4a3a10 70%, #2b2007 100%);
  border: 1px solid #c9a34e; border-radius: 10px;
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 100% 82%, 97% 100%, 3% 100%, 0 82%, 0 18%);
  padding: 18px 30px 22px; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.65), inset 0 0 60px rgba(255,217,100,.12);
  animation: sbIn .5s ease-out;
}
@keyframes sbIn { from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(.95); } }
#shiny-banner.sb-out { opacity: 0; transition: opacity .7s; }
#shiny-banner .sb-title {
  font-weight: bold; letter-spacing: 4px; color: #ffd964; font-size: 20px;
  margin-bottom: 10px; animation: sbPulse 1.4s infinite alternate;
}
@keyframes sbPulse { from { text-shadow: 0 0 8px rgba(255,217,100,.5); } to { text-shadow: 0 0 22px rgba(255,217,100,1); } }
#shiny-banner .sb-body { display: flex; align-items: center; gap: 22px; }
#shiny-banner .sb-poke { position: relative; flex: none; filter: drop-shadow(0 0 14px rgba(255,217,100,.85)); }
#shiny-banner .sb-poke::after { /* sombra dourada no chão, como no anúncio */
  content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 96px; height: 24px; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(140,105,25,.85), transparent 70%);
}
#shiny-banner .sb-poke canvas { image-rendering: pixelated; }
#shiny-banner .sb-mid { flex: 1; }
#shiny-banner .sb-who { color: #f3e7c8; font-size: 15px; }
#shiny-banner .sb-cyan { color: #7fe7ff; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 10px rgba(127,231,255,.7); }
#shiny-banner .sb-name {
  font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #ffd964;
  text-shadow: 0 2px 0 #7a5a10, 0 0 18px rgba(255,217,100,.5); margin: 4px 0 8px;
}
#shiny-banner .sb-global {
  display: inline-block; background: #5b2fd4; color: #fff; border-radius: 14px;
  padding: 4px 14px; font-size: 12px; font-weight: bold; letter-spacing: 1px;
}
#shiny-banner .sb-rare { color: #cbb98a; font-size: 11px; margin-top: 8px; font-style: italic; }
#shiny-banner .sb-hex {
  flex: none; width: 92px; height: 102px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(#3a2c08, #1f1804); border: 1px solid #c9a34e;
  color: #ffd964; font-size: 11px; font-weight: bold; letter-spacing: 1px;
}
#shiny-banner .sb-hex-star { font-size: 26px; text-shadow: 0 0 12px rgba(255,217,100,.9); }
@media (max-width: 700px) {
  #shiny-banner .sb-hex { display: none; }
  #shiny-banner .sb-name { font-size: 24px; }
}

/* 🔑 bloco de recuperação no Perfil (letra maior pra dar pra LER) */
.prof-rec {
  margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.7;
  background: #0d141d; border: 1px solid #37475c; border-radius: 6px; color: #cfd8e3;
}

/* link "Esqueceu a senha?" da tela de login */
.linklike {
  background: none; border: none; color: #8fc7ff; cursor: pointer;
  font-size: 12px; margin-top: 8px; text-decoration: underline; padding: 0;
}
.linklike:hover { color: #bfe0ff; }

/* ------------------------------------------------ captura */
#capture-panel { right: 12px; bottom: 12px; width: 265px; padding: 10px 12px; }
.cp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 6px; }
/* ⚾ botão do gerenciador de bolas (pity por espécie) */
.cp-mgr {
  background: #101823; border: 1px solid #37475c; border-radius: 5px;
  cursor: pointer; font-size: 13px; padding: 1px 7px; margin-left: auto;
}
.cp-mgr:hover { border-color: #c9a34e; }
/* 🧍 bônus do outfit no card da loja */
.oc-bonus { font-size: 10px; color: #ffd964; margin: 2px 0 4px; min-height: 12px; }

/* 🪟 painéis arrastáveis */
.drag-handle { cursor: move; -webkit-user-select: none; user-select: none; }
.ah-reset {
  width: 100%; margin-top: 8px; padding: 6px; cursor: pointer;
  background: transparent; border: 1px dashed #37475c; border-radius: 6px;
  color: #8b97a5; font-size: 11px;
}
.ah-reset:hover { border-color: #c9a34e; color: #ffd964; }

/* ✨ botão Bônus no painel do jogador */
#btn-bonus {
  width: 100%; margin-top: 8px; padding: 6px; cursor: pointer;
  background: linear-gradient(180deg, #1a2233, #121826);
  border: 1px solid #37475c; border-radius: 7px;
  color: #ffd964; font-size: 12px; font-weight: bold; letter-spacing: .5px;
  transition: border-color .15s, background .15s;
}
#btn-bonus:hover { border-color: #c9a34e; background: linear-gradient(180deg, #232d40, #161d2c); }
/* linhas de bônus no modal */
.bonus-row {
  display: flex; align-items: center; gap: 12px;
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 9px 12px; margin-bottom: 7px;
}
.bonus-row .bn-ic { font-size: 18px; width: 24px; text-align: center; flex: none; }
.bonus-row .bn-lbl { flex: 1; display: flex; flex-direction: column; }
.bonus-row .bn-lbl b { font-size: 13px; }
.bonus-row .bn-from { font-size: 11px; color: #8b97a5; }
.bonus-row .bn-val { font-weight: 900; font-size: 17px; }

/* 🛡️ clãs — cards estilo banner com brasão */
.clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.clan-card {
  position: relative; text-align: center; padding: 16px 10px 12px; border-radius: 12px;
  background:
    radial-gradient(120px 80px at 50% 0%, color-mix(in srgb, var(--cc) 40%, transparent), transparent 70%),
    linear-gradient(180deg, #131a26, #0b111a);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, #273246);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.clan-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--cc) 70%, #273246); }
.clan-card.on { border-color: var(--cc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 45%, transparent), 0 10px 28px rgba(0,0,0,.45); }
/* faixa de cor no topo do card */
.clan-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cc), transparent); border-radius: 12px 12px 0 0;
}
/* 🛡️ BRASÃO heráldico: moldura dourada metálica + escudo na cor do clã + gloss */
.cc-shield {
  width: 72px; height: 80px; padding: 3px; margin-top: 2px;
  clip-path: polygon(50% 0, 100% 15%, 100% 64%, 50% 100%, 0 64%, 0 15%);
  background: linear-gradient(155deg, #fbeeb6 0%, #cba845 30%, #7c5f22 62%, #4a3712 100%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px color-mix(in srgb, var(--cc) 45%, transparent));
}
.cc-emblem {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 36px; line-height: 1;
  clip-path: polygon(50% 0, 100% 15%, 100% 64%, 50% 100%, 0 64%, 0 15%);
  background:
    radial-gradient(70% 45% at 50% 18%, rgba(255,255,255,.45), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--cc) 92%, #fff 12%), color-mix(in srgb, var(--cc) 48%, #000 34%));
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.35), inset 0 3px 8px rgba(255,255,255,.15);
  text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.3);
}
/* se você puser a SUA arte em public/clans/<clã>.png ela entra aqui */
.cc-img { width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cc-name {
  font-weight: 900; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--cc) 70%, transparent), 0 1px 2px rgba(0,0,0,.6);
}
.cc-types { display: flex; gap: 6px; }
.cc-type {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; background: radial-gradient(circle at 50% 35%, #1a2434, #0a0f18);
  border: 1px solid color-mix(in srgb, var(--cc) 55%, #37475c); border-radius: 50%;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
.cc-bonus { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #b9f0a8; }
.cc-members { font-size: 11px; color: #8b97a5; }
.clan-card .btn { margin-top: 4px; width: 100%; }

/* 🏪 mercado entre jogadores */
.mk-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mk-tab {
  flex: 1; padding: 9px; border-radius: 8px; cursor: pointer; font-weight: bold;
  background: #101823; border: 1px solid #273246; color: #aeb9c6; font-size: 13px;
}
.mk-tab.on { background: linear-gradient(180deg, #24344a, #1a2636); border-color: #c9a34e; color: #ffd964; }
.mk-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mk-chip {
  padding: 5px 12px; border-radius: 14px; cursor: pointer; font-size: 12px;
  background: #101823; border: 1px solid #37475c; color: #aeb9c6;
}
.mk-chip:hover { border-color: #c9a34e; }
.mk-chip.on { background: #2b2007; border-color: #c9a34e; color: #ffd964; }
.mk-search {
  width: 100%; box-sizing: border-box; margin-bottom: 12px;
  background: #0d141d; color: #fff; border: 1px solid #37475c;
  border-radius: 8px; padding: 9px 12px;
}
.mk-list { display: flex; flex-direction: column; gap: 8px; }
.mk-empty { text-align: center; padding: 30px 10px; color: #cfd8e3; font-size: 15px; line-height: 1.8; }
.mk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, #0f1722, #0d141d);
  border: 1px solid #273246; border-radius: 12px; padding: 10px 14px;
  transition: border-color .15s, transform .05s;
}
.mk-row:hover { border-color: #37475c; }
.mk-row.mine { border-color: #3f6a3f; background: linear-gradient(180deg, #0e1a12, #0d1510); }
.mk-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mk-av {
  width: 60px; height: 60px; flex: none; border-radius: 10px;
  background: #0a0f16; border: 1px solid #273246;
  display: flex; align-items: center; justify-content: center;
}
.mk-av.shiny { border-color: #c9a34e; box-shadow: inset 0 0 14px rgba(255,217,100,.25); }
.mk-av canvas { image-rendering: pixelated; }
.mk-info { min-width: 0; }
.mk-nm { font-weight: bold; font-size: 15px; }
.mk-sub { font-size: 12px; margin: 4px 0; }
.mk-seller { font-size: 11px; color: #8b97a5; }
.mk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.mk-price { font-weight: 900; font-size: 17px; color: #ffd964; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.mk-price.diamonds { color: #7fe7ff; }
.mk-sellform { display: flex; gap: 8px; margin-bottom: 4px; }

/* 🗳️ votações */
.pl-adminbox {
  background: linear-gradient(180deg, #141b12, #0f150d);
  border: 1px solid #3f5a2f; border-radius: 12px; padding: 12px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-adm-h { font-weight: 800; font-size: 13px; color: #b7e08a; }
.pl-inp {
  background: #0d141d; color: #fff; border: 1px solid #37475c;
  border-radius: 8px; padding: 9px 11px; font: inherit; width: 100%;
}
.pl-inp:focus { outline: none; border-color: #6aa9e0; }
.pl-ta { resize: vertical; min-height: 54px; line-height: 1.4; }
.pl-empty { text-align: center; padding: 28px 10px; color: #cfd8e3; font-size: 15px; line-height: 1.8; }
.pl-card {
  background: linear-gradient(180deg, #0f1722, #0d141d);
  border: 1px solid #273246; border-left: 4px solid #4a6a9e;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.pl-card.approved { border-left-color: #4fbf6a; }
.pl-card.progress { border-left-color: #e0a94a; }
.pl-card.done     { border-left-color: #7fb0ff; opacity: .92; }
.pl-card.rejected { border-left-color: #c85454; opacity: .68; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pl-badge {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: #16233a; color: #8fb8ee; border: 1px solid #2c4468; white-space: nowrap;
}
.pl-badge.approved { background: #123020; color: #7fe0a0; border-color: #2f5a3f; }
.pl-badge.progress { background: #2e2410; color: #f0c877; border-color: #5a4a2f; }
.pl-badge.done     { background: #16233a; color: #aaccff; border-color: #2c4468; }
.pl-badge.rejected { background: #2e1616; color: #e59b9b; border-color: #5a2f2f; }
.pl-by { font-size: 11px; color: #8b97a5; }
.pl-title { font-weight: 800; font-size: 16px; margin: 2px 0; }
.pl-desc { font-size: 13px; color: #c2ccd8; line-height: 1.5; margin: 4px 0 8px; white-space: pre-wrap; word-break: break-word; }
.pl-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #0a0f16; border: 1px solid #273246; margin-top: 6px; }
.pl-bar-yes { background: linear-gradient(90deg, #3f9e5a, #56c878); }
.pl-bar-no { background: linear-gradient(90deg, #c85454, #e06a6a); }
.pl-nums { display: flex; justify-content: space-between; font-size: 12px; margin-top: 5px; }
.pl-nums .y { color: #7fd47f; font-weight: 700; }
.pl-nums .n { color: #e59b9b; font-weight: 700; }
.pl-vote { display: flex; gap: 8px; margin-top: 10px; }
.pl-vbtn {
  flex: 1; padding: 9px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700;
  border: 1px solid #37475c; background: #131c27; color: #dfe7f0; transition: .12s;
}
.pl-vbtn:hover { border-color: #5a7292; }
.pl-vbtn.yes.on { background: linear-gradient(180deg, #1f5a34, #164026); border-color: #4fbf6a; color: #cfeecf; }
.pl-vbtn.no.on { background: linear-gradient(180deg, #5a1f1f, #401616); border-color: #d06a6a; color: #f0d0d0; }
.pl-myvote { margin-top: 9px; font-size: 12px; color: #9aa6b2; font-weight: 600; }
.pl-admin { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #273246; }
.pl-sel { flex: 1; background: #0d141d; color: #fff; border: 1px solid #37475c; border-radius: 8px; padding: 7px; font: inherit; }
.pl-del { flex: none; background: #2a1414; color: #e89b9b; border: 1px solid #5a2f2f; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.pl-del:hover { background: #3a1a1a; }
.pl-del.wide { flex: 1; width: 100%; text-align: center; font-weight: 700; }
/* caixa de sugestão do jogador (azul) + opções de enquete do ADM */
.pl-suggestbox {
  background: linear-gradient(180deg, #101a26, #0d1017);
  border: 1px solid #2f4a6a; border-radius: 12px; padding: 12px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-note { font-size: 11px; color: #8b97a5; line-height: 1.4; }
.pl-opts { display: flex; flex-direction: column; gap: 6px; }
.pl-opt { font-size: 13px; }
.pl-addopt {
  align-self: flex-start; background: #16233a; color: #9cc2f0;
  border: 1px dashed #37475c; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 12px;
}
.pl-addopt:hover { border-color: #6aa9e0; }
/* enquete: opções clicáveis com barra de resultado no fundo */
.pl-enq { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pl-eopt {
  position: relative; overflow: hidden; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600;
  border: 1px solid #37475c; background: #0d141d; color: #dfe7f0; transition: .12s;
}
.pl-eopt:hover:not(.locked) { border-color: #6aa9e0; }
.pl-eopt.locked { cursor: default; }
.pl-eopt.on { border-color: #4fbf6a; }
.pl-efill {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(79,169,224,.30), rgba(79,169,224,.14));
  transition: width .25s;
}
.pl-eopt.on .pl-efill { background: linear-gradient(90deg, rgba(86,200,120,.42), rgba(86,200,120,.18)); }
.pl-etext { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-epct { position: relative; z-index: 1; flex: none; font-size: 12px; color: #cfd8e3; font-weight: 700; }
.pl-etotal { font-size: 11px; color: #8b97a5; margin-top: 6px; }

/* ✨ seletor de auras */
.aura-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.aura-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #0d141d; border: 1px solid #273246; border-radius: 10px;
  padding: 12px 8px; cursor: pointer; color: #cfd8e3; font-size: 12px;
}
.aura-opt:hover { border-color: #37475c; }
.aura-opt.on { border-color: #c9a34e; background: #14110a; color: #ffd964; }
.aura-dot {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 0 0 12px 2px rgba(255,255,255,.15);
}
.aura-dot.none {
  background: #101823; border: 1px dashed #4a5a6e; color: #6a7787;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: none;
}

/* 🔗 pokémon linkado no chat (shift+clique no Time/Box) */
.poke-link { color: #7fe7ff; cursor: pointer; text-decoration: underline; font-weight: bold; }
.poke-link:hover { color: #fff; }

/* ⚾ gerenciador em GRADE compacta — todos lado a lado, clique expande */
.bm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px; align-items: start;
}
.bm-card {
  background: #0d141d; border: 1px solid #273246; border-radius: 10px;
  overflow: hidden; transition: border-color .12s;
}
.bm-card:hover { border-color: #37475c; }
.bm-card.open { border-color: #c9a34e; }
.bm-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; }
.bm-head canvas { image-rendering: pixelated; flex: none; }
.bm-cinfo { flex: 1; min-width: 0; }
.bm-cnm { font-weight: bold; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-cmeta { font-size: 11px; color: #aeb9c6; margin-top: 2px; }
.bm-cch { color: #ffd964; font-weight: bold; }
.bm-caught { color: #7fd47f; font-weight: bold; }
.bm-card.caught { opacity: .82; }
.bm-card.caught .bm-head { background: linear-gradient(90deg, rgba(63,143,74,.10), transparent); }
.bm-caret { color: #8b97a5; font-size: 11px; flex: none; transition: transform .15s; }
.bm-card.open .bm-caret { transform: rotate(180deg); color: #ffd964; }
/* bolas escondidas até abrir */
.bm-chips { display: none; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.bm-card.open .bm-chips { display: flex; }
.bm-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  background: #101823; border: 1px solid #37475c; border-radius: 11px;
  padding: 3px 10px; color: #e6edf5;
}
.bm-chip canvas { image-rendering: pixelated; }
.cp-title { color: #ffd964; font-weight: bold; letter-spacing: .5px; }
.cp-balls { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cp-ball {
  font-size: 10px; padding: 2px 7px; border-radius: 9px; cursor: pointer;
  background: #101823; border: 1px solid #37475c; color: #aeb9c6;
}
.cp-ball.sel { border-color: #a3852f; color: #ffd964; }
.cp-list { display: flex; flex-direction: column; gap: 5px; max-height: 230px; overflow-y: auto; }
.cp-row {
  display: flex; align-items: center; gap: 8px;
  background: #0d141d; border: 1px solid #273246; border-radius: 6px; padding: 4px 8px;
}
.cp-row canvas { image-rendering: pixelated; }
.cp-row .nm { flex: 1; min-width: 0; font-size: 12px; }
.cp-row .nm .dim { font-size: 10px; display: block; }
.cp-row.shiny { border-color: #b98f1f; }

/* ------------------------------------------------ chat */
#chat { left: 12px; bottom: 12px; width: 330px; height: 190px; display: flex; flex-direction: column; }
.chat-tabs { display: flex; gap: 4px; padding: 6px 8px 0; }
.ct {
  background: #101823; border: 1px solid #273246; color: #aeb9c6;
  border-radius: 5px 5px 0 0; padding: 3px 12px; cursor: pointer; font-size: 12px;
}
.ct.active { color: #ffd964; border-color: #715c25; }
#chat-log { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 11.5px; line-height: 1.5; }
#chat-log .t { color: #5d6b7a; margin-right: 4px; }
#chat-log .m-catch { color: #7fd47f; }
#chat-log .m-shiny { color: #ffd964; }
#chat-log .m-level { color: #6fc3ff; }
#chat-log .m-evolve { color: #d99cff; }
#chat-log .m-rare { color: #ffb066; }
#chat-log .m-flee { color: #ff8f8f; }
#chat-log .m-zone { color: #9ad0c2; }
#chat-log .m-chat { color: #e8eef4; }
#chat-log .m-chat .cn { color: #6fc3ff; font-weight: bold; }
.chat-input { display: flex; gap: 6px; padding: 6px 8px; border-top: 1px solid #273246; }
.chat-input input {
  flex: 1; background: #0d141d; color: #fff;
  border: 1px solid #37475c; border-radius: 5px; padding: 5px 9px; outline: none; font-size: 12px;
}
.chat-input input:focus { border-color: #a3852f; }

/* banner do World Boss */
#boss-banner {
  top: 56px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-width: 380px;
  border-color: #8a2f2f;
}
#boss-face { image-rendering: pixelated; }
.bb-info { flex: 1; min-width: 0; }
.bb-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#boss-name { color: #ff9d9d; font-weight: bold; letter-spacing: .5px; }
.bb-bar > div { background: linear-gradient(#e05252, #8a2f2f) !important; }

/* tarefas */
.task-row { background: #0d141d; border: 1px solid #273246; border-radius: 7px; padding: 10px 12px; margin-bottom: 8px; }
.task-row .bar { margin-top: 6px; }
.task-row .bar > div { background: linear-gradient(#6fc3ff, #2f6d9d); }
.task-row.done { border-color: #3f7d46; }

/* ------------------------------------------------ modais */
#modal-bg {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
}
#modal { width: min(760px, 92vw); max-height: 84vh; display: flex; flex-direction: column; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #273246;
  color: #ffd964; font-weight: bold; letter-spacing: .5px;
}
#modal-close { background: none; border: none; color: #8b97a5; font-size: 15px; cursor: pointer; }
#modal-body { overflow-y: auto; padding: 14px 16px; }

/* pokédex */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dex-cell {
  background: #0d141d; border: 1px solid #273246; border-radius: 7px;
  text-align: center; padding: 8px 4px; font-size: 10.5px; color: #8b97a5;
}
.dex-cell canvas { image-rendering: pixelated; filter: grayscale(1) brightness(.45); }
.dex-cell.caught { border-color: #3f7d46; color: #dfe6ee; }
.dex-cell.caught canvas { filter: none; }
.dex-cell.seen canvas { filter: grayscale(1) brightness(.8); }
.dex-cell .no { color: #5d6b7a; display: block; }

/* zonas */
.zone-row {
  display: flex; align-items: center; gap: 10px;
  background: #0d141d; border: 1px solid #273246; border-radius: 7px;
  padding: 8px 12px; margin-bottom: 7px;
}
.zone-row.locked { opacity: .45; }
.zone-row.current { border-color: #a3852f; }
.zone-row .zr-info { flex: 1; }
.zone-row .zr-poke { font-size: 11px; color: #8b97a5; }

/* time / loja / perfil */
.poke-row {
  display: flex; align-items: center; gap: 10px;
  background: #0d141d; border: 1px solid #273246; border-radius: 7px;
  padding: 6px 12px; margin-bottom: 6px;
}
.poke-row canvas { image-rendering: pixelated; }
.poke-row .pr-nm { flex: 1; }
.poke-row.active-poke { border-color: #3f7d46; }
.poke-row.shiny { border-color: #b98f1f; }
/* 🛒 hero da loja do Mark: avatar + saldo em gold sempre à vista */
.shop-hero {
  display: flex; gap: 12px; align-items: center; margin-bottom: 12px;
  background: linear-gradient(120deg, #1a1408, #2b2007 60%, #1a1408);
  border: 1px solid #7a5a10; border-radius: 10px; padding: 12px 14px;
}
.sh-av {
  width: 54px; height: 54px; border-radius: 50%; flex: none; overflow: hidden;
  background: #101823; border: 1px solid #37475c;
  display: flex; align-items: center; justify-content: center;
}
.sh-av canvas { image-rendering: pixelated; }
.sh-t { font-weight: bold; color: #f3e7c8; }
.sh-bal { font-size: 22px; font-weight: 900; color: #ffd964; display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.sh-bal .sh-ic { display: inline-flex; }
.sh-sub { color: #8b97a5; font-size: 11px; }

.shop-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: #101823; border: 1px solid #1c2836; border-radius: 8px;
  margin-bottom: 6px; transition: border-color .15s;
}
.shop-row:hover { border-color: #31465f; }
.shop-row .sr-nm { flex: 1; }
.shop-row .sr-ic { width: 30px; display: flex; justify-content: center; }
.shop-h {
  margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #24344a;
  color: #ffd964; font-weight: bold; font-size: 13px; letter-spacing: .4px;
}
.shop-h:first-child { margin-top: 0; }
.tag.dia { background: #1c2c44; color: #8fd0ff; border-color: #2c4a6e; }

/* 💎 Loja de Diamantes */
.dia-hero {
  display: flex; gap: 14px; align-items: center; margin-bottom: 14px;
  background: linear-gradient(135deg, #16273f 0%, #0e1826 60%, #101a2b 100%);
  border: 1px solid #2c4a6e; border-radius: 14px; padding: 14px 16px;
  box-shadow: inset 0 0 30px rgba(77,143,224,.08);
}
.dia-hero .dh-gem {
  background: #0b121d; border: 2px solid #4d8fe0; border-radius: 12px; padding: 6px;
  box-shadow: 0 0 14px rgba(77,143,224,.35);
}
.dia-hero .dh-gem canvas { image-rendering: pixelated; display: block; }
.dia-hero .dh-t { font-size: 13px; color: #8aa6c4; letter-spacing: .5px; text-transform: uppercase; }
.dia-hero .dh-bal { font-size: 28px; font-weight: bold; color: #9fd4ff; line-height: 1.1; text-shadow: 0 2px 8px rgba(77,143,224,.4); }
.dia-hero .dh-bal span { font-size: 20px; }
.dia-hero .dh-sub { font-size: 11.5px; color: #7c8a99; margin-top: 4px; }
.sh-sub { font-size: 11px; color: #7c8a99; font-weight: normal; letter-spacing: 0; }
.gem-price { color: #8fd0ff; font-weight: bold; white-space: nowrap; }

.dia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.dia-card {
  position: relative; background: #101823; border: 1px solid #1c2836; border-radius: 12px;
  padding: 12px 8px 10px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 3px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dia-card:hover { border-color: #2c4a6e; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dia-card.master { border-color: #6e57b0; }
.dia-card.master:hover { box-shadow: 0 0 16px rgba(147,112,219,.35); }
.dia-card.legendary { border-color: #c9a34e; background: linear-gradient(#141019, #101823); }
.dia-card.legendary:hover { box-shadow: 0 0 16px rgba(201,163,78,.35); }
.dia-card .dc-ic { height: 40px; display: flex; align-items: center; justify-content: center; }
.dia-card .dc-ic canvas { image-rendering: pixelated; }
.dia-card .dc-nm { font-weight: bold; color: #eaf0f6; font-size: 12.5px; }
.dia-card .dc-sub { font-size: 10.5px; color: #7c8a99; }
.dia-card .dc-price { font-size: 14px; margin-top: 2px; }
.dia-card .dc-have { font-size: 10px; color: #6a7889; margin-bottom: 6px; }
.dia-card .dc-buy { display: flex; gap: 5px; margin-top: auto; }
.dia-card .dc-buy .btn { flex: 1; }

/* 📢 broadcast do ADM na TELA (todo mundo vê) */
#broadcast-banner {
  position: fixed; top: 120px; left: 50%; transform: translateX(-50%) scale(.9);
  max-width: 76vw; z-index: 200; pointer-events: none;
  background: linear-gradient(135deg, rgba(58,32,4,.95), rgba(30,16,2,.95));
  border: 2px solid #ff9a3c; border-radius: 10px;
  padding: 14px 26px; text-align: center;
  color: #ffb46b; font-size: 20px; font-weight: bold; letter-spacing: .5px;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
  box-shadow: 0 6px 30px rgba(255,154,60,.35);
  opacity: 0; transition: opacity .3s, transform .3s;
}
#broadcast-banner.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* talkactions: ADM fala laranja, broadcast destacado */
.cn.adm { color: #ff9a3c; font-weight: bold; }
.cn.tutor { color: #7fd0ff; font-weight: bold; }
.adm-txt { color: #ffb46b; }
.m-broadcast { color: #ff9a3c; font-weight: bold; }

/* escolha do pokémon inicial (criar conta) */
.starter-row { display: flex; gap: 8px; }
.starter-card {
  flex: 1; background: #101823; border: 2px solid #1c2836; border-radius: 10px;
  padding: 8px 4px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .15s, transform .15s;
}
.starter-card:hover { border-color: #31465f; transform: translateY(-2px); }
.starter-card.sel { border-color: #c9a34e; box-shadow: 0 0 10px rgba(201,163,78,.35); }
.starter-card canvas { image-rendering: pixelated; }
.starter-card span { font-size: 12px; color: #c9d3dd; }

/* doação com valor livre */
.donate-card {
  background: linear-gradient(135deg, #131f31, #101823); border: 1px solid #2c4a6e;
  border-radius: 12px; padding: 14px;
}
.donate-card .dn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.donate-card .dn-title { font-weight: bold; color: #eaf0f6; font-size: 14px; }
.donate-card .dn-rate { background: #1c2c44; color: #8fd0ff; border: 1px solid #2c4a6e; border-radius: 8px; padding: 2px 9px; font-size: 12px; font-weight: bold; }
.donate-card .dn-warn { padding: 8px 10px; border: 1px dashed #8a6d3b; border-radius: 8px; margin-bottom: 10px; color: #d8b878; font-size: 12px; }
.donate-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.donate-presets .btn { flex: 1; min-width: 56px; }
.donate-presets .btn.sel { border-color: #4d8fe0; color: #cfe6ff; box-shadow: 0 0 8px rgba(77,143,224,.3); }
.donate-row { display: flex; align-items: center; gap: 8px; }
.donate-row span { color: #9fb2c5; }
.donate-row input {
  flex: 1; background: #0b111a; color: #e8eef4; border: 1px solid #2a3d55;
  border-radius: 6px; padding: 8px 10px; font-size: 15px;
}
.donate-conv { color: #8fd0ff; font-size: 15px; font-weight: bold; white-space: nowrap; }

/* outfits */
.outfit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.outfit-card {
  position: relative; background: #101823; border: 1px solid #1c2836; border-radius: 10px;
  padding: 8px 6px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 5px; transition: border-color .15s, transform .15s;
}
.outfit-card:hover { border-color: #31465f; transform: translateY(-2px); }
.outfit-card.cur { border-color: #3f7d46; box-shadow: 0 0 8px rgba(63,125,70,.35); }
.outfit-card.owned { border-color: #24405e; }
.outfit-card canvas { image-rendering: pixelated; }
.outfit-card .oc-nm { font-size: 11.5px; color: #c9d3dd; }
.outfit-card .oc-badge { position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: bold; padding: 1px 6px; border-radius: 7px; }
.outfit-card .oc-badge.cur { background: #16341c; color: #7fe08a; border: 1px solid #3f7d46; }
.outfit-card .oc-badge.own { background: #0e2436; color: #7fd0ff; border: 1px solid #24405e; padding: 1px 5px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.profile-grid div { padding: 5px 0; border-bottom: 1px solid #17202c; }
.profile-grid span { float: right; color: #ffd964; }
.rank-row { display: flex; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #17202c; }
.rank-row .pos { width: 34px; color: #ffd964; }
.rank-row .nm { flex: 1; }

/* diálogo de NPC */
#npc-box {
  bottom: 230px; left: 50%; transform: translateX(-50%);
  width: 340px; padding: 14px 16px; z-index: 30; text-align: center;
}
.npc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#npc-face { image-rendering: pixelated; }
#npc-name { flex: 1; color: #ffd964; font-weight: bold; font-size: 15px; letter-spacing: .5px; text-align: left; }
#npc-close { background: none; border: none; color: #8b97a5; cursor: pointer; font-size: 14px; }
#npc-text { font-size: 12.5px; line-height: 1.5; color: #c9d3dd; margin-bottom: 10px; text-align: left; }
#npc-actions { display: flex; justify-content: center; gap: 8px; }
#npc-actions .btn { padding: 7px 20px; }

/* modal de desmaio */
#faint-box {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 4, 8, .55);
  display: flex; align-items: center; justify-content: center;
}
.fb-panel {
  width: 350px; padding: 22px 26px; text-align: center;
  border-color: #8a2f3f;
}
.fb-skull { font-size: 34px; margin-bottom: 6px; }
#faint-title { color: #ff7a8a; font-weight: bold; letter-spacing: 1px; font-size: 15px; margin-bottom: 8px; }
.fb-text { font-size: 12px; color: #c9d3dd; line-height: 1.5; margin-bottom: 12px; }
#faint-count { color: #ffd964; font-size: 26px; font-weight: bold; }
.fb-green {
  width: 100%; margin-bottom: 8px; padding: 10px;
  background: #1d4d26 !important; border-color: #3f9d4c !important; color: #b6f0be !important;
  font-weight: bold;
}
.fb-green:disabled { opacity: .45; }
.fb-city { width: 100%; padding: 9px; }

/* card de equipe */
.eq-slots { display: flex; gap: 8px; margin-bottom: 14px; }
.eq-slot {
  width: 64px; height: 64px; border-radius: 8px; cursor: pointer;
  background: #0d141d; border: 2px solid #273246;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.eq-slot.sel { border-color: #c9a34e; }
.eq-slot.empty { border-style: dashed; opacity: .5; cursor: default; }
.eq-slot .lv { position: absolute; bottom: 2px; right: 4px; font-size: 9px; color: #ffd964; }
.eq-card { background: #0d141d; border: 1px solid #273246; border-radius: 10px; padding: 14px; }
.eq-head { display: flex; gap: 14px; align-items: center; }
.eq-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.badge { font-size: 10px; padding: 2px 9px; border-radius: 9px; font-weight: bold; }
.badge.tipo { background: #274156; color: #9fd0ff; }
.badge.poder { background: #2e2410; color: #ffd964; }
.badge.r-comum { background: #2a3240; color: #aeb9c6; }
.badge.r-boa { background: #1d3d26; color: #8fe89f; }
.badge.r-rara { background: #3d1d3d; color: #f09fe8; }
.badge.r-epica { background: #4d2e10; color: #ffb066; }
.badge.r-lendaria { background: #4d3d10; color: #ffe066; }
.eq-stats { margin-top: 12px; display: grid; grid-template-columns: 34px 1fr 40px; gap: 4px 8px; align-items: center; font-size: 11px; }
.eq-stats .bar { height: 7px; }
.eq-stats .bar > div { background: linear-gradient(#8fe89f, #3f9d4c); }
.eq-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.eq-actions .btn { flex: 1; min-width: 120px; }

/* inventário em grade */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 52px); gap: 7px; }
.inv-slot {
  width: 52px; height: 52px; border-radius: 8px; position: relative;
  background: #0d141d; border: 1px solid #273246;
  display: flex; align-items: center; justify-content: center;
}
.inv-slot.poke { border-color: #c9a34e; }
.inv-slot .qt {
  position: absolute; bottom: 1px; right: 3px;
  font-size: 10px; font-weight: bold; color: #ffd964;
  text-shadow: 0 1px 2px #000;
}

/* quests por cidade */
.q-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.q-tab {
  background: #101823; border: 1px solid #273246; color: #aeb9c6;
  border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 12px;
}
.q-tab.sel { border-color: #a3852f; color: #ffd964; }
.q-card { background: #0d141d; border: 1px solid #273246; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.q-card.done { opacity: .55; }
.q-card .q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.q-card .q-npc { color: #ffd964; font-weight: bold; }
.q-card .q-rw { font-size: 11px; color: #9fd0ff; }
.q-target { display: flex; justify-content: space-between; font-size: 11.5px; margin: 3px 0 2px; }
.q-target .qt-n { color: #7fd47f; }
.q-card .bar { height: 6px; margin-bottom: 4px; }
.q-card .bar > div { background: linear-gradient(#6fc3ff, #2f6d9d); }

/* toast */
#toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  background: #2e1212; border: 1px solid #a33; color: #ffb3b3;
  border-radius: 6px; padding: 8px 18px; z-index: 200; font-size: 13px;
}
#toast.ok { background: #12241a; border-color: #3f7d46; color: #a8e6b2; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #273246; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================ CELULAR */
/* aviso "gire o celular": aparece em RETRATO em telas de toque */
#rotate-hint {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: #0b111a; color: #e8eef4;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
}
#rotate-hint .rh-icon { font-size: 64px; animation: rh-spin 2s ease-in-out infinite; }
#rotate-hint .rh-title { font-size: 22px; font-weight: bold; color: #ffd964; }
#rotate-hint .rh-sub { font-size: 14px; color: #8b97a5; }
@keyframes rh-spin {
  0%, 60%, 100% { transform: rotate(0); }
  25%, 40% { transform: rotate(90deg); }
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint { display: flex; }
}

/* botões flutuantes do celular (abrem auto/captura/chat) */
#mob-fabs { display: none; position: fixed; right: 10px; bottom: 12px; flex-direction: column; gap: 10px; z-index: 55; }
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  background: #131b28; border: 1px solid #2a3d55; color: #e8eef4;
  font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.fab:active { transform: scale(.92); }
body.show-auto .fab[data-show="auto"],
body.show-cap .fab[data-show="cap"],
body.show-chat .fab[data-show="chat"] { border-color: #c9a34e; color: #ffd964; }

/* layout compacto: telas estreitas OU qualquer tela de toque */
@media (max-width: 980px), (pointer: coarse) {
  #mob-fabs { display: flex; }
  /* painéis grandes começam ESCONDIDOS — abrem pelos botões flutuantes */
  #auto-panel, #capture-panel, #chat { display: none; }
  body.show-auto #auto-panel { display: block; top: 60px; right: 66px; z-index: 60; }
  body.show-cap #capture-panel { display: block; right: 66px; bottom: 12px; z-index: 60; max-height: 60vh; }
  body.show-chat #chat { display: flex; left: 8px; bottom: 12px; width: min(330px, 55vw); height: min(190px, 45vh); z-index: 60; }
  /* painel do jogador compacto */
  #player-panel { transform: scale(.82); transform-origin: top left; top: 6px; left: 6px; }
  /* menu no topo à DIREITA (não briga com o painel do jogador) */
  #topbar { left: auto; right: 8px; top: 6px; transform: none; }
  .tb { width: 44px; height: 44px; font-size: 20px; }
  .tb.ic img { width: 30px; height: 30px; }
  #zone-label { top: 56px; font-size: 10px; max-width: 60vw; left: 8px; transform: none; }
  #coords { bottom: 4px; font-size: 10px; padding: 2px 8px; }
  #boss-banner { top: 56px; transform: scale(.85); transform-origin: top center; }
  #broadcast-banner { top: 64px; font-size: 15px; padding: 10px 16px; max-width: 88vw; }
  /* botões maiores pra dedo */
  .btn { min-height: 36px; }
  .btn.tiny { min-height: 30px; }
  #modal { width: min(760px, 96vw); max-height: 90vh; }
  #modal-body { padding: 10px; }
  .login-box { width: min(92vw, 360px); padding: 20px; }
  #npc-box { width: min(340px, 90vw); bottom: 80px; }
  .eq-slots { flex-wrap: wrap; }
}

/* ============================================ Rankings */
.rank-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.rank-tab { flex: 1; background: #101823; border: 1px solid #26344a; color: #aeb9c6;
  border-radius: 7px; padding: 8px; cursor: pointer; font-size: 12px; font-weight: bold; }
.rank-tab.sel { background: #2e2410; border-color: #a3852f; color: #ffd964; }
.rank-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.rh-chip { display: flex; gap: 8px; align-items: center; background: #0e1622;
  border: 1px solid #1e2c3e; border-radius: 8px; padding: 7px 10px; }
.rh-ic { font-size: 18px; }
.rh-t { font-size: 9px; color: #7c8a99; letter-spacing: .5px; }
.rh-v { font-size: 12px; color: #cfe0f2; font-weight: bold; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.pod-slot { display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(#16233a, #0e1826); border: 1px solid #2c4a6e;
  border-radius: 10px; padding: 10px 12px; }
.pod-slot canvas { image-rendering: pixelated; }
.pod-1 { border-color: #c9a34e; box-shadow: 0 0 14px rgba(201,163,78,.35); padding-bottom: 18px; }
.pod-2 { margin-bottom: 6px; }
.pod-3 { margin-bottom: 6px; }
.pod-medal { font-size: 22px; }
.pod-nm { text-align: center; font-size: 12px; }
.pod-nm .dim { display: block; font-size: 10px; }
.rank-row canvas { image-rendering: pixelated; }

/* ============================================ Daily Gift */
.daily-head { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg,#2a2004,#161002);
  border: 1px solid #6b5a1f; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.daily-head .dc-gem { font-size: 30px; }
.daily-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.daily-cell { background: #101823; border: 1px solid #1e2c3e; border-radius: 8px;
  padding: 7px 3px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.daily-cell .dn { font-size: 10px; color: #8b97a5; }
.daily-cell .di { font-size: 18px; }
.daily-cell .dl { font-size: 9px; color: #aeb9c6; line-height: 1.1; }
.daily-cell.claimed { opacity: .5; }
.daily-cell.today { border-color: #ffd964; box-shadow: 0 0 10px rgba(255,217,100,.4); background: #1c1708; }
.daily-cell.vip { border-color: #7a5cff; }
.daily-cell .vip-tag { font-size: 8px; color: #b49bff; background: #241a44; padding: 0 3px; border-radius: 3px; }

/* ============================================ Amigos */
.friend-row { display: flex; align-items: center; gap: 10px; background: #0d141d;
  border: 1px solid #1e2c3e; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.friend-row canvas { image-rendering: pixelated; }
.friend-row .fr-nm { flex: 1; }
.fr-status { font-size: 11px; }
.fr-status.on { color: #6fd47f; }
.fr-status.off { color: #6a7787; }

/* ============================================ Pokédex detalhe */
.dexmon-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.dexmon-spr { position: relative; background: #0d141d; border: 2px solid #37475c;
  border-radius: 12px; padding: 6px; }
.dexmon-spr.caught { border-color: #c9a34e; }
.dexmon-spr canvas { image-rendering: pixelated; }
.dexmon-spr .dm-chk { position: absolute; top: -8px; right: -8px; background: #2f9d43;
  color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex;
  align-items: center; justify-content: center; font-weight: bold; border: 2px solid #0d141d; }
.dm-no { color: #7c8a99; font-size: 13px; font-weight: bold; }
.dm-name { font-size: 24px; font-weight: bold; color: #fff; letter-spacing: .5px; }
.dm-type { display: inline-block; color: #fff; font-size: 10px; font-weight: bold;
  padding: 2px 10px; border-radius: 10px; letter-spacing: .5px; }
.dm-prog { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px; }
.dexmon-stats { display: grid; grid-template-columns: 40px 1fr 40px; gap: 6px 10px; align-items: center; }

/* ícones reais de moeda no painel do jogador */
.cash-ic { image-rendering: pixelated; vertical-align: middle; }
.daily-cell .di canvas, .daily-cell .di img { image-rendering: pixelated; }

/* ============================================ Perfil */
.prof-hero { display: flex; gap: 14px; align-items: center;
  background: linear-gradient(135deg, #16233a, #0e1826); border: 1px solid #2c4a6e;
  border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.prof-av { background: #0d141d; border: 2px solid #c9a34e; border-radius: 12px; padding: 4px; }
.prof-av canvas { image-rendering: pixelated; }
.prof-name { font-size: 20px; font-weight: bold; color: #fff; letter-spacing: .3px; }
.prof-lv { color: #aeb9c6; font-size: 13px; margin-top: 2px; }
.prof-badge { font-size: 10px; font-weight: bold; padding: 1px 7px; border-radius: 8px; vertical-align: middle; }
.prof-badge.adm { background: #4a2c08; color: #ff9a3c; border: 1px solid #ff9a3c; }
.prof-badge.tutor { background: #0e2a3a; color: #7fd0ff; border: 1px solid #7fd0ff; }
.prof-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.prof-tile { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 10px;
  padding: 10px 4px; text-align: center; }
.prof-tile .pt-ic { height: 24px; display: flex; align-items: center; justify-content: center; }
.prof-tile .pt-ic canvas { image-rendering: pixelated; }
.prof-tile .pt-v { font-weight: bold; color: #ffd964; font-size: 15px; margin-top: 3px; }
.prof-tile .pt-l { font-size: 10px; color: #7c8a99; }
.prof-dex { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 10px; padding: 12px; margin-bottom: 6px; }
.prof-best { display: flex; align-items: center; gap: 12px; background: #101823;
  border: 1px solid #2c4a6e; border-radius: 10px; padding: 10px; }
.prof-best canvas { image-rendering: pixelated; }
.prof-team { display: flex; gap: 6px; }
.prof-slot { flex: 1; background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 6px 2px; text-align: center; position: relative; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.prof-slot.empty { opacity: .3; }
.prof-slot canvas { image-rendering: pixelated; }
.prof-slot .ps-lv { font-size: 9px; color: #8b97a5; }

/* ============================================ Troca (Trade) */
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-side { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 10px; padding: 10px; }
.trade-side.confirmed { border-color: #3f7d46; box-shadow: 0 0 10px rgba(63,125,70,.3); }
.ts-head { font-weight: bold; color: #ffd964; margin-bottom: 8px; font-size: 13px; }
.ts-ok { color: #6fd47f; font-size: 11px; }
.ts-gold { margin-top: 8px; color: #ffd964; font-size: 13px; }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 5px; min-height: 50px; }
.trade-cell { background: #0d141d; border: 1px solid #273246; border-radius: 7px; padding: 3px; text-align: center; position: relative; }
.trade-cell.shiny { border-color: #b98f1f; }
.trade-cell canvas { image-rendering: pixelated; }
.trade-cell .tc-lv { display: block; font-size: 9px; color: #8b97a5; }

/* ============================================ Painel Admin */
.admin-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.as-tile { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 8px; padding: 8px; text-align: center; }
.as-tile b { display: block; color: #ffd964; font-size: 16px; }
.as-tile span { font-size: 10px; color: #7c8a99; }
.admin-row { display: flex; align-items: center; gap: 8px; background: #0d141d;
  border: 1px solid #1e2c3e; border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; }
.admin-row.banned { border-color: #6a2020; background: #170d0d; }
.admin-row .ar-info { flex: 1; min-width: 0; }
.admin-row .ar-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-row .ar-acts .btn { padding: 3px 7px; }