/* view.css: ficha de inspecao (js/inspect.js) e opcoes de Exibicao (js/view.js). */

/* ---------- opcoes gerais escondendo partes do HUD ---------- */
body.vwNoMM #minimap { display: none !important; }
body.vwNoLB #lb { display: none !important; }
body.vwNoFeed #feed { display: none !important; }

/* ---------- botao Inspecionar no topo do HUD ---------- */
#btnInspect { position: relative; }
#btnInspect.on { border-color: var(--gold); color: var(--gold); }
@media (max-width: 440px) {
  /* celular estreito: os 7 botoes do topo cabem ao lado do minimapa */
  body.touch #topBtns { gap: 4px; }
  body.touch #topBtns .iconbtn { width: 33px; height: 33px; }
  body.touch #topBtns .iconbtn svg { width: 19px; height: 19px; }
}

/* ---------- ficha do Pokemon ---------- */
.insCard {
  position: fixed; left: 0; top: 0; z-index: 7; width: 256px; box-sizing: border-box; padding: 8px 9px 9px;
  background: rgba(18, 13, 40, 0.93); border: 2px solid color-mix(in srgb, var(--tc, #6b5cc8) 55%, #3c3170 45%); border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); color: var(--txt); font-size: 12px; line-height: 1.25; cursor: default;
  will-change: transform; animation: icIn 0.16s ease-out; touch-action: pan-y; user-select: none;
}
.insCard[hidden] { display: none; }
@keyframes icIn { from { opacity: 0; } to { opacity: 1; } }
.insCard.dock { left: 8px; right: 8px; top: 52px; width: auto; max-width: 520px; max-height: 46vh; overflow-y: auto; margin: 0 auto; }
.icHead { display: flex; align-items: center; gap: 7px; }
.icPort { width: 44px; height: 44px; flex: none; image-rendering: pixelated; }
.icId { flex: 1; min-width: 0; }
.icNmRow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.icName { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insCard.boss .icName { color: #ff8a7a; }
.icTag { flex: none; font-size: 10px; padding: 1px 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.12); color: var(--mut); }
.icTag.self { background: rgba(255, 216, 74, 0.2); color: var(--gold); }
.icTag.ally { background: rgba(95, 184, 255, 0.2); color: var(--blue); }
.icTag.enemy { background: rgba(255, 90, 90, 0.16); color: #ffb0b0; }
.icTag.boss { background: rgba(255, 58, 58, 0.3); color: #ffd0c8; }
.icForm { color: var(--mut); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icX { flex: none; align-self: flex-start; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--panel-b); background: rgba(40, 30, 90, 0.9); font-size: 17px; line-height: 1; padding: 0; }
.icX:hover { background: rgba(80, 64, 160, 0.95); }
.icLine { margin: 6px 0 4px; font-size: 11px; color: var(--mut); display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.icLine .cur { color: #fff; font-weight: 700; background: color-mix(in srgb, var(--tc, #6b5cc8) 35%, transparent); border-radius: 6px; padding: 0 5px; }
.icArr { font-style: normal; opacity: 0.7; }
.icTypes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.icTypes .tchip { cursor: pointer; }
.icEff { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 5px; font-size: 11px; color: var(--mut); }
.icEff b { font-size: 12px; }
.icEff .up b { color: #4cf070; } .icEff .down b { color: #ff5a5a; } .icEff .even b { color: #5fb8ff; }
.icBar { position: relative; height: 15px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); overflow: hidden; margin: 3px 0; border: 1px solid rgba(255, 255, 255, 0.1); }
.icBar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #5be37a, #2c9a48); }
.icBar.low > i { background: linear-gradient(180deg, #ff6a5a, #b52a2a); }
.icBar.mp > i { background: linear-gradient(180deg, #5fb8ff, #2a6fc0); }
.icBar.xp > i { background: linear-gradient(180deg, #ffe36a, #c79a1c); }
.icBar > span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 15px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); white-space: nowrap; }
.icRow { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--mut); margin: 2px 0 1px; }
.icShield { color: #a8dcff; }
.icSec { margin: 6px 0 3px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); opacity: 0.9; }
.icGear { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.icG { --rc: rgba(255, 255, 255, 0.25); display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 4px; border-radius: 8px; border: 1.5px solid var(--rc); background: color-mix(in srgb, var(--rc) 14%, rgba(0, 0, 0, 0.3)); }
.icG.empty { border-style: dashed; opacity: 0.6; }
.icG img { width: 22px; height: 22px; flex: none; image-rendering: pixelated; }
.icG.empty img { filter: grayscale(1) brightness(0.7); }
.icG span { min-width: 0; font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icG em { display: block; font-style: normal; font-size: 9px; color: var(--mut); }
.icSk { display: flex; flex-direction: column; gap: 3px; }
.icS { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.icS img { width: 22px; height: 22px; flex: none; }
.icS i { font-style: normal; font-weight: 700; font-size: 11px; width: 13px; text-align: center; color: #9fb0c8; }
.icS.t1 i { color: #4da3ff; } .icS.t2 i { color: #c45bff; }
.icS span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icS em { font-style: normal; font-size: 10px; color: var(--gold); flex: none; }
.icS.locked { opacity: 0.45; }
.icS.locked img { filter: grayscale(1); }
.icS em.lk { color: var(--mut); }
.icSt { display: flex; flex-wrap: wrap; gap: 4px; }
.icB { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; border-radius: 8px; border: 1.5px solid #7de88a; background: rgba(125, 232, 138, 0.12); font-size: 11px; }
.icB.bad { border-color: #ff6a5a; background: rgba(255, 106, 90, 0.12); }
.icB img { width: 16px; height: 16px; }
.icB b { font-size: 10px; color: var(--mut); }
.icNone { color: var(--mut); font-size: 11px; }
.icStats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 11px; }
.icStat { display: flex; justify-content: space-between; gap: 6px; color: var(--mut); min-width: 0; }
.icStat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.icStat b { color: #fff; flex: none; }
.icNote { margin-top: 6px; font-size: 10px; color: var(--mut); opacity: 0.85; }
/* celular: presa no alto, so na metade de cima (o seu Pokemon fica sempre no centro da tela) e com rolagem */
.insCard.dock { top: 50px; max-height: calc(50vh - 104px); padding: 6px 8px 7px; }
.insCard.dock .icPort { width: 36px; height: 36px; }
.insCard.dock .icLine { margin: 3px 0 2px; }
.insCard.dock .icBar { height: 13px; margin: 2px 0; }
.insCard.dock .icBar > span { line-height: 13px; font-size: 10px; }
.insCard.dock .icSec { margin: 4px 0 2px; }
.insCard.dock .icSk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insCard.dock .icS { gap: 1px 3px; padding: 2px 3px; flex-wrap: wrap; }
.insCard.dock .icS img { width: 18px; height: 18px; }
.insCard.dock .icS span { flex: 1 1 40px; }
.insCard.dock .icS em { flex-basis: 100%; font-size: 9px; padding-left: 2px; }
.insCard.dock .icG { padding: 1px 3px; }
.insCard.dock .icG img { width: 18px; height: 18px; }
.insCard.dock .icG em { display: none; }
.insCard.dock .icStats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px 8px; }

/* anel em volta do Pokemon inspecionado */
.insRing { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; border-radius: 50%; box-sizing: border-box; border: 2px dashed rgba(255, 226, 110, 0.9); box-shadow: 0 0 10px rgba(255, 226, 110, 0.45); animation: icPulse 1.2s ease-in-out infinite; }
.insRing[hidden] { display: none; }
@keyframes icPulse { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.5; } }

/* ---------- tela de Exibicao ---------- */
#viewBox { z-index: 38; }   /* acima do menu (20), da pausa (14) e da sala (35) */
#viewBox[hidden] { display: none; }
.viewBoxIn { width: min(460px, 94vw) !important; text-align: left !important; padding: 14px 16px 16px !important; box-sizing: border-box; }
.vbTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vbTop h2 { margin: 0 !important; color: var(--gold) !important; text-shadow: 0 3px 0 #6b4500 !important; font-size: 28px !important; }
.vbX { font-size: 22px; flex: none; }
.vbHelp { margin: 6px 0 10px; font-size: 13px; color: var(--mut); }
.vbTbl { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 14px; }
.vbTbl th, .vbTbl td { padding: 4px 4px; }
.vbTbl thead th { font-size: 13px; color: var(--gold); text-align: center; font-weight: 700; }
.vbTbl .vbK { text-align: left; font-weight: 400; color: var(--txt); white-space: nowrap; }
.vbTbl tbody tr { background: rgba(255, 255, 255, 0.04); }
.vbTbl tbody tr th { border-radius: 9px 0 0 9px; }
.vbTbl tbody tr td:last-child { border-radius: 0 9px 9px 0; }
.vbC { text-align: center; }
.vbNa { display: inline-block; width: 42px; height: 24px; box-sizing: border-box; vertical-align: middle; border-radius: 999px; border: 2px dashed rgba(180, 174, 212, 0.35); font-size: 0; }
.vbTbl.solo .vbG.ally, .vbTbl.solo .vbC.ally { opacity: 0.5; }
.vbHint { margin: 6px 0 4px; font-size: 12px; color: var(--mut); }
.vbGlbT { margin: 10px 0 4px; font-size: 13px; color: var(--gold); }
.vbGlb { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.vbGRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); font-size: 14px; cursor: pointer; }
.vbBtns { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.vbBtns .bigbtn { font-size: 20px; padding: 7px 30px; }
.vbBtns .btn2 { font-size: 15px; padding: 8px 14px; }
/* chave liga e desliga */
.vbSw { position: relative; width: 42px; height: 24px; border-radius: 999px; border: 2px solid var(--panel-b); background: rgba(8, 5, 24, 0.75); padding: 0; flex: none; vertical-align: middle; transition: background 0.15s, border-color 0.15s; }
.vbSw i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8d86b8; transition: transform 0.15s, background 0.15s; }
.vbSw.on { background: rgba(91, 227, 122, 0.3); border-color: #5be37a; }
.vbSw.on i { transform: translateX(18px); background: #5be37a; }
.vbSw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 420px) {
  .vbTbl { font-size: 12px; }
  .vbTbl th, .vbTbl td { padding: 4px 2px; }
  .vbTbl thead th { font-size: 12px; }
  .vbGlb { grid-template-columns: 1fr; }
  .vbSw { width: 38px; height: 22px; }
  .vbSw i { width: 14px; height: 14px; }
  .vbSw.on i { transform: translateX(16px); }
}

/* botao no menu (ao lado do som e do idioma) e na pausa */
.viewMenuBtn { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; padding: 8px 14px; }
.viewMenuBtn svg { width: 19px; height: 19px; flex: none; }