:root {
  --bg: #0b0c12; --panel: rgba(14, 16, 26, .93); --panel2: #1b1f30; --line: #2f3550; --gold: #c9a13b;
  --text: #eceef6; --dim: #9aa1bd; --accent: #ffcb05; --good: #3ddc84; --bad: #f87171; --blue: #3b6cf0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font: 13px/1.35 system-ui, "Segoe UI", Roboto, sans-serif; }
button, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#hud { position: fixed; inset: 0; pointer-events: none; display: none; }
body.playing #hud { display: block; }
#hud > * { pointer-events: auto; }

.box { background: var(--panel); border: 1px solid var(--gold); border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .55); }
.cap { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); }
.g { color: var(--good); } .y { color: var(--accent); } .r { color: var(--bad); }
.big { font-size: 15px; font-weight: 800; }
.sub { font-size: 11.5px; color: var(--dim); }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }

/* topo */
#zonePill { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); padding: 6px 16px; cursor: pointer; text-align: center; white-space: nowrap; }
#zonePill b { display: block; font-size: 14px; }
#zonePill span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
#zonePill:hover { border-color: var(--accent); }
#banner { position: absolute; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 8px; background: rgba(0, 0, 0, .55); font-size: 17px; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none !important; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }

#sess { position: absolute; left: 12px; top: 96px; padding: 8px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
#killbox { position: absolute; right: 12px; top: 12px; padding: 10px 14px; min-width: 190px; font-variant-numeric: tabular-nums; }
#killbox .cap { color: var(--text); font-size: 12px; margin-bottom: 4px; }
.drops { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.drop { display: inline-flex; align-items: center; background: var(--panel2); border-radius: 6px; padding: 0 6px 0 2px; font-size: 11px; }
.drop img { width: 22px; height: 22px; image-rendering: pixelated; }

/* moves */
#movesBox { position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px 8px; max-width: calc(50vw - 416px); min-width: 200px; }
#movesBox .cap { text-align: center; margin-bottom: 6px; }
#moves { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: none; }
.mv { position: relative; width: 52px; height: 52px; box-sizing: border-box; border-radius: 10px; background: #05060a; border: 2px solid var(--c); box-shadow: 0 0 7px -1px var(--c), inset 0 0 0 1px rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; flex: none; }
.mv img { width: 40px; height: 40px; max-width: calc(100% - 8px); max-height: calc(100% - 8px); object-fit: contain; image-rendering: pixelated; display: block; }
.mv .mv-fallback { display: none; font-size: 10px; font-weight: 700; line-height: 1.05; padding: 0 2px; color: var(--c); filter: brightness(1.35); }
.mv i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(4, 6, 12, .78); }
.mv u { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; text-decoration: none; text-shadow: 0 0 4px #000, 0 1px 2px #000; }
.mv[data-eff]::after { position: absolute; top: 3px; right: 3px; min-width: 13px; height: 13px; padding: 1px 2px; border-radius: 4px; background: rgba(0,0,0,.72); font-size: 9px; font-weight: 800; line-height: 11px; text-align: center; text-shadow: 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
.mv[data-eff="sup"]::after { content: '▲'; color: #ffe14d; }
.mv[data-eff="weak"]::after { content: '▼'; color: #9aa3b2; }
.mv[data-eff="imm"]::after { content: '✕'; color: #ef4444; }
.mv[data-eff="imm"] img { filter: grayscale(1) brightness(.55); }
.mv.cd { box-shadow: none; border-color: color-mix(in srgb, var(--c) 45%, #000); }
.mv.cd img { filter: saturate(.35) brightness(.7); }

/* painel inferior */
#bottom { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(800px, 100vw); border-radius: 16px 16px 0 0; border-bottom: 0; padding: 10px 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
.brow { display: flex; gap: 14px; align-items: center; }
.me { flex: 1; min-width: 0; }
.lv { font-size: 19px; font-weight: 800; }
.xp { position: relative; margin: 3px 0 5px; }
.xp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
.gold { display: flex; align-items: center; gap: 6px; font-size: 15px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.gold > b { color: #f2d377; margin-right: 6px; }
.coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3a0, #e0a800); flex: none; }
#catchBar { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ball { display: inline-flex; align-items: center; padding: 0 7px 0 1px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); cursor: pointer; font-size: 12px; }
.ball.on { border-color: var(--accent); background: #3a3520; }
.ball img { width: 22px; height: 22px; image-rendering: pixelated; }

.bar { height: 8px; background: #05060a; border-radius: 5px; overflow: hidden; border: 1px solid #000; }
.bar i { display: block; height: 100%; width: 0; transition: width .15s linear; }
.bar.exp { height: 14px; border-radius: 7px; }
.bar.exp i { background: linear-gradient(180deg, #ffd84a, #e0a800); border-radius: 7px; }
.bar.hp i { background: var(--good); }
.bar.hp i.mid { background: #facc15; }
.bar.hp i.low { background: var(--bad); }

#slots { display: flex; gap: 5px; flex: none; }
.slot { position: relative; width: 46px; height: 54px; border-radius: 9px; border: 2px solid #7a2b3a; background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2px 3px; cursor: pointer; }
.slot em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9px; font-weight: 800; background: #05060a; border-radius: 6px; padding: 0 4px; color: var(--accent); white-space: nowrap; }
.slot .bar { width: 100%; height: 5px; margin-top: 2px; }
.slot.on { border-color: var(--accent); box-shadow: 0 0 8px rgba(255, 203, 5, .45); }
.slot.ko .pi { filter: grayscale(1) brightness(.5); }
.slot.empty { border-style: dashed; border-color: var(--line); cursor: default; }

#tabs { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
#tabs button { position: relative; width: 62px; padding: 8px 0 5px; background: linear-gradient(180deg, #23283d, #171a29); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .12s, border-color .12s, color .12s; }
#tabs button svg { width: 24px; height: 24px; color: #dfe3f5; }
#tabs button:hover { border-color: var(--gold); color: var(--text); transform: translateY(-2px); }
#tabs button.on { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(255, 203, 5, .3); }
#tabs button.on svg { color: var(--accent); }
#tabs button.main { width: 76px; background: linear-gradient(180deg, #b8902c, #6b5013); border-color: #ffd95a; color: #fff; transform: translateY(-8px); padding: 11px 0 8px; box-shadow: 0 4px 14px rgba(201, 161, 59, .45); }
#tabs button.main svg { width: 28px; height: 28px; color: #fff; }
#tabs button.main:hover { transform: translateY(-10px); }
#tabs button.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ef4444; border: 2px solid #12141f; }

#centerMsg { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); background: rgba(120, 20, 40, .9); border: 1px solid #f87171; border-radius: 14px; padding: 14px 26px; text-align: center; font-size: 18px; font-weight: 700; }
#centerMsg small { display: block; font-weight: 400; font-size: 13px; }

/* janelas */
#win { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 12px 12px 150px; pointer-events: none; }
.winbox { pointer-events: auto; width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; background: #12141f; }
.winbox header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
#panel { overflow-y: auto; padding: 12px; min-height: 0; }
h3 { margin: 4px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); display: flex; justify-content: space-between; align-items: center; }
.hint { color: var(--dim); font-size: 12px; margin: -2px 0 8px; }

.card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.card.active { border-color: var(--accent); }
.card.off { opacity: .55; }
.title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { display: inline-block; font-size: 10px; padding: 0 6px; border-radius: 8px; color: #111; font-weight: 700; text-transform: uppercase; vertical-align: 1px; }
.tag.note { background: var(--accent); }
.stars { font-size: 11px; letter-spacing: -1px; color: #8f96b3; }
.stars.q2 { color: #7ddc8a; } .stars.q3 { color: #6fb6ff; } .stars.q4 { color: #c58bff; } .stars.q5 { color: var(--accent); text-shadow: 0 0 6px rgba(255, 203, 5, .7); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.week > div { background: #12141f; border: 1px solid var(--line); border-radius: 8px; padding: 5px 2px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week b { font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; }
.week .on { border-color: var(--accent); box-shadow: 0 0 8px rgba(255, 203, 5, .35); }
.week .done { border-color: var(--good); opacity: .7; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.btn { border: 1px solid var(--line); background: #262b40; border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #56608a; }
.btn.pri { background: var(--blue); border-color: var(--blue); font-weight: 600; }
.btn.warn { background: #7f1d1d; border-color: #b91c1c; }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.acts .btn.pri { white-space: normal; text-align: left; }
.btn[disabled] { opacity: .45; cursor: default; }

.pi { width: 32px; height: 32px; image-rendering: pixelated; flex: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.pi.s24 { width: 24px; height: 24px; }
img.pi { border-radius: 6px; }
.icons { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.icons .pi.un { filter: grayscale(1) brightness(.45); }

.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.dex .cell { aspect-ratio: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dex .cell.c { border-color: var(--good); }
.dex .cell.s .pi { filter: grayscale(1) brightness(.5); }
.dex .cell.u { color: var(--dim); }

.item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.grid4 > div { background: #12141f; border-radius: 8px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.grid4 img { width: 28px; height: 28px; image-rendering: pixelated; }
.grid4 b { font-size: 14px; }
.hint a, .sub a { color: var(--accent); cursor: pointer; text-decoration: underline; }
.dex .cell[data-act] { cursor: pointer; }
.dex .cell[data-act]:hover { border-color: var(--accent); }
textarea { width: 100%; height: 70px; font: 11px monospace; resize: vertical; background: #0d0f17; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
label.opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

#overlay { position: fixed; inset: 0; background: rgba(5, 6, 10, .86); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal { padding: 20px; width: 100%; max-width: 460px; text-align: center; background: #12141f; }
.modal h2 { margin: 0 0 6px; font-size: 22px; color: var(--accent); }
.modal p { color: var(--dim); margin: 0 0 14px; }
.starters { display: flex; gap: 8px; }
.starter { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.starter:hover { border-color: var(--accent); }
.holder { height: 90px; display: flex; align-items: flex-end; justify-content: center; }
.spr { image-rendering: pixelated; background-repeat: no-repeat; flex: none; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; text-align: left; }
.stats div { background: var(--panel2); border-radius: 8px; padding: 8px 10px; }
.stats b { display: block; font-size: 17px; }

#toast { position: fixed; left: 50%; bottom: calc(var(--bh, 160px) + 14px); transform: translateX(-50%); background: #000; border: 1px solid var(--gold); padding: 8px 14px; border-radius: 20px; z-index: 20; font-size: 13px; white-space: nowrap; }

/* telas estreitas: moves sobem para cima do painel e as caixas encolhem */
@media (max-width: 1240px) {
  #movesBox { max-width: calc(100vw - 24px); bottom: calc(var(--bh, 168px) + 8px); padding: 5px 8px 6px; display: flex; align-items: center; gap: 8px; }
  #movesBox .cap { margin: 0; }
  #moves { max-width: none; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: 2px; }
  .mv { flex: none; }
}
@media (max-width: 700px) {
  .brow { flex-direction: column; align-items: stretch; gap: 12px; }
  #slots { justify-content: space-between; }
  .slot { flex: 1; max-width: 54px; }
  #tabs { gap: 3px; }
  #tabs button { flex: 1; width: auto; min-width: 0; font-size: 7.5px; letter-spacing: 0; padding-left: 0; padding-right: 0; }
  #tabs button svg { width: 20px; height: 20px; }
  .week { grid-template-columns: repeat(4, 1fr); }
  #tabs button.main { width: auto; }
  #movesBox { left: 6px; min-width: 0; max-width: calc(100vw - 12px); }
  .mv { width: 36px; height: 36px; }
  #sess { left: 6px; top: 62px; padding: 5px 8px; font-size: 11px; }
  #killbox { right: 6px; top: 62px; padding: 6px 8px; min-width: 0; font-size: 11px; }
  #zonePill { top: 6px; }
  #banner { top: 150px; font-size: 14px; }
  #win { padding-bottom: 12px; align-items: flex-start; }
  .winbox { max-height: calc(100% - 20px); }
}

/* ---- barra superior, submenus e setas de esconder ---- */
:root { --th: 46px; }
body.notop { --th: 0px; }
#topbar { position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px 5px; max-width: calc(100vw - 12px); overflow-x: auto; scrollbar-width: none; border-radius: 14px; }
#topbar button { position: relative; flex: none; background: linear-gradient(180deg, #23283d, #171a29); border: 1px solid var(--line); border-radius: 10px; padding: 5px 11px; cursor: pointer; font-size: 12px; font-weight: 700; color: #dfe3f5; white-space: nowrap; }
#topbar button:hover { border-color: var(--accent); color: var(--accent); }
#topbar button.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; border: 2px solid #12141f; }
#topbar #topToggle, #botToggle { background: #3a2f10; border: 1px solid var(--gold); color: var(--accent); font-size: 11px; cursor: pointer; }
#topbar #topToggle { padding: 5px 9px; position: sticky; right: 0; } /* na tela estreita a barra rola e a seta fica sempre a vista */
body.notop #topbar .tb { display: none; }
/* escondida: sobra so a seta, no canto, para nao ficar atras do nome da area */
body.notop #topbar { left: 12px; transform: none; padding: 3px; }
/* fora do #hud e acima das janelas (#win, z-index 5), senao o submenu abre por baixo delas */
#drop { position: fixed; z-index: 7; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 170px; }
#drop .btn { text-align: left; padding: 7px 10px; font-weight: 600; }
#drop .btn:hover { border-color: var(--accent); color: var(--accent); }
#botToggle { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 46px; height: 16px; line-height: 12px; border-radius: 9px 9px 0 0; border-bottom: 0; padding: 0; }
#bottom.min #tabs, #bottom.min #slots { display: none; }
#zonePill { top: calc(var(--th) + 10px + env(safe-area-inset-top, 0px)); }
#banner { top: calc(var(--th) + 70px + env(safe-area-inset-top, 0px)); }
#win { padding-top: calc(var(--th) + 16px); }
.subtabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
select { background: #0d0f17; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; color: var(--text); font: inherit; max-width: 100%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.grid5 > div { background: #12141f; border-radius: 8px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 1240px) { #killbox { top: calc(var(--th) + 12px); } }
@media (max-width: 700px) {
  #zonePill { top: calc(var(--th) + 6px); }
  #sess, #killbox { top: calc(var(--th) + 62px); }
  #banner { top: calc(var(--th) + 150px); }
  .two { grid-template-columns: 1fr; }
}
/* ---- mapa: filtros e favoritas ---- */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.chip { border-color: var(--c); color: var(--c); text-transform: uppercase; font-size: 10px; font-weight: 700; filter: brightness(1.25); }
.chip.on { background: var(--c); color: #111; filter: none; }
.star { cursor: pointer; color: #555b78; font-size: 15px; }
.star.on { color: var(--accent); }
/* tela baixa e estreita: as caixas de sessao e abates saem para sobrar mapa */
@media (max-width: 700px) and (max-height: 700px) { #sess, #killbox { display: none !important; } }
/* ---- online: login, chat e ranking ---- */
.login input, #panel input[type=text], #panel input:not([type]) { width: 100%; background: #0d0f17; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--text); font: inherit; margin-bottom: 8px; }
.login .err { color: var(--bad); min-height: 18px; font-size: 12px; margin-bottom: 6px; }
.chatlog { height: 300px; max-height: 45vh; overflow-y: auto; display: flex; flex-direction: column-reverse; background: #0d0f17; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; font-size: 12.5px; }
.chatlog div { padding: 1px 0; overflow-wrap: anywhere; }
.chatlog b { color: #8fd3ff; margin-right: 4px; }
.chatlog .sys b { color: var(--accent); }
.rankrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.rankrow .pos { width: 34px; font-weight: 800; color: var(--accent); }
.rankrow.me { background: rgba(255, 203, 5, .08); border-radius: 6px; }
/* avisos nao capturam cliques: o toast ficava por cima de botoes e campos das janelas */
#toast { pointer-events: none; }

#topbar button.reston { border-color: var(--good); color: var(--good); }

/* ---- tela de entrada ---- */
#overlay.land { background: linear-gradient(120deg, rgba(8, 10, 20, .94) 0%, rgba(8, 10, 20, .78) 45%, rgba(8, 10, 20, .55) 100%), url(../maps/0.jpg) center / cover no-repeat; padding: 24px; overflow-y: auto; align-items: flex-start; }
.landing { display: flex; align-items: center; justify-content: center; gap: 56px; width: 100%; max-width: 1040px; min-height: 100%; margin: auto; flex-wrap: wrap; }
.hero { flex: 1 1 380px; max-width: 520px; }
.logo { font-size: 64px; font-weight: 900; letter-spacing: -2px; line-height: 1; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.logo span { color: var(--accent); }
.tagline { font-size: 18px; color: #d7dbee; margin: 14px 0 6px; line-height: 1.45; }
.starters3 { display: flex; gap: 18px; align-items: flex-end; margin: 14px 0 10px; }
.starters3 .holder { height: 96px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)); animation: bob 2.4s ease-in-out infinite; }
.starters3 .holder:nth-child(2) { animation-delay: .4s; } .starters3 .holder:nth-child(3) { animation-delay: .8s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.feats { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.feats li { padding-left: 22px; position: relative; color: #c5cae0; font-size: 14.5px; }
.feats li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.feats b { color: #fff; }
.live { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 14px; border-radius: 20px; background: rgba(61, 220, 132, .12); border: 1px solid rgba(61, 220, 132, .4); color: var(--good); font-weight: 600; font-size: 13px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.auth { flex: 0 1 380px; width: 100%; padding: 22px; background: rgba(18, 20, 31, .96); backdrop-filter: blur(6px); border-radius: 18px; }
.authtabs { display: flex; background: #0d0f17; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.authtabs button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; cursor: pointer; font-weight: 700; color: var(--dim); }
.authtabs button.on { background: var(--panel2); color: var(--accent); box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.auth label { display: block; font-size: 12px; font-weight: 600; color: var(--dim); margin-bottom: 10px; }
.auth label input { margin: 5px 0 0; padding: 11px 12px; font-size: 14px; }
.auth label input:focus { outline: none; border-color: var(--accent); }
.auth small { font-weight: 400; }
.btn.big { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; border-radius: 10px; }
.btn.big:hover { filter: brightness(1.1); }
.fine { font-size: 11.5px; color: var(--dim); margin: 12px 0 0; text-align: center; }
@media (max-width: 760px) {
  .landing { gap: 22px; }
  .logo { font-size: 44px; } .tagline { font-size: 15px; }
  .hero { text-align: center; } .starters3 { justify-content: center; } .starters3 .holder { height: 72px; transform: scale(.8); }
  .feats { display: none; }
}
/* ---- hunt analyzer ---- */
#sess { cursor: pointer; transition: border-color .12s; }
#sess:hover { border-color: var(--accent); }
#sess small { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
#sess .r, #ha .r { color: var(--bad); }
#ha { position: absolute; left: 12px; top: 172px; width: 380px; max-width: calc(100vw - 24px); max-height: calc(100vh - 184px - var(--bh, 160px)); min-height: 220px; display: flex; flex-direction: column; overflow: hidden; z-index: 4; background: #10121c; }
#ha[hidden] { display: none; }
#ha header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); }
#ha header b { color: var(--accent); text-transform: uppercase; letter-spacing: .8px; font-size: 13px; }
.htabs { display: flex; gap: 4px; margin: 10px 12px 0; padding: 3px; background: #0a0b12; border-radius: 10px; }
.htabs button { flex: 1; border: 0; background: none; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.htabs button.on { background: linear-gradient(180deg, #6b5013, #4a370c); color: var(--accent); }
#haBody { flex: 1; overflow-y: auto; padding: 10px 12px; min-height: 0; scrollbar-width: thin; }
.hgrid { display: grid; gap: 6px; }
.hgrid.two { grid-template-columns: 1fr 1fr; } .hgrid.three { grid-template-columns: repeat(3, 1fr); }
.hstat { background: #0a0b12; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; min-width: 0; }
.hstat span { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hstat b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; margin-top: 1px; }
.hstat em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcap { margin: 12px 0 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #7fb6ff; }
.hsec { background: #0a0b12; border: 1px solid var(--line); border-radius: 9px; padding: 2px 9px; margin-top: 8px; }
.hcap + .hsec { margin-top: 0; }
.hrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 12px; }
.hrow:last-child { border-bottom: 0; }
.hrow span { color: #c5cae0; min-width: 0; }
.hrow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrow.tot span { color: #fff; font-weight: 600; }
.hitem { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 12px; }
.hitem:last-child { border-bottom: 0; }
.hitem img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.hitem em { font-style: normal; font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; color: var(--dim); }
.hitem.shiny span { color: var(--accent); font-weight: 600; }
.hempty { color: var(--dim); font-size: 12px; padding: 8px 0; }
#ha footer { padding: 9px 12px; border-top: 1px solid var(--line); }
#ha footer .btn { width: 100%; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; border-color: #2c5f8a; color: #9fd0ff; background: #0f2233; }
#ha footer .btn:hover { border-color: #7fb6ff; }
@media (max-width: 700px) { #ha { left: 6px; top: calc(var(--th) + 118px); width: auto; right: 6px; max-height: calc(100vh - var(--th) - 130px - var(--bh, 160px)); } }
/* ---- Jogar: continentes e hunts ---- */
#win.wide .winbox { max-width: 940px; }
.conts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cont { position: relative; height: 170px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; background: #0a0b12; transition: transform .12s, border-color .12s; }
.cont:hover { border-color: var(--accent); transform: translateY(-2px); }
.cont img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.cont.locked { cursor: default; } .cont.locked img { filter: grayscale(1) brightness(.4); } .cont.locked:hover { transform: none; border-color: var(--line); }
.cont .cinfo { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(5, 6, 12, .92)); display: flex; flex-direction: column; }
.cont .cinfo b { font-size: 19px; } .cont .cinfo span { font-size: 11.5px; color: #c5cae0; }
.cont .badge { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px; border-radius: 10px; background: rgba(10, 11, 18, .85); border: 1px solid var(--line); color: var(--dim); }
.cont .badge.on { background: #0f9d6b; border-color: #0f9d6b; color: #fff; }
.hhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chiprow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.chiprow .cap { color: var(--dim); font-size: 10px; margin-right: 4px; min-width: 72px; }
.hunts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; }
.hunt { display: flex; flex-direction: column; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hunt[hidden] { display: none; }
.hunt.here { border-color: var(--accent); box-shadow: 0 0 12px rgba(255, 203, 5, .25); }
.hunt.locked .thumb img { filter: grayscale(1) brightness(.45); }
.thumb { position: relative; height: 118px; background: #0a0b12; }
.thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.thumb .lv { position: absolute; top: 8px; left: 8px; background: rgba(10, 11, 18, .88); border: 1px solid var(--line); border-radius: 8px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
.thumb .now { position: absolute; top: 8px; right: 8px; background: var(--accent); color: #111; border-radius: 8px; padding: 1px 7px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.hbody { padding: 9px 10px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hbody .icons { margin: 0; }
.hbody .icons .pi.un { filter: grayscale(1) brightness(.5); }
.hfoot { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; }
.hfoot .btn { flex: 1; font-weight: 800; text-transform: uppercase; font-size: 11.5px; letter-spacing: .4px; background: var(--accent); border-color: var(--accent); color: #151515; }
.hfoot .btn[disabled] { background: #262b40; border-color: var(--line); color: var(--dim); opacity: 1; }
.hfoot .star { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; font-size: 16px; flex: none; }
@media (max-width: 700px) { .hunts, .conts { grid-template-columns: 1fr 1fr; gap: 8px; } .thumb { height: 84px; } .cont { height: 120px; } .chiprow .cap { min-width: 100%; } }
/* as janelas param acima do painel de baixo, qualquer que seja a altura dele */
#win { padding-bottom: calc(var(--bh, 150px) + 14px); }
@media (max-width: 700px) { #win { padding-bottom: 12px; } }

/* ---- Quality ---- */
.qtag { display: inline-block; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 8px; border: 1px solid currentColor; white-space: nowrap; vertical-align: 1px; }
.qtag.q1 { color: #7d849e; } .qtag.q2 { color: #b9c0d8; } .qtag.q3 { color: #7ddc8a; } .qtag.q4 { color: #6fb6ff; } .qtag.q5 { color: #c58bff; }
.qtag.q6 { color: #ffb347; } .qtag.q7 { color: #ff6b8b; } .qtag.q8 { color: #ff4d4d; text-shadow: 0 0 6px rgba(255, 77, 77, .6); }
.qtag.q9 { color: var(--accent); text-shadow: 0 0 8px rgba(255, 203, 5, .8); }
.grid5 { row-gap: 8px; }
#panel .icons .slot { margin-top: 8px; }
/* ---- PokeWiki ---- */
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.wlist .card { cursor: pointer; margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.wlist .card:hover { border-color: var(--accent); }
.whead { background: linear-gradient(135deg, #2a2110, #14161f); border: 1px solid var(--gold); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.whead h2 { margin: 6px 0 4px; font-size: 20px; } .whead p { margin: 0; color: #c5cae0; }
.wsec { border-top: 1px solid var(--line); padding: 12px 2px 4px; }
.wsec h4 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.wsec h4 i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent); background: #3a2f10; border-radius: 6px; padding: 1px 7px; }
.wsec p { margin: 0 0 8px; color: #c5cae0; line-height: 1.5; }
.wnote { border: 1px solid #2c5f8a; background: #0f2233; color: #cfe6ff; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; font-size: 12.5px; }
.wtable { overflow-x: auto; margin: 0 0 8px; }
.wtable table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wtable th { text-align: left; color: var(--accent); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; padding: 6px 8px; background: #2a2110; }
.wtable td { padding: 6px 8px; border-top: 1px solid var(--line); }
/* ---- cidade ---- */
#npcBtn { position: absolute; transform: translate(-50%, -100%); border: 0; border-radius: 16px; padding: 5px 14px; cursor: pointer; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #151515; background: linear-gradient(180deg, #ffd95a, #f0a800); box-shadow: 0 3px 10px rgba(0, 0, 0, .5); white-space: nowrap; }
#npcBtn:hover { filter: brightness(1.1); }
#leaveBtn { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--th) + 68px + env(safe-area-inset-top, 0px)); font-weight: 700; border-color: var(--gold); background: var(--panel); }
@media (max-width: 700px) { #leaveBtn { top: calc(var(--th) + 60px); } }
/* o botao de voltar fica embaixo, para nao disputar espaco com o NPC e o nome da cidade no topo */
#leaveBtn { top: auto; bottom: calc(var(--bh, 160px) + 26px); }
@media (max-width: 700px) { #leaveBtn { top: auto; } }
#npcBtn { z-index: 3; }

/* ================= HUD 2: cartao do treinador com o time, sessao, captura e doca =================
   Tudo aqui se ajusta sozinho: larguras em clamp(), alturas presas a area livre da tela (--hb/--rb, medidas
   pelo ui.js) e tres degraus de largura (celular <= 700, tablet <= 1240, desktop) e de altura (<= 760, <= 600, <= 460). */
:root { --glass: linear-gradient(180deg, rgba(24, 28, 46, .95), rgba(11, 13, 22, .95)); --pad: clamp(6px, 1vw, 12px); --cardw: clamp(232px, 21vw, 284px); --vh: 100vh; --hb: 150px; --rb: 96px; }
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
.box { background: var(--glass); border: 1px solid rgba(201, 161, 59, .62); border-radius: 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); }
#hud > #leftCol, #hud > #rightCol { pointer-events: none; }
#leftCol > *, #rightCol > * { pointer-events: auto; }
#hud .box { max-width: calc(100vw - 2 * var(--pad)); }

/* barras com texto por cima */
.bar.txt { position: relative; height: 14px; border-radius: 7px; }
.bar.txt i { border-radius: 7px; }
.bar.txt span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; letter-spacing: .2px; text-shadow: 0 0 3px #000, 0 1px 1px #000; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.bar.hp i { background: linear-gradient(180deg, #5ff0a0, #1fae62); }
.bar.hp i.mid { background: linear-gradient(180deg, #ffe066, #d9a400); }
.bar.hp i.low { background: linear-gradient(180deg, #ff8f8f, #d93a3a); }
.bar.xpm i { background: linear-gradient(180deg, #8fa8ff, #4f63e6); }

#topbar { max-width: calc(100vw - 2 * var(--pad)); }
#zonePill { max-width: calc(100vw - 2 * var(--pad)); overflow: hidden; text-overflow: ellipsis; }

/* ---- esquerda: treinador, ativo e o resto do time ---- */
#leftCol { position: absolute; left: var(--pad); top: calc(var(--th) + var(--pad) + 2px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: flex-start; }
#card { width: var(--cardw); padding: 10px 11px 9px; display: flex; flex-direction: column; min-height: 0; max-height: calc(var(--vh) - var(--th) - var(--hb) - 3 * var(--pad) - env(safe-area-inset-top, 0px)); }
#card > * { flex: none; }
.chead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.chead > b { font-size: 15px; font-weight: 800; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chead span { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.chead span b { color: var(--text); font-size: 14px; }
#cardMon { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; min-height: 46px; cursor: pointer; }
#cardMon .pi { width: 46px; height: 46px; padding: 5px; border-radius: 11px; background: #0a0c14; border: 1px solid var(--accent); box-shadow: inset 0 0 10px rgba(0, 0, 0, .7), 0 0 10px rgba(255, 203, 5, .22); }
#cardMon .nm { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
#cardMon .nm b, .trow .tn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#cardMon .nm i, .trow .tn i { font-style: normal; color: var(--good); font-weight: 800; font-size: 11px; }
#cardMon .nm em, .trow .tn em { margin-left: auto; font-style: normal; color: var(--accent); font-weight: 800; font-size: 11px; white-space: nowrap; }
#card .xp { margin: 0; }
#card .xp span { font-size: 9.5px; letter-spacing: .3px; }
.cur { display: flex; align-items: center; gap: 6px; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 8px; flex-wrap: wrap; }
.cur > b { color: #f2d377; margin-right: auto; }
#pItems { display: inline-flex; gap: 5px; }
#pItems span { display: inline-flex; align-items: center; font-size: 11.5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 0 7px 0 1px; }
#pItems span.zero { color: var(--bad); border-color: #6b2a2a; }
#pItems img { width: 20px; height: 20px; image-rendering: pixelated; }

.thead { display: flex; align-items: center; gap: 8px; margin: 9px -11px 0; padding: 6px 9px 6px 12px; border-top: 1px solid var(--line); background: rgba(255, 203, 5, .05); }
.thead b { font-size: 11px; text-transform: uppercase; letter-spacing: .9px; color: var(--accent); }
.thead span { font-size: 11px; color: var(--dim); margin-right: auto; }
#teamToggle { width: 24px; height: 20px; border-radius: 7px; border: 1px solid var(--line); background: #262b40; cursor: pointer; font-weight: 800; line-height: 1; padding: 0; color: var(--text); }
#teamToggle:hover { border-color: var(--accent); color: var(--accent); }
#card > #slots { display: flex; flex-direction: column; gap: 5px; padding: 8px 0 1px; margin: 0; overflow-y: auto; scrollbar-width: thin; flex: 0 1 auto; min-height: 0; }
.trow { position: relative; display: flex; gap: 8px; align-items: center; padding: 5px 8px 6px 6px; border-radius: 10px; cursor: pointer; flex: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, #141829), #141829 62%); border: 1px solid var(--line); border-left: 3px solid var(--c); transition: border-color .12s, transform .12s; }
.trow:hover { border-color: var(--gold); border-left-color: var(--c); transform: translateX(2px); }
.trow.ko { filter: grayscale(.9) brightness(.7); }
.trow .tp { position: relative; width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #0a0c14; border: 1px solid #000; box-shadow: inset 0 0 8px rgba(0, 0, 0, .7); }
.trow .tp s { position: absolute; right: -4px; top: -6px; text-decoration: none; font-size: 8.5px; font-weight: 800; padding: 0 4px; border-radius: 5px; background: #4f63e6; color: #fff; }
.trow .tp .mini { display: none; }
.trow .ti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow .tn { display: flex; align-items: baseline; gap: 5px; font-size: 12px; }
.trow .tn b { font-weight: 700; }
.trow .bar.txt { height: 12px; }
.trow .bar.xpm { height: 10px; }
.trow .bar.xpm span { font-size: 8px; }
.trow .bar.hp span { font-size: 9px; }
.tempty { text-align: center; font-size: 11px; color: var(--dim); border: 1px dashed var(--line); border-radius: 10px; padding: 6px 4px; cursor: pointer; flex: none; }
.tempty:hover { border-color: var(--gold); color: var(--text); }
/* so os retratos, com a vida embaixo: pelo botao, ou sozinho quando a tela e pequena (ui.js liga body.teammin) */
body.teammin #card > #slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px 5px; padding: 8px 0 5px; overflow: visible; }
body.teammin .trow { padding: 0; border: 0; background: none; justify-content: center; }
body.teammin .trow:hover { transform: none; }
body.teammin .trow .ti, body.teammin .tempty { display: none; }
body.teammin .trow .tp { width: 100%; height: auto; aspect-ratio: 1; max-width: 44px; border: 1px solid var(--c); }
body.teammin .trow .tp .pi { max-width: 100%; height: auto; }
body.teammin .trow .tp .mini { display: block; position: absolute; left: 1px; right: 1px; bottom: -5px; height: 5px; }

/* ---- direita: sessao, analyzer, ultimos abates ---- */
#rightCol { position: absolute; right: var(--pad); top: calc(var(--th) + var(--pad) + 2px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-height: calc(var(--vh) - var(--th) - var(--rb) - 3 * var(--pad) - env(safe-area-inset-top, 0px)); }
#rightCol > * { flex: none; }
#sess { position: static; display: flex; align-items: center; gap: 11px; padding: 6px 13px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; }
#sess .si { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); }
#sess .si b { color: var(--text); font-weight: 700; }
#sess .si b.g { color: var(--good); } #sess .si b.r { color: var(--bad); }
#sess svg { width: 12px; height: 12px; color: var(--accent); flex: none; }
#rightCol #ha { position: static; width: min(380px, calc(100vw - 2 * var(--pad))); flex: 0 1 auto; min-height: 0; max-height: none; }
#killbox { position: static; width: clamp(200px, 19vw, 256px); min-width: 0; padding: 8px 12px; }
#killbox .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- embaixo: doca de botoes, captura e moves ---- */
#bottom { left: 0; right: 0; margin: 0 auto; transform: none; width: min(640px, 100vw); padding: 12px 12px calc(7px + env(safe-area-inset-bottom, 0px)); }
#tabs { margin-top: 0; }
#tabs button { flex: 1 1 0; width: auto; max-width: 62px; min-width: 0; overflow: hidden; }
#tabs button.main { flex: 1.25 1 0; max-width: 76px; width: auto; }
#capBox { position: fixed; right: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); width: clamp(200px, 19vw, 256px); padding: 8px 10px 9px; }
#capBox .cap { margin-bottom: 6px; }
#catchBar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#catchBar .btn { margin-left: auto; }
#movesBox { left: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: min(calc(100vw - 2 * var(--pad)), calc(50vw - 280px)); min-width: 0; }
#moves { --n: 10; --h: 10; }
#movesBox .cap { font-size: 11px; line-height: 1; }

/* ---------- tablet e celular: a captura entra na doca e os moves viram uma fileira em cima dela ---------- */
@media (max-width: 1240px) {
  #capBox { position: static; width: auto; border: 0; background: none; box-shadow: none; padding: 0 0 9px; border-radius: 0; }
  #capBox .cap { display: none; }
  #catchBar { justify-content: center; }
  #catchBar .btn { margin-left: 4px; }
  #bottom.min #capBox { display: none; }
  /* os moves cabem sempre na largura da tela: cada um encolhe conforme a quantidade (--n vem do ui.js) */
  #movesBox { left: 50%; transform: translateX(-50%); bottom: calc(var(--bh, 150px) + 6px); max-width: calc(100vw - 2 * var(--pad)); padding: 5px 7px; display: flex; align-items: center; gap: 7px; }
  #movesBox .cap { margin: 0; }
  #moves { max-width: none; flex-wrap: nowrap; overflow: visible; gap: 4px; padding: 0; }
  #moves .mv { flex: none; width: min(44px, calc((100vw - 2 * var(--pad) - 80px - (var(--n) - 1) * 4px) / var(--n))); height: auto; aspect-ratio: 1; }
}
@media (max-width: 700px) {
  :root { --cardw: min(236px, calc(100vw - 2 * var(--pad) - 138px)); }
  #leftCol, #rightCol { top: calc(var(--th) + 64px + env(safe-area-inset-top, 0px)); }
  #card { padding: 7px 9px 7px; }
  .chead { margin-bottom: 5px; } .chead > b { font-size: 13px; }
  #cardMon { gap: 8px; margin-bottom: 6px; min-height: 38px; }
  #cardMon .pi { width: 38px; height: 38px; padding: 3px; }
  .cur { font-size: 12.5px; margin-top: 6px; }
  #pItems span { font-size: 10.5px; padding: 0 5px 0 0; } #pItems img { width: 17px; height: 17px; }
  .thead { margin: 7px -9px 0; padding: 4px 7px 4px 10px; }
  /* sessao: quatro numeros em duas linhas, estreita */
  #sess { display: grid; grid-template-columns: auto auto; gap: 3px 7px; padding: 6px 8px; border-radius: 12px; font-size: 10px; max-width: 132px; overflow: hidden; }
  #sess .si { min-width: 0; overflow: hidden; } #sess svg { width: 10px; height: 10px; }
  #killbox { display: none !important; }
  #rightCol #ha { position: fixed; left: var(--pad); right: var(--pad); width: auto; top: calc(var(--th) + 64px + env(safe-area-inset-top, 0px)); max-height: calc(var(--vh) - var(--th) - var(--hb) - 76px); z-index: 4; }
  #bottom { padding: 9px 6px calc(5px + env(safe-area-inset-bottom, 0px)); }
  #tabs { gap: 3px; }
  #tabs button { font-size: clamp(6.5px, 1.9vw, 8.5px); letter-spacing: 0; padding: 7px 0 4px; border-radius: 11px; }
  #tabs button svg { width: clamp(17px, 5vw, 22px); height: clamp(17px, 5vw, 22px); }
  #tabs button.main { padding: 9px 0 6px; transform: translateY(-5px); }
  #tabs button.main svg { width: clamp(20px, 6vw, 26px); height: clamp(20px, 6vw, 26px); }
  .ball { font-size: 11px; padding: 0 5px 0 0; } .ball img { width: 19px; height: 19px; }
  #catchBar .btn { font-size: 11px; padding: 2px 7px; }
  #movesBox .cap { display: none; }
  /* celular: com mais de 8 golpes a barra vira duas fileiras (--h = golpes por fileira, vem do ui.js) */
  #moves { display: grid; grid-template-columns: repeat(var(--h), auto); justify-content: center; }
  #moves .mv { width: min(40px, calc((100vw - 2 * var(--pad) - 16px - (var(--h) - 1) * 4px) / var(--h))); height: auto; aspect-ratio: 1; border-radius: 8px; }
  .mv u { font-size: 13px; }
}
@media (max-width: 380px) { #sess { grid-template-columns: auto; max-width: 96px; } #sess .si svg { display: none; } :root { --cardw: min(220px, calc(100vw - 2 * var(--pad) - 102px)); } }

/* ---------- pouca altura ---------- */
@media (max-height: 760px) {
  .trow { padding: 4px 8px 4px 6px; } .trow .tp { width: 32px; height: 32px; }
  .trow .bar.xpm { height: 4px; } .trow .bar.xpm span { display: none; }
  #card > #slots { gap: 4px; padding-top: 7px; }
}
@media (max-width: 1240px) and (max-height: 820px) { #killbox { display: none !important; } }
@media (max-height: 600px) {
  /* a barra de EXP vira um fio e o nome da area fica numa linha so */
  #card .xp .bar { height: 5px; } #card .xp span { display: none; }
  #cardMon { margin-bottom: 5px; min-height: 36px; } #cardMon .pi { width: 36px; height: 36px; padding: 3px; }
  .cur { margin-top: 5px; } .thead { margin-top: 6px; padding-top: 3px; padding-bottom: 3px; }
  #zonePill { padding: 4px 12px; } #zonePill span { display: none; }
  #tabs button { font-size: 0; padding: 6px 0; } #tabs button svg { width: 20px; height: 20px; }
  #tabs button.main { transform: none; padding: 6px 0; } #tabs button.main svg { width: 22px; height: 22px; }
  #bottom { padding-top: 8px; } #capBox { padding-bottom: 6px; }
}
@media (max-width: 700px) and (max-height: 600px) { #leftCol, #rightCol { top: calc(var(--th) + 42px + env(safe-area-inset-top, 0px)); } #rightCol #ha { top: calc(var(--th) + 42px); } }
@media (max-height: 460px) {
  /* celular deitado: o essencial */
  .cur, .thead { display: none; } #card > #slots { padding-top: 2px; }
  #sess { padding: 4px 10px; font-size: 10.5px; }
  #movesBox { padding: 3px 6px; } #moves .mv { width: min(34px, calc((100vw - 2 * var(--pad) - 80px - (var(--n) - 1) * 4px) / var(--n))); }
}

/* menu de cima escondido: a seta fica no canto esquerdo, entao o cartao desce para nao cobri-la */
body.notop #leftCol { top: calc(44px + env(safe-area-inset-top, 0px)); }
@media (max-width: 700px) { body.notop #leftCol, body.notop #rightCol { top: calc(58px + env(safe-area-inset-top, 0px)); } }

/* ---- painel lateral minimizado: so o retrato do ativo, a vida e o botao de abrir ---- */
#cardToggle { flex: none; width: 22px; height: 20px; margin-left: 2px; align-self: center; border-radius: 7px; border: 1px solid var(--line); background: #262b40; cursor: pointer; padding: 0; color: var(--text); position: relative; }
#cardToggle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-30%, -50%) rotate(45deg); }
#cardToggle:hover { border-color: var(--accent); color: var(--accent); }
.chead > span { margin-left: auto; }
body.cardmin #card { width: auto; flex-direction: row; align-items: center; gap: 7px; padding: 5px 6px 5px 5px; border-radius: 999px; }
body.cardmin #card > .xp, body.cardmin #card > .cur, body.cardmin #card > .thead, body.cardmin #card > #slots, body.cardmin .chead > b, body.cardmin .chead > span { display: none; }
body.cardmin .chead { margin: 0; order: 2; }
body.cardmin #cardToggle { border-radius: 50%; width: 24px; height: 24px; margin: 0; }
body.cardmin #cardToggle::before { transform: translate(-70%, -50%) rotate(225deg); }
body.cardmin #cardMon { margin: 0; min-height: 0; gap: 7px; }
body.cardmin #cardMon .pi { width: 32px; height: 32px; padding: 2px; border-radius: 50%; }
body.cardmin #cardMon .grow { width: clamp(112px, 24vw, 150px); flex: none; }
body.cardmin #cardMon .nm { font-size: 10.5px; margin-bottom: 2px; gap: 4px; }
body.cardmin #cardMon .nm i { display: none; }
body.cardmin #cardMon .bar.txt { height: 9px; } body.cardmin #cardMon .bar.txt span { display: none; }

/* diamantes e amuletos no cartao; bolas de tipo na barra de captura */
#pItems { flex-wrap: wrap; justify-content: flex-end; }
#pItems span.dia { cursor: pointer; border-color: #3a78c9; color: #9fd0ff; padding: 0 7px 0 5px; gap: 4px; }
#pItems span.dia i { width: 9px; height: 9px; background: linear-gradient(135deg, #bfe6ff, #3a8dff); transform: rotate(45deg); border-radius: 2px; flex: none; }
#pItems span.bst { cursor: pointer; border-color: #7a4bd6; color: #d7c2ff; padding: 0 7px; font-weight: 700; }
#catchBar .ball.ty { border-style: dashed; }
body.cardmin #pItems { display: none; }

/* ---- Loja de Diamantes: cartoes em grade ---- */
.dgem { display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, #d6f1ff, #2f8bff); transform: rotate(45deg); border-radius: 2px; margin: 0 7px 0 3px; vertical-align: middle; box-shadow: 0 0 6px rgba(80, 170, 255, .7); }
.dbal { color: #9fd0ff; font-size: 16px; font-weight: 800; margin-left: 4px; }
.dcats { margin-bottom: 12px; }
.dshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.dcard { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, #1a2036, #10131f); transition: border-color .12s, transform .12s; }
.dcard:hover { border-color: #3a8dff; transform: translateY(-2px); }
.dtop { display: flex; gap: 10px; align-items: center; }
.dicon { width: 50px; height: 50px; flex: none; border-radius: 12px; background: #080a12; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.dicon img { width: 36px; height: 36px; image-rendering: pixelated; }
.dtag { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #5cc8ff; }
.dcard .title { font-size: 14px; font-weight: 800; }
.ddesc { min-height: 30px; line-height: 1.35; }
.dfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.dbuy { background: linear-gradient(180deg, #3fd0ff, #1f8fe6); border-color: #7fdcff; color: #06203a; font-weight: 800; padding: 6px 14px; border-radius: 10px; }
.dbuy .dgem { background: linear-gradient(135deg, #fff, #bfe6ff); box-shadow: none; }
.dbuy:disabled { background: #2a3044; border-color: var(--line); color: var(--dim); cursor: not-allowed; }
.dbuy:disabled .dgem { background: #6b7393; }
/* selo VIP ao lado do nome */
#pName.vip::after { content: 'VIP'; margin-left: 6px; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 5px; background: linear-gradient(180deg, #ffe680, #d99400); color: #2a1d00; vertical-align: middle; }

/* caixa de abates: XP do pokemon e a parte que veio de bonus */
#killbox .kmon { color: #8fd3ff; font-weight: 700; font-size: 12px; }
#killbox .kbonus { color: #ffd95a; font-size: 10.5px; font-weight: 800; }
#killbox .kmon .kbonus { color: #c9b3ff; }

/* botao de chat na faixa da sessao, com aviso de mensagem nova */
#sess .si.chat { cursor: pointer; padding: 2px 7px; margin: -2px -5px -2px 0; border-radius: 999px; border: 1px solid var(--line); background: #262b40; }
#sess .si.chat:hover { border-color: var(--accent); }
#sess .si.chat svg { color: #9fd0ff; }
#sess .si.chat.new { border-color: #ef4444; }
#sess .si.chat.new b { color: #ff8f8f; }
@media (max-width: 700px) { #sess .si.chat { grid-column: 1 / -1; justify-content: center; margin: 2px 0 0; } }
/* grades de 5 colunas (Quality nas Estatisticas) cabem em tela estreita */
.grid5 { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.grid5 > div { min-width: 0; overflow: hidden; }

/* visuais do treinador */
.ogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.ocard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: #141829; text-align: center; }
.ocard.on { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 203, 5, .25); }
.ocard.off { opacity: .6; }
.ocard .ospr { height: 116px; display: flex; align-items: flex-end; justify-content: center; }
.ocard .title { font-size: 12px; }

/* ================= Time (ficha) e Mochila (grade) ================= */
.thd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 8px; }
.thd > b { font-size: 12px; text-transform: uppercase; letter-spacing: .9px; color: var(--accent); }
.thd .cnt { font-size: 11px; color: var(--dim); background: var(--panel2); border-radius: 10px; padding: 1px 8px; margin-right: auto; }
.tslots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.tslot { position: relative; aspect-ratio: 1; border-radius: 12px; border: 2px solid #5a4a1a; background: #0c0e17; display: flex; align-items: center; justify-content: center; cursor: pointer; padding-bottom: 6px; transition: border-color .12s, transform .12s; }
.tslot:hover { transform: translateY(-2px); border-color: var(--gold); }
.tslot.on { border-color: var(--accent); background: #2a2413; box-shadow: 0 0 12px rgba(255, 203, 5, .3); }
.tslot.ko .pi { filter: grayscale(1) brightness(.5); }
.tslot.empty { border-style: dashed; border-color: var(--line); cursor: default; }
.tslot .pi { max-width: 78%; height: auto; }
.tslot .bar { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 4px; border: 0; }
.tslot u { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); text-decoration: none; }
.tdet { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tbig { width: 96px; height: 96px; flex: none; border-radius: 14px; border: 1px solid #1f6f5a; background: radial-gradient(circle at 50% 60%, #14261f, #080a10); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tinfo { min-width: 0; }
.tname { font-size: clamp(17px, 4.6vw, 22px); font-weight: 900; text-transform: uppercase; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tname i { font-style: normal; color: var(--good); font-size: .7em; }
.tlvl { color: var(--dim); font-size: 13px; margin: 2px 0 6px; }
.tlvl .pw { color: #ffd95a; }
.ttags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag.ivt { background: #0f3340; color: #7fe3ff; border: 1px solid #1d6f86; }
.tbar { height: 16px; margin-bottom: 6px; }
.tbar span { font-size: 10.5px; }
.tacts { margin: 8px 0 12px; }
.tsec { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px; margin-bottom: 10px; background: #0f1220; }
.tsech { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.tsech b { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
.statgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.statgrid > div { border: 1px solid color-mix(in srgb, var(--c) 55%, #000); border-radius: 10px; padding: 5px 2px; text-align: center; background: color-mix(in srgb, var(--c) 10%, #0b0d15); min-width: 0; }
.statgrid span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: var(--c); }
.statgrid b { font-size: clamp(11px, 3vw, 14px); font-variant-numeric: tabular-nums; }
.ivrow { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; }
.ivrow span { width: 34px; font-weight: 800; color: var(--c); flex: none; }
.ivrow b { width: 22px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.ivbar { flex: 1; height: 7px; border-radius: 4px; background: #05060a; overflow: hidden; }
.ivbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #12a8b8, #3fe0d0); }
.tmoves { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; }
.tmv { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 10px; padding: 5px 8px; min-width: 0; }
.tmv img, .tmv > i { width: 30px; height: 30px; flex: none; border-radius: 7px; image-rendering: pixelated; background: color-mix(in srgb, var(--c) 35%, #05060a); }
.tmv .title { font-size: 12.5px; } .tmv .sub { font-size: 10.5px; }
@media (max-width: 480px) { .statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tbig { width: 76px; height: 76px; } .tslots { gap: 4px; } }

.bfilters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.bfilters small { opacity: .7; font-weight: 400; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-bottom: 10px; }
.btile { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: #0c0e17; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .12s, transform .12s; }
.btile:hover { border-color: var(--gold); transform: translateY(-2px); }
.btile.on { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 203, 5, .3); }
.btile.held { border-color: #6b4bb0; } .btile.balls { border-color: #7a4a1a; } .btile.stone { border-color: #2c6f6a; }
.btile img { width: 60%; height: 60%; image-rendering: pixelated; object-fit: contain; }
.btile b { position: absolute; right: 5px; bottom: 3px; font-size: 11px; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.bdet { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #0f1220; }
/* ---- borda pela raridade (Quality) do pokemon: as mesmas cores da etiqueta ---- */
.qb.q1 { --q: #7d849e; } .qb.q2 { --q: #b9c0d8; } .qb.q3 { --q: #7ddc8a; } .qb.q4 { --q: #6fb6ff; } .qb.q5 { --q: #c58bff; }
.qb.q6 { --q: #ffb347; } .qb.q7 { --q: #ff6b8b; } .qb.q8 { --q: #ff4d4d; } .qb.q9 { --q: #ffcb05; }
.tslot.qb { border-color: var(--q); box-shadow: inset 0 0 10px color-mix(in srgb, var(--q) 22%, transparent); }
.tslot.qb:hover { border-color: var(--q); filter: brightness(1.15); }
/* o escolhido mantem a cor da raridade e ganha um anel dourado por fora */
.tslot.qb.on { border-color: var(--q); background: color-mix(in srgb, var(--q) 14%, #0c0e17); box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(255, 203, 5, .35), inset 0 0 10px color-mix(in srgb, var(--q) 30%, transparent); }
.tslot.qb.q8, .tslot.qb.q9 { box-shadow: 0 0 10px color-mix(in srgb, var(--q) 55%, transparent), inset 0 0 10px color-mix(in srgb, var(--q) 30%, transparent); }
.tbig.qb { border: 2px solid var(--q); box-shadow: 0 0 14px color-mix(in srgb, var(--q) 35%, transparent); }
.trow .tp.qb { border-color: var(--q); }
body.teammin .trow .tp.qb { border-color: var(--q); }
/* cartao do treinador: o retrato do ativo com a cor da raridade */
#cardMon { position: relative; }
#cardMon .cq { position: absolute; left: 0; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); border-radius: 11px; border: 2px solid var(--q); pointer-events: none; box-shadow: 0 0 9px color-mix(in srgb, var(--q) 45%, transparent); }
#cardMon .pi { border-color: transparent; box-shadow: inset 0 0 10px rgba(0, 0, 0, .7); }
@media (max-width: 700px), (max-height: 600px) { #cardMon .cq { width: 38px; height: 38px; } }
@media (max-height: 600px) and (min-width: 701px) { #cardMon .cq { width: 36px; height: 36px; } }
body.cardmin #cardMon .cq { width: 32px; height: 32px; border-radius: 50%; }

/* ================= XP Share e Fortalecimento ================= */
.tslot em { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 7px; background: var(--accent); color: #151515; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.tsec.shr { border-color: #1d5f66; background: linear-gradient(160deg, #0e2126, #0d1220); }
.tsec.shr .tsech b { color: #5fe0f0; }
.lics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; margin-top: 10px; }
.lic { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #0f1220; }
.lic.on { border-color: #2fbf8f; background: linear-gradient(160deg, #10302a, #0f1a20); box-shadow: 0 0 12px rgba(47, 191, 143, .18); }
.lic.off { opacity: .92; }
.lich { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lich b { font-size: 13.5px; }
.lk { font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #5fe0f0; }
.lk.plus { color: #c9a3ff; }
.licf { margin-top: auto; }
.lon { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #3ddc84; }
.btn.dia { border-color: #7a4bd6; color: #e0d0ff; background: #241a3d; font-weight: 700; }
.shsel { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-top: 4px; background: #0b0e18; min-height: 46px; }
.shrule { margin-top: 10px; font-size: 12px; }
.tsec.ench { background: #10121c; }
.ehead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ebar { height: 7px; border-radius: 4px; background: #05060a; margin-top: 6px; overflow: hidden; }
.ebar i { display: block; height: 100%; background: linear-gradient(90deg, #f0a800, #ffe14d); border-radius: 4px; }
.ebadge { flex: none; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--accent); background: #241d0c; }
.estats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 6px; margin-bottom: 10px; }
.estats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: #0b0d15; }
.estats span { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); }
.estats b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.estats i { font-style: normal; color: #3ddc84; }
.ecost { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; background: #0b0d15; }
.ecost .cap { color: var(--dim); margin-bottom: 7px; }
.echips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.echip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 9px 2px 3px; border-radius: 999px; border: 1px solid; }
.echip img { width: 20px; height: 20px; image-rendering: pixelated; }
.echip.ok { border-color: #2f8f6a; color: #9ff0c8; background: #0f2a22; }
.echip.no { border-color: #8f2f3f; color: #ffb3bd; background: #2a1016; }
.echip.gold { padding-left: 9px; }
.ebtn { width: 100%; padding: 10px; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: 12px; border: 0; color: #1a1200; background: linear-gradient(180deg, #ffc93a, #e08a00); }
.ebtn:disabled { background: linear-gradient(180deg, #5a4416, #3d2c0a); color: #a08a55; cursor: not-allowed; }

/* ================= Tema das janelas (vale para todas) ================= */
#win { padding-left: var(--pad); padding-right: var(--pad); }
.winbox { max-width: 600px; background: linear-gradient(180deg, #141829, #0c0e17); border-radius: 18px; overflow: hidden; }
.winbox header { padding: 12px 14px 12px 16px; border-bottom: 1px solid rgba(201, 161, 59, .45); background: linear-gradient(180deg, rgba(255, 203, 5, .1), rgba(255, 203, 5, 0)); }
.winbox header > b { color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winbox header > b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 8px rgba(255, 203, 5, .7); vertical-align: 1px; }
.winbox header .btn { border-radius: 999px; font-weight: 700; padding: 4px 12px; }
#panel { padding: 14px; scrollbar-width: thin; scrollbar-color: #3a4266 transparent; }
#panel::-webkit-scrollbar { width: 8px; } #panel::-webkit-scrollbar-thumb { background: #3a4266; border-radius: 4px; } #panel::-webkit-scrollbar-track { background: transparent; }

/* titulos de secao: barra dourada a esquerda; o que vier depois do texto vai para a direita */
#panel h3, .modal h3 { justify-content: flex-start; gap: 8px; margin: 14px 0 8px; font-size: 11.5px; letter-spacing: 1px; color: #cfd4ea; font-weight: 800; }
#panel h3:first-child { margin-top: 2px; }
#panel h3::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--accent); flex: none; }
#panel h3 > :last-child { margin-left: auto; }
#panel h3 > span { color: var(--dim); font-weight: 600; letter-spacing: .3px; text-transform: none; font-size: 11px; text-align: right; }

.hint { background: rgba(95, 182, 255, .06); border-left: 3px solid #3a78c9; border-radius: 0 10px 10px 0; padding: 8px 11px; margin: 0 0 10px; line-height: 1.45; font-size: 11.5px; }
.card .hint, .tsec .hint, .modal .hint { background: none; border: 0; padding: 0; }

.card { background: linear-gradient(160deg, #1a2036, #121625); border-radius: 14px; padding: 11px 12px; margin-bottom: 9px; transition: border-color .12s; }
.card:hover { border-color: #46507a; }
.card.active { border-color: var(--accent); box-shadow: 0 0 12px rgba(255, 203, 5, .16); }
.card.active:hover { border-color: var(--accent); }
.title { font-weight: 700; }
.tag { border-radius: 999px; padding: 1px 7px; font-size: 9.5px; letter-spacing: .3px; }

.item { padding: 8px 4px; gap: 10px; border-bottom-color: rgba(47, 53, 80, .7); border-radius: 8px; transition: background .12s; }
.item:hover { background: rgba(255, 255, 255, .03); }
.item > img, .item > .pi { width: 38px; height: 38px; padding: 4px; border-radius: 10px; background: #0a0c14; border: 1px solid var(--line); }
.item > img.pi { padding: 2px; }

.btn { border-radius: 10px; font-weight: 600; transition: border-color .12s, filter .12s, transform .08s; }
.btn:not([disabled]):active { transform: translateY(1px); }
.btn.pri { background: linear-gradient(180deg, #4f8dff, #2f63e0); border-color: #6fa2ff; color: #fff; font-weight: 700; box-shadow: 0 2px 10px rgba(59, 108, 240, .35); }
.btn.pri:not([disabled]):hover { filter: brightness(1.12); border-color: #9fc0ff; }
.btn.warn { background: linear-gradient(180deg, #b93434, #7f1d1d); }
.btn.sm { border-radius: 9px; padding: 4px 9px; }
.btn[disabled] { opacity: .4; box-shadow: none; }
.acts { gap: 7px; }

/* abas internas: controle segmentado, a ativa em dourado */
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 12px; background: #090b13; border: 1px solid var(--line); border-radius: 14px; }
.subtabs .btn { flex: 1 1 auto; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); box-shadow: none; }
.subtabs .btn:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.subtabs .btn.pri { background: linear-gradient(180deg, #ffd84a, #e0a800); color: #171200; box-shadow: 0 2px 10px rgba(224, 168, 0, .3); filter: none; }
.chips .btn.sm { border-radius: 999px; }

select, #panel input[type=text], #panel input:not([type]), .login input { border-radius: 10px; padding: 8px 10px; background: #0a0c14; }
select:focus, #panel input:focus, .login input:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
label.opt { cursor: pointer; line-height: 1.35; }
textarea { border-radius: 10px; }

.week > div { background: #0c0e17; border-radius: 10px; padding: 7px 2px; }
.week .on { background: #2a2413; }
.grid4 > div, .grid5 > div, .stats div { background: #0c0e17; border: 1px solid var(--line); border-radius: 10px; }
.dex { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.dex .cell { border-radius: 11px; background: #0c0e17; transition: border-color .12s, transform .12s; }
.dex .cell[data-act]:hover { transform: translateY(-2px); }
.dex .cell.c { border-color: #2fbf8f; background: #0f211c; }
.modal { background: linear-gradient(180deg, #141829, #0c0e17); border-radius: 18px; }
#toast { background: linear-gradient(180deg, #1a2036, #0c0e17); box-shadow: 0 6px 20px rgba(0, 0, 0, .6); }
.rankrow, .wtable table { border-radius: 10px; }

/* ---- Loja: produtos em cartoes ---- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: 9px; margin-bottom: 4px; }
.prod { display: flex; flex-direction: column; gap: 7px; padding: 11px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, #1a2036, #10131f); transition: border-color .12s, transform .12s; }
.prod:hover { border-color: var(--gold); transform: translateY(-2px); }
.prod .dicon { width: 46px; height: 46px; }
.prod .dicon img { width: 32px; height: 32px; }
.prod .title { font-size: 13.5px; }
.pprice { display: inline-flex; align-items: center; gap: 5px; color: #f2d377; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.prod .ddesc { min-height: 0; }
.pbuy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: auto; }
.pbuy .btn { background: #262b40; font-weight: 800; }
.pbuy .btn:not([disabled]):hover { border-color: var(--accent); color: var(--accent); }

/* ---- Depot: retratos na grade, com nivel e fortalecimento ---- */
.btile.mon { border: 2px solid var(--q); padding-bottom: 4px; box-shadow: inset 0 0 10px color-mix(in srgb, var(--q) 20%, transparent); }
.btile.mon.on { border-color: var(--q); box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(255, 203, 5, .3); }
.btile.mon.un .pi { filter: grayscale(.8) brightness(.7); }
.btile.mon .pi { width: auto; height: auto; max-width: 70%; max-height: 70%; }
.btile.mon em { position: absolute; left: 4px; top: 3px; font-style: normal; font-size: 9px; font-weight: 800; color: var(--accent); text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.btile.mon s { position: absolute; right: 4px; bottom: 3px; text-decoration: none; font-size: 9.5px; font-weight: 800; color: var(--good); text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.btn.pri.sm { padding: 4px 10px; }

/* ---------- Passe de Batalha ---------- */
.passhd { border-color: #6a5220; background: linear-gradient(160deg, #2a2413, #121625); }
.plvl { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(180deg, #ffd84a, #e0a800); color: #171200; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.plvl span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.plvl b { font-size: 22px; }
.ptrack { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.prow { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 5px; align-items: stretch; opacity: .55; }
.prow.on { opacity: 1; }
.prow .pn { display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #0c0e17; border: 1px solid var(--line); font-size: 12px; }
.prow.on .pn { background: linear-gradient(180deg, #ffd84a, #e0a800); color: #171200; border-color: transparent; }
.pcell { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 7px; border-radius: 10px; background: #12141f; border: 1px solid var(--line); font-size: 11px; line-height: 1.2; }
.pcell img { width: 26px; height: 26px; flex: 0 0 auto; image-rendering: pixelated; }
.pcell .grow { min-width: 0; overflow-wrap: anywhere; }
.pcell.prem { border-color: #5b4a1c; background: #1c1810; }
.pcell.rdy { border-color: var(--accent); box-shadow: 0 0 8px rgba(255, 203, 5, .3); }
.pcell.got { opacity: .55; }
.pcell.lock span { opacity: .6; }
.pcell i { font-style: normal; flex: 0 0 auto; color: var(--good); }
.pcell .btn { flex: 0 0 auto; padding: 4px 7px; }
.pgold { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe680, #c98d00); color: #4a3200; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.psrc { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 12px; }
.psrc div { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.psrc b { color: var(--accent); }
@media (max-width: 420px) { .pcell { flex-wrap: wrap; } .pcell .btn { width: 100%; } }

/* ---------- trava de pokemon ---------- */
.tslot.lk::before, .btile.mon.lk::before { content: '🔒'; position: absolute; top: 2px; font-size: 10px; line-height: 1; z-index: 2; filter: drop-shadow(0 0 2px #000); }
.tslot.lk::before { left: 3px; }
.btile.mon.lk::before { right: 3px; }

/* ---------- golpes ainda bloqueados na ficha ---------- */
.tmv.off { opacity: .5; }
.tmv.off .title .tag { font-size: 9px; }

/* ---------- Liga PvP ---------- */
.plvl.pvpt b { font-size: 15px; text-transform: uppercase; }
.plvl.pvpt.sm { width: 38px; height: 38px; border-radius: 10px; }
.plvl.pvpt.sm b { font-size: 11px; }
.pvpt.t0 { background: linear-gradient(180deg, #d99a66, #9a5a2c); color: #2a1404; }
.pvpt.t1 { background: linear-gradient(180deg, #e8edf5, #9aa6b8); color: #1c232e; }
.pvpt.t2 { background: linear-gradient(180deg, #ffd84a, #e0a800); color: #171200; }
.pvpt.t3 { background: linear-gradient(180deg, #9ff0e4, #3fae9e); color: #062a25; }
.pvpt.t4 { background: linear-gradient(180deg, #a9d4ff, #4f8fe6); color: #06172e; }
.pvpt.t5 { background: linear-gradient(180deg, #e3a6ff, #9a4fe6); color: #1c0630; }
.item.cur { background: rgba(255, 203, 5, .06); border-radius: 10px; }

/* ---------- avisos do servidor e Nurse Joy ---------- */
#announce { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(var(--th, 52px) + 62px + env(safe-area-inset-top, 0px)); width: max-content; max-width: min(620px, calc(100vw - 20px));
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(180deg, #171b2c, #0d101b); border: 1.5px solid #c9982a; box-shadow: 0 6px 22px rgba(0, 0, 0, .55), 0 0 14px rgba(224, 168, 0, .22); font-size: 12px; line-height: 1.3; }
#announce .aico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #0a0c14; border: 1px solid #3a4060; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--accent); font-size: 18px; }
#announce .aico img, #announce .aico .pi { max-width: 30px; max-height: 30px; image-rendering: pixelated; }
#announce .grow { min-width: 0; }
#announce .atag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: linear-gradient(180deg, #ffd84a, #e0a800); color: #171200; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; vertical-align: 1px; }
#announce .attl { color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
#announce .atxt { overflow-wrap: anywhere; }
#announce .acl { flex: 0 0 auto; background: none; border: 0; color: var(--dim); font-size: 16px; cursor: pointer; padding: 0 2px; }
#announce.kshiny { border-color: #ffe14d; } #announce.kmega { border-color: #c58bff; } #announce.kraid { border-color: #ff8a5c; }
@media (max-width: 520px) { #announce { border-radius: 16px; padding: 7px 9px; gap: 8px; font-size: 11px; width: calc(100vw - 20px); } }
.modal.nurse { max-width: 380px; text-align: left; }
.modal.nurse h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }

/* ---------- Ditto ---------- */
.dmem { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.dchip { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 7px; border-radius: 10px; background: #12141f; border: 1px solid var(--line); font-size: 12px; }
.dchip.on { border-color: #b45fd6; box-shadow: 0 0 8px rgba(180, 95, 214, .35); }
.dchip .pi { width: 26px; height: 26px; flex: 0 0 auto; }
.dchip span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dchip .btn { flex: 0 0 auto; padding: 4px 7px; }

/* ---------- evento do dia ---------- */
#zonePill .evt { font-style: normal; color: var(--accent); font-weight: 800; }

/* ---------- Power nas listas ---------- */
.btile.mon .topm { position: absolute; left: 4px; bottom: 3px; text-decoration: none; font-size: 11px; line-height: 1; color: #ffe14d; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.sub .pw { color: var(--accent); }

/* ---------- chat no HUD ---------- */
#chatDock { position: static; width: clamp(200px, 19vw, 256px); padding: 7px 9px 8px; display: flex; flex-direction: column; gap: 5px; flex: 0 1 auto; min-height: 0; overflow: hidden; }
#chatDock[hidden] { display: none; }
#chatDock .dhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#chatDock .dhead b { cursor: pointer; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dockMin { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
#dockMin:hover { color: var(--text); }
#dockLog { max-height: 124px; min-height: 0; overflow-y: auto; font-size: 11.5px; line-height: 1.3; scrollbar-width: thin; }
#dockLog div { overflow-wrap: anywhere; padding: 1px 0; }
#dockLog b { color: #8fd3ff; margin-right: 4px; }
#dockLog .sys b { color: var(--accent); }
#chatDock .drow { display: flex; gap: 5px; flex: none; }
#dockIn { flex: 1 1 auto; min-width: 0; margin: 0; padding: 5px 8px; font-size: 11.5px; background: #0d0f17; color: var(--text); border: 1px solid var(--line); border-radius: 8px; outline: none; }
#dockIn:focus { border-color: var(--accent); }
#dockIn::placeholder { color: var(--dim); }
#chatDock .drow .btn { flex: none; padding: 4px 9px; }
#chatDock.min #dockLog, #chatDock.min .drow { display: none; }
/* some onde a caixa de abates tambem some: telas estreitas ou baixas */
@media (max-width: 700px), (max-height: 600px) { #chatDock { display: none !important; } }
@media (max-width: 1240px) and (max-height: 820px) { #chatDock { display: none !important; } }

/* ---------- perfil de jogador ---------- */
.modal.prof { max-width: 420px; text-align: left; }
.modal.prof .tslot .plv { position: absolute; left: 4px; top: 3px; font-size: 9px; font-weight: 800; color: var(--accent); text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.pstats { margin: 4px 0 10px; }
.rankrow .title a { cursor: pointer; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--dim); }
.rankrow .title a:hover { color: var(--accent); border-color: var(--accent); }

/* ================= Desenho 2: pecas com cantos em L, barra de cima suspensa, doca de medalhoes =================
   So a FORMA muda. As cores (dourado sobre azul-escuro) e o lugar de cada coisa continuam os mesmos. */

/* ---- placas: dois cantos vivos com cantoneira dourada, dois cantos arredondados ---- */
.box {
  border: 1px solid rgba(201, 161, 59, .38); border-radius: 3px 15px 3px 15px;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 18px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 2px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 18px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 2px 18px no-repeat,
    var(--glass);
}
.btn { border-radius: 3px 9px 3px 9px; }
.btn.sm { border-radius: 2px 8px 2px 8px; }
.card { border-radius: 3px 13px 3px 13px; }
.tag { border-radius: 2px 7px 2px 7px; }
.subtabs { border-radius: 3px 13px 3px 13px; }
.subtabs .btn { border-radius: 2px 9px 2px 9px; }

/* ---- barra de cima: aba suspensa presa ao topo, com itens em texto separados por fios ---- */
#hud #topbar {
  top: 0; gap: 0; padding: calc(4px + env(safe-area-inset-top, 0px)) 8px 5px; border-top: 0; border-radius: 0 0 18px 18px;
  background:
    linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(11, 13, 22, .97), rgba(24, 28, 46, .96));
}
#topbar button { background: none; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 7px 14px; font-size: 11px; letter-spacing: .9px; text-transform: uppercase; transition: color .12s, box-shadow .12s; }
#topbar button:hover { border-color: var(--line); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
#topbar button:nth-last-child(2) { border-right: 0; }
#topbar button.dot::after { top: 3px; right: 3px; }
#topbar #topToggle { margin-left: 6px; border: 1px solid var(--gold); border-radius: 2px 8px 2px 8px; padding: 5px 9px; background: #3a2f10; }
#topbar #topToggle:hover { box-shadow: none; }

/* ---- nome da hunt: etiqueta inclinada ---- */
#zonePill { border-radius: 3px; background: linear-gradient(var(--accent), var(--accent)) left top / 4px 100% no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 4px 100% no-repeat, var(--glass); }
/* a inclinacao so entra em tela grande: em tela pequena a etiqueta fica reta para nao encostar no cartao */
@media (min-width: 1041px) and (min-height: 601px) {
  #zonePill { transform: translateX(-50%) skewX(-12deg); padding: 5px 22px; }
  #zonePill > * { transform: skewX(12deg); }
  #zonePill > span { display: inline-block; }
}

/* ---- doca: medalhoes redondos, com o Jogar maior e levantado ---- */
#bottom { border-radius: 3px 3px 0 0; background: linear-gradient(var(--accent), var(--accent)) center top / 44% 2px no-repeat, var(--glass); }
#tabs { align-items: flex-end; gap: 6px; }
#tabs button, #tabs button.main { overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 2px; gap: 4px; transform: none; }
#tabs button:hover, #tabs button.main:hover { transform: none; }
#tabs button svg { box-sizing: border-box; width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2c3350, #121525); border: 1px solid var(--line); transition: transform .12s, border-color .12s, box-shadow .12s; }
#tabs button:hover svg { border-color: var(--gold); transform: translateY(-2px); }
#tabs button.on { box-shadow: none; }
#tabs button.on svg { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 203, 5, .35); }
#tabs button.main { color: var(--accent); }
#tabs button.main svg { width: 58px; height: 58px; padding: 13px; margin-top: -20px; background: radial-gradient(circle at 35% 30%, #ffe680, #b8902c 72%); border: 2px solid #fff3a0; color: #2a1d00; box-shadow: 0 4px 14px rgba(201, 161, 59, .5), 0 0 0 4px rgba(11, 13, 22, .9); }
#tabs button.main.on svg { color: #2a1d00; border-color: #fff; }
#tabs button.dot::after { top: -1px; right: 8px; }
#botToggle { border-radius: 2px 8px 0 0; }
@media (max-width: 700px) {
  #tabs { gap: 2px; }
  #tabs button, #tabs button.main { padding: 0 0 1px; transform: none; }
  #tabs button svg { width: clamp(28px, 9vw, 38px); height: clamp(28px, 9vw, 38px); padding: clamp(5px, 1.9vw, 8px); }
  #tabs button.main svg { width: clamp(38px, 12vw, 50px); height: clamp(38px, 12vw, 50px); padding: clamp(8px, 2.6vw, 11px); margin-top: -12px; }
  #tabs button.dot::after { right: 1px; }
}
@media (max-height: 600px) {
  #tabs button, #tabs button.main { padding: 0; }
  #tabs button svg { width: 32px; height: 32px; padding: 7px; }
  #tabs button.main svg { width: 40px; height: 40px; padding: 9px; margin-top: -6px; }
}

/* ---- aviso de abate: bilhete com faixa, retratos e tres colunas de ganho ---- */
#killbox { padding: 0; overflow: hidden; border-radius: 3px 15px 3px 15px; background: var(--glass); border-left: 3px solid var(--accent); }
#killbox .khead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px 5px 9px; background: linear-gradient(100deg, rgba(255, 203, 5, .2) 0 58%, transparent 58.5%); border-bottom: 1px solid var(--line); }
#killbox .khead b { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); }
#killbox .khead i { font-style: normal; font-weight: 800; font-size: 15px; line-height: 1; color: var(--text); }
#killbox .kmons { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 9px 0; }
#killbox .kmons span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 2px; border-radius: 2px 9px 2px 9px; background: #0c0e17; border: 1px solid var(--line); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#killbox .kstats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 7px 9px 0; background: var(--line); border: 1px solid var(--line); }
#killbox .kst { background: #0c0e17; padding: 4px 7px 5px; min-width: 0; }
#killbox .kst.wide { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
#killbox .kst span { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); }
#killbox .kst b { display: block; font-size: 13px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#killbox .kst.exp b { color: var(--good); } #killbox .kst.mon b { color: #8fd3ff; } #killbox .kst.gold b { color: #f2d377; }
#killbox .kst small { display: block; line-height: 1.1; }
#killbox .drops { padding: 6px 9px 8px; margin: 0; }
#killbox .kstats + .kend { height: 8px; }

/* ================= Barra unica no alto =================
   A doca de baixo saiu: atalhos, Jogar e menus ficam numa barra so, presa ao topo, em blocos de icone + rotulo.
   A altura dela vira --th (medida pelo ui2.js); embaixo sobram os golpes e a captura. */
:root { --tw: 62px; }
#hud #topbar { top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 0; padding: calc(2px + env(safe-area-inset-top, 0px)) 6px 0; max-width: calc(100vw - 2 * var(--pad)); overflow: visible; border-top: 0; border-radius: 0 0 16px 16px;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat, linear-gradient(180deg, rgba(11, 13, 22, .97), rgba(24, 28, 46, .96)); }
#topbar .tb { position: relative; flex: none; width: var(--tw); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 7px; background: none; border: 0; border-right: 1px solid rgba(47, 53, 80, .75); border-radius: 0; box-shadow: none;
  font-size: 8.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #c3c8e0; white-space: nowrap; cursor: pointer; transition: color .12s, background .12s; }
#topbar .tb span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#topbar .tb.drop span::after { content: ' ▾'; color: var(--accent); }
#topbar .tb svg { width: 24px; height: 24px; color: #e6e9f7; flex: none; transition: color .12s, transform .12s; }
#topbar .tb:hover { color: var(--accent); background: linear-gradient(180deg, rgba(255, 203, 5, .13), transparent); box-shadow: none; }
#topbar .tb:hover svg { color: var(--accent); transform: translateY(-1px); }
#topbar .tb.on { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
#topbar .tb.on svg { color: var(--accent); }
#topbar .tb.reston { color: var(--good); } #topbar .tb.reston svg { color: var(--good); }
#topbar .tb.dot::after { content: ''; position: absolute; top: 3px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; border: 2px solid #12141f; }
#topbar .tb:nth-last-child(2) { border-right: 0; }
/* Jogar: medalhao dourado que desce para fora da barra */
#topbar .tb.main { width: calc(var(--tw) + 14px); padding-top: 3px; margin-bottom: -20px; color: var(--accent); gap: 2px; z-index: 1; }
#topbar .tb.main svg { box-sizing: border-box; width: 54px; height: 54px; padding: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe680, #b8902c 72%); border: 2px solid #fff3a0; color: #2a1d00; box-shadow: 0 4px 14px rgba(201, 161, 59, .5), 0 0 0 4px rgba(11, 13, 22, .92); }
#topbar .tb.main:hover { background: none; } #topbar .tb.main:hover svg { color: #2a1d00; transform: translateY(1px) scale(1.04); }
#topbar .tb.main.on { box-shadow: none; } #topbar .tb.main.on svg { color: #2a1d00; border-color: #fff; }
#topbar .tb.main span { padding: 0 7px; border-radius: 2px 7px 2px 7px; background: rgba(11, 13, 22, .92); border: 1px solid rgba(201, 161, 59, .5); line-height: 1.5; }
/* seta de esconder a barra: alca pendurada embaixo, a direita */
#hud #topbar #topToggle { position: absolute; right: 10px; bottom: -15px; margin: 0; width: 40px; height: 15px; padding: 0; line-height: 12px; font-size: 9px; border-radius: 0 0 9px 9px; border-top: 0; }
body.notop #hud #topbar { left: 12px; transform: none; padding: 3px; background: var(--glass); border-radius: 3px 10px 3px 10px; border-top: 1px solid rgba(201, 161, 59, .38); }
body.notop #hud #topbar #topToggle { position: static; width: auto; height: auto; padding: 5px 9px; line-height: inherit; border-radius: 2px 8px 2px 8px; border-top: 1px solid var(--gold); }
/* o nome da hunt desce um pouco para nao ficar atras do medalhao */
#zonePill { top: calc(var(--th) + 28px + env(safe-area-inset-top, 0px)); }
body.notop #zonePill { top: calc(10px + env(safe-area-inset-top, 0px)); }
@media (max-width: 1100px) { :root { --tw: 54px; } #topbar .tb { font-size: 7.5px; letter-spacing: .2px; } }
/* tela estreita: a barra ocupa a largura toda e se divide em duas fileiras de 8; o Jogar deixa de sair para fora */
@media (max-width: 920px) {
  #hud #topbar { left: 0; right: 0; transform: none; max-width: none; flex-wrap: wrap; justify-content: center; padding: calc(2px + env(safe-area-inset-top, 0px)) 2px 2px; border-radius: 0 0 12px 12px; }
  #topbar .tb, #topbar .tb.main { width: 12.5%; padding: 5px 0 4px; margin: 0; border-right: 0; font-size: clamp(6px, 1.75vw, 8.5px); letter-spacing: 0; gap: 2px; }
  #topbar .tb svg { width: clamp(18px, 5.2vw, 24px); height: clamp(18px, 5.2vw, 24px); }
  #topbar .tb.main svg { width: clamp(26px, 7.4vw, 34px); height: clamp(26px, 7.4vw, 34px); padding: clamp(5px, 1.5vw, 7px); margin: -3px 0 -2px; box-shadow: 0 2px 8px rgba(201, 161, 59, .5); }
  #topbar .tb.main span { padding: 0; border: 0; background: none; line-height: inherit; }
  #topbar .tb.dot::after { right: 14%; }
  #zonePill { top: calc(var(--th) + 8px + env(safe-area-inset-top, 0px)); }
  #leftCol, #rightCol { top: calc(var(--th) + 60px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 920px) and (max-height: 600px) { #leftCol, #rightCol { top: calc(var(--th) + 40px + env(safe-area-inset-top, 0px)); } }

/* ---- embaixo: so a captura (e os golpes, que ja ficam acima dela) ---- */
#bottom { left: 0; right: 0; width: auto; margin: 0; transform: none; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; pointer-events: none; }
#bottom > * { pointer-events: auto; }
@media (max-width: 1240px) {
  #bottom { display: flex; justify-content: center; padding: 0 var(--pad) calc(6px + env(safe-area-inset-bottom, 0px)); }
  #capBox { padding: 5px 10px; border: 1px solid rgba(201, 161, 59, .38); border-radius: 3px 13px 3px 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    background: linear-gradient(var(--accent), var(--accent)) left top / 14px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 2px 14px no-repeat, var(--glass); }
  #catchBar { flex-wrap: nowrap; }
}
/* rotulos inteiros no desktop: o bloco cresce com o texto */
@media (min-width: 921px) { #topbar .tb { width: auto; min-width: var(--tw); padding-left: 7px; padding-right: 7px; } #topbar .tb.main { width: auto; min-width: calc(var(--tw) + 14px); } }
/* celular deitado: uma fileira so, apenas com os icones, para sobrar altura */
@media (max-width: 920px) and (max-height: 460px) {
  #hud #topbar { flex-wrap: nowrap; }
  #topbar .tb, #topbar .tb.main { width: 6.25%; padding: 4px 0 3px; }
  #topbar .tb span { display: none; }
  #topbar .tb.main svg { margin: -2px 0; }
  #leftCol, #rightCol { top: calc(var(--th) + 34px + env(safe-area-inset-top, 0px)); }
}
.pi.missing-icon { border:1px dashed var(--line); border-radius:8px; background:#0a0c14; color:var(--muted); font-weight:700; font-size:14px; }