:root {
  --panel: #14180fee;
  --panel-line: #3a4426;
  --card: #232a1a;
  --card-hi: #2d371f;
  --bone: #d8cfae;
  --stencil: #ffd54a;
  --blood: #b83a2e;
  --acid: #8fd15f;
  --steel: #aab2bd;
  --ink: #171b12;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #111;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  /* o -webkit- não é redundante: sem ele o iOS ainda abre alça de seleção e
     lupa quando o polegar fica parado em cima de qualquer texto do HUD */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* dvh acompanha a barra de endereço do celular subindo e descendo; sem isso
   os painéis de tela cheia ficam com um pedaço embaixo do navegador */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
#game { display: block; cursor: crosshair; touch-action: none; }
/* o dedo rola painel, mas nunca a página: arrastar no mapa é controle de jogo */
#menu, #sala, #pause, #shopBody, #roomList, #mapaList, #deckGrade, #charPanel, #fimTD, #torrePanel, #adminAcesso, #adminArmas {
  touch-action: pan-y; -webkit-overflow-scrolling: touch;
}

.panel { position: absolute; color: #eee; }
.stencil { font-family: 'Arial Black', 'Trebuchet MS', sans-serif; text-transform: uppercase; letter-spacing: 2px; }

#topbar {
  top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); padding: 8px 22px; border-radius: 8px;
  font-size: 20px; font-weight: bold; letter-spacing: 1px; text-align: center;
  text-shadow: 1px 1px 2px #000; white-space: nowrap; pointer-events: none; z-index: 3;
}
#topbar .night { color: #ff5544; }
#topbar .boss { color: #ff8a3c; animation: bossPulse 1.1s ease-in-out infinite; }
@keyframes bossPulse { 50% { opacity: .45; } }
#topbar .day { color: var(--stencil); }

/* ---------- loja: caixa de suprimentos ---------- */
#shop {
  top: 58px; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; z-index: 4;
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  width: min(96vw, 556px);
  transition: opacity .14s, box-shadow .14s, width .14s;
}
/* Dois jeitos de recolher a loja, mesmo visual e regras diferentes:
   .building — automático ao escolher defesa (libera a visão do mapa); reabre no hover.
   .min      — o jogador clicou em minimizar; fica assim até ele mandar abrir. */
#shop.building:not(.consultando), #shop.min { box-shadow: none; width: min(80vw, 330px); }
#shop.building:not(.consultando) { opacity: .28; }
#shop.min { opacity: .62; } /* mais visível: o botão de reabrir precisa ser achável */
#shop.building:not(.consultando) #shopBody, #shop.min #shopBody { max-height: 0; padding: 0; overflow: hidden; }
#shop.building:not(.consultando) .tab, #shop.min .tab { padding: 3px 8px 2px; font-size: 9.5px; letter-spacing: 1px; }
#shop.building:not(.consultando):not(.min):hover { opacity: 1; width: min(96vw, 556px); box-shadow: 0 12px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
#shop.building:not(.consultando):not(.min):hover #shopBody { max-height: 66vh; padding: 10px 10px 18px; overflow-y: auto; }
#shop.building:not(.consultando):not(.min):hover .tab { padding: 9px 18px 7px; font-size: 12px; letter-spacing: 2px; }
#shop.building:not(.consultando):not(.min)::after {
  content: 'loja recolhida · passe o mouse pra abrir';
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 5px; font-size: 10px; letter-spacing: 1px; color: var(--bone);
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
#shop.building:not(.consultando):not(.min):hover::after { display: none; }
#shop.min::after {
  content: 'loja minimizada · B ou botão pra abrir';
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 5px; font-size: 10px; letter-spacing: 1px; color: var(--bone);
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
}

#shopMin {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: #8a9070; padding: 0 12px; font-size: 15px; line-height: 1;
  border-left: 1px solid var(--panel-line); font-family: inherit;
}
#shopMin:hover { color: var(--stencil); background: rgba(255,255,255,.05); }
#shopTabs { display: flex; border-bottom: 2px solid var(--panel-line); }
.tab {
  flex: 1; background: none; border: none; cursor: pointer;
  color: #8a9070; padding: 9px 18px 7px; font-size: 12px; font-weight: 900;
  font-family: 'Arial Black', sans-serif; text-transform: uppercase; letter-spacing: 2px;
  border-right: 1px solid var(--panel-line); white-space: nowrap;
  transition: padding .14s, font-size .14s, color .12s;
}
.tab:last-child { border-right: none; }
.tab:hover { color: var(--bone); }
.tab.on { color: var(--ink); background: var(--stencil); }
#shopBody { padding: 10px 10px 18px; overflow-y: auto; max-height: 66vh; scrollbar-width: thin; scrollbar-color: #4a5433 transparent; transition: max-height .14s, padding .14s; }
.sec { display: none; }
.sec.on { display: block; }
/* 4 colunas fixas: nos kits cada coluna é um slot (cabeça, peito, pernas, pés) */
.cardRow { display: grid; grid-template-columns: repeat(4, minmax(0, 122px)); gap: 8px; justify-content: center; }

/* fileira de kit: cabeçalho com pips de conjunto */
.setRow { margin-bottom: 10px; }
.setHead {
  display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 6px;
  border-left: 4px solid var(--set-cor, #666); padding-left: 8px;
}
.setHead b { color: var(--set-cor, #ccc); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-family: 'Arial Black', sans-serif; white-space: nowrap; }
.setHead .pips { display: flex; gap: 3px; }
.setHead .pip { width: 9px; height: 9px; border: 1px solid var(--set-cor, #666); transform: rotate(45deg); }
.setHead .pip.on { background: var(--set-cor, #666); }
.setHead small { color: #8a9070; font-size: 11px; }
.setHead small .live { color: var(--acid); font-weight: bold; }

/* card de item: etiqueta de caixa estampada */
.card {
  position: relative; padding: 6px 7px 20px; cursor: pointer;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 2px solid var(--panel-line); color: var(--bone);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  font-family: inherit; text-align: center;
  transition: transform .12s, border-color .12s, background .12s;
}
.card:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--stencil); background: linear-gradient(180deg, #333d24, #262e1c); }
.card:disabled { cursor: default; }
.card:disabled .cardIcon { filter: grayscale(.85) brightness(.6); }
.card:disabled .cardName { color: #6f755c; }
/* já é seu: continua vivo, não parece indisponível */
.card.owned .cardIcon, .card.equipped .cardIcon, .card.maxed .cardIcon { filter: none; }
.card.owned .cardName, .card.equipped .cardName, .card.maxed .cardName { color: var(--bone); }
.card.owned, .card.equipped { border-color: #55663a; background: linear-gradient(180deg, #2b3520, #202719); }
.card:focus-visible { outline: 2px solid var(--stencil); outline-offset: 2px; }
.cardIcon { width: 60px; height: 60px; display: block; margin: 0 auto 1px; pointer-events: none; }
.cardName { display: block; font-size: 11.5px; font-weight: bold; line-height: 1.12; min-height: 25px; }
.cardSub { display: block; font-size: 10px; color: #9aa382; line-height: 1.2; min-height: 23px; margin-top: 2px; }
.cardTag {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%) rotate(-2deg);
  background: var(--bone); color: #241f14; border: 1px solid #8f866a;
  font-family: 'Courier New', monospace; font-weight: bold; font-size: 11.5px;
  padding: 1px 7px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.card.noMoney .cardTag { background: #c9aaa6; color: #6b1410; text-decoration: line-through; }
.card.equipped .cardTag, .card.owned .cardTag { background: #c6dcae; color: #24401c; }
.stamp {
  position: absolute; top: 42px; left: 50%; transform: translateX(-50%) rotate(-11deg);
  border: 2px solid; padding: 1px 6px; font-size: 10.5px; font-weight: 900;
  font-family: 'Arial Black', sans-serif; letter-spacing: 1px; text-transform: uppercase;
  pointer-events: none; display: none; background: rgba(10,12,7,.72);
}
.card.owned .stamp { display: block; color: #6db2ff; border-color: #6db2ff; }
.card.equipped .stamp { display: block; color: var(--acid); border-color: var(--acid); }
.card.maxed .stamp { display: block; color: var(--stencil); border-color: var(--stencil); }
.card.selected { border-color: var(--stencil); animation: selPulse 1.1s infinite; }
@keyframes selPulse { 50% { box-shadow: 0 0 14px rgba(255,213,74,.5); } }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; animation: none !important; } }

/* nível das melhorias */
.lvlPips { display: flex; gap: 3px; justify-content: center; margin-top: 3px; }
.lvlPips i { width: 12px; height: 5px; background: #39422a; border: 1px solid #4a5433; }
.lvlPips i.on { background: var(--stencil); border-color: var(--stencil); }
#upgWeapon { text-align: center; color: #9aa382; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin: 2px 0 8px; }
#upgWeapon b { color: var(--bone); }
#upgWeapon.semUpg { color: #c8a04a; }
#upgWeapon.semUpg b { color: #ffd54a; }

/* ---------- ficha do personagem (E) ---------- */
#charPanel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: none; z-index: 6; color: var(--bone);
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 4px;
  box-shadow: 0 16px 60px rgba(0,0,0,.65);
  width: min(94vw, 560px);
}
#charHead {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--panel-line); padding: 8px 14px;
}
#charHead h2 { margin: 0; font-size: 15px; color: var(--stencil); font-family: 'Arial Black', sans-serif; letter-spacing: 3px; text-transform: uppercase; }
#charHead .hint { font-size: 11px; color: #8a9070; }
#charHead .hint b { color: var(--bone); border: 1px solid #555; border-radius: 3px; padding: 0 5px; }
#charBody { display: flex; gap: 12px; padding: 12px; }
#charLeft { text-align: center; }
#charView { width: 200px; height: 270px; background: radial-gradient(circle at 50% 30%, #262e1a, #0e120a 75%); border: 2px solid var(--panel-line); }
#charName { font-weight: 900; margin-top: 6px; font-size: 14px; color: var(--bone); }
#charLvl { font-size: 12px; color: var(--stencil); }
#charRight { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.statRow { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 2px; border-bottom: 1px dashed #333d24; }
.statRow span { color: #9aa382; }
.statRow b { color: var(--bone); font-family: 'Courier New', monospace; }
.statRow b .up { color: var(--acid); }
#charSlots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slotBox {
  border: 2px dashed #3a4426; padding: 4px 2px 5px; text-align: center; min-height: 74px;
  background: rgba(0,0,0,.25);
}
.slotBox.filled { border-style: solid; }
.slotBox img { width: 44px; height: 44px; display: block; margin: 0 auto; }
.slotBox .empty { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin: 0 auto; color: #4a5433; font-size: 22px; }
.slotBox small { display: block; font-size: 9px; color: #8a9070; text-transform: uppercase; letter-spacing: 1px; }
.slotBox .pname { display: block; font-size: 9.5px; color: var(--bone); line-height: 1.1; min-height: 21px; margin-top: 2px; }
.slotBox .tirar {
  display: block; width: 100%; margin-top: 3px; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  color: #ffd54a; background: rgba(0,0,0,.45); border: 1px solid #5a4a1e; border-radius: 3px;
}
.slotBox .tirar:hover:not(:disabled) { background: #3a2f10; color: #fff; }
.slotBox .tirar:disabled { color: #6a6a5a; border-color: #333; cursor: default; }
@media (max-width: 520px) {
  #charBody { flex-direction: column; align-items: center; }
  #charRight { width: 100%; }
}
#charSets { font-size: 11px; }
#charSets .setLine { border-left: 3px solid var(--set-cor, #555); padding: 2px 0 2px 8px; margin-bottom: 4px; color: #9aa382; }
#charSets .setLine b { color: var(--set-cor, #ccc); }
#charSets .setLine .ok { color: var(--acid); }

/* ---------- HUD ---------- */
#hud { left: 14px; bottom: 14px; pointer-events: none; }
#xpRow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#lvlTag { color: var(--stencil); font-weight: bold; font-size: 15px; text-shadow: 1px 1px 2px #000; min-width: 42px; }
#xpBar { width: 172px; height: 9px; background: #222; border: 2px solid #000; border-radius: 5px; overflow: hidden; }
#xpFill { height: 100%; width: 0%; background: linear-gradient(#ffe082, #d4a017); transition: width .2s; }
#hpBar { width: 220px; height: 18px; background: #222; border: 2px solid #000; border-radius: 5px; overflow: hidden; }
#hpFill { height: 100%; width: 100%; background: linear-gradient(#5fd15f, #3a9e3a); transition: width .15s; }
#hudInfo { margin-top: 6px; font-size: 18px; font-weight: bold; text-shadow: 1px 1px 2px #000; }
#money { color: var(--acid); }
#kills { color: #bbb; font-size: 14px; margin-left: 12px; }
.hudKey { color: #8a9070; font-size: 12px; margin-left: 12px; font-weight: normal; }
.hudKey b { border: 1px solid #555; border-radius: 3px; padding: 0 4px; color: #ccc; }
#weapons { display: flex; gap: 6px; margin-top: 8px; pointer-events: auto; }
.wslot {
  position: relative;
  background: rgba(0,0,0,.6); border: 2px solid #444; border-radius: 6px;
  padding: 4px 10px; font-size: 13px; cursor: pointer; color: #ddd;
  display: grid; grid-template-columns: auto 1fr; align-items: center; min-width: 112px;
}
.wslot.sel { border-color: var(--stencil); color: var(--stencil); }
.wslot.vazio { opacity: .55; cursor: default; }
.wslot b { margin-right: 5px; color: #888; }
.wslot.sel b { color: var(--stencil); }
.wslot .wAmmo { grid-column: 1 / -1; display: block; color: var(--acid); font-size: 9px; letter-spacing: 1px; min-height: 10px; }
.wslot.recarregando { overflow: hidden; }
.wslot.recarregando::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px;
  width: var(--recarga); background: var(--stencil); transition: width .08s linear;
}
.wslot.pouca .wAmmo { color: #ff765f; }

#ammoQuick {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(126,136,99,.65);
  pointer-events: auto;
}
#ammoQuick[hidden], #ammoQuick button[hidden] { display: none; }
#ammoQuick header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px; color: #9da488; font-size: 8px; letter-spacing: 1.6px;
}
#ammoQuick header small { color: #737965; font-size: 7px; }
.aqAcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.aqAcoes.uma { grid-template-columns: 1fr; }
.aqAcoes button {
  position: relative; min-height: 44px; padding: 5px 78px 5px 8px; overflow: hidden;
  border: 1px solid #596055; border-left: 3px solid var(--acid); border-radius: 1px;
  background:
    linear-gradient(135deg, rgba(162,191,115,.12), transparent 55%),
    rgba(21,25,20,.96);
  color: var(--bone); font: inherit; text-align: left; cursor: pointer;
}
.aqAcoes button:hover:not(:disabled), .aqAcoes button:focus-visible {
  border-color: var(--stencil); outline: 2px solid rgba(231,185,68,.28); outline-offset: 1px;
  background: linear-gradient(135deg, rgba(231,185,68,.15), transparent 60%), #20251f;
}
.aqSlot, .aqNome, .aqEstado { display: block; }
.aqSlot { color: #8e947d; font-size: 7px; letter-spacing: 1.2px; }
.aqNome { margin-top: 1px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 14px; letter-spacing: .6px; }
.aqEstado { margin-top: 1px; color: #9ca38c; font-size: 8px; letter-spacing: .2px; }
.aqPreco {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  padding: 5px 7px; border: 1px solid #72795c; background: #252b20;
  color: var(--acid); font-size: 10px; font-weight: bold; white-space: nowrap;
}
.aqAcoes button:active:not(:disabled) { transform: translateY(1px); }
.aqAcoes button:disabled { cursor: not-allowed; opacity: .48; border-left-color: #745044; }
.aqAcoes button.semDinheiro .aqPreco { color: #d68470; border-color: #745044; }

#crosshair {
  display: none; position: fixed; left: 50%; top: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); z-index: 4; pointer-events: none;
}
body.fps #crosshair { display: block; }
#crosshair::before, #crosshair::after {
  content: ''; position: absolute; background: rgba(255,255,255,.9); box-shadow: 0 0 2px #000;
}
#crosshair::before { width: 18px; height: 2px; left: 0; top: 8px; }
#crosshair::after { width: 2px; height: 18px; left: 8px; top: 0; }

.arsenalTitulo {
  color: var(--stencil); font-size: 10px; font-weight: bold; letter-spacing: 2px;
  margin: 8px 2px 4px; text-transform: uppercase;
}
.varianteArma {
  position: absolute; left: 4px; right: 4px; top: 4px; z-index: 2;
  color: #b8c998; font-size: 8px; letter-spacing: .5px; text-align: left;
}
.varianteArma.off { color: #777; pointer-events: none; }
.municaoRow .card { border-color: #6c6334; }
.card.equipped { border-color: var(--stencil); box-shadow: inset 0 0 0 1px #9d8d3a; }

#perks {
  position: absolute; bottom: 124px; left: 50%; transform: translateX(-50%);
  width: min(94vw, 1040px); padding: 0; display: none; z-index: 5;
  color: var(--ztd-text-primary); text-align: left;
  border: 1px solid var(--ztd-olive-light); border-left: 5px solid var(--ztd-orange);
  border-radius: 1px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 7px 100%,
    linear-gradient(120deg, rgba(85,99,59,.15), transparent 38%),
    rgba(13,14,12,.97);
  box-shadow: 0 18px 50px rgba(0,0,0,.62), inset 0 0 0 1px rgba(0,0,0,.8);
  animation: perkEntrada 220ms cubic-bezier(.2,.8,.2,1) both;
}
#perks::after {
  content: ''; position: absolute; inset: 5px; z-index: -1; pointer-events: none;
  border: 1px dashed rgba(199,183,142,.16);
}
.perkHead {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: stretch;
  min-height: 92px; border-bottom: 1px solid var(--ztd-border);
}
.perkPatente {
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: center;
  padding: 12px 14px 10px; color: var(--ztd-black); background: var(--ztd-orange);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.perkPatente span, .perkPatente small { font: 700 8px/1 'Raleway', sans-serif; letter-spacing: 1.6px; }
.perkPatente strong {
  grid-row: 2; grid-column: 1; align-self: center; justify-self: center; margin: 2px 0;
  font: 400 50px/.78 'Bebas Neue', Impact, sans-serif; letter-spacing: 0;
}
.perkPatente small { align-self: end; }
.perkCabecalho { align-self: center; padding: 13px 18px 10px 12px; }
.perkEyebrow { color: var(--ztd-orange); font-size: 8px; font-weight: 700; letter-spacing: 2px; }
#perkTitle { margin: 3px 0 0; color: var(--ztd-sand-light); font-size: 28px; line-height: 1; text-shadow: 2px 2px 0 #000; }
#perkInstrucao { margin: 5px 0 0; color: var(--ztd-text-muted); font-size: 11px; }
#perkPending {
  display: flex; align-items: center; gap: 8px; align-self: center; margin-right: 24px;
  padding: 7px 10px; border: 1px solid var(--ztd-olive-light); background: rgba(53,61,39,.6);
}
#perkPending strong { color: var(--ztd-orange); font: 400 28px/1 'Bebas Neue', Impact, sans-serif; }
#perkPending span { color: var(--ztd-sand); font-size: 7px; font-weight: 700; line-height: 1.35; letter-spacing: 1.2px; white-space: pre-line; }
.perkRow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 10px; }
.perkBtn {
  --perk-cor: var(--ztd-orange); position: relative; min-height: 116px; overflow: hidden;
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: 1fr auto; gap: 5px 10px;
  padding: 14px 12px 10px; color: var(--ztd-text-primary); text-align: left; cursor: pointer;
  border: 1px solid var(--ztd-border); border-top: 3px solid var(--perk-cor); border-radius: 1px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  background: linear-gradient(145deg, rgba(85,99,59,.2), transparent 58%), var(--ztd-surface-2);
}
.perkBtn[data-perk='speed'] { --perk-cor: var(--ztd-sand); }
.perkBtn[data-perk='hp'] { --perk-cor: #a64b39; }
.perkBtn[data-perk='light'] { --perk-cor: var(--ztd-olive-light); }
.perkBtn:hover, .perkBtn:focus-visible { border-color: var(--perk-cor); background-color: var(--ztd-surface-3); transform: translateY(-2px); }
.perkBtn:disabled { opacity: .42; cursor: default; filter: saturate(.45); }
.perkBtn:disabled:hover { border-color: var(--ztd-border); background-color: var(--ztd-surface-2); transform: none; }
.perkBtn kbd {
  position: absolute; top: 8px; right: 8px; min-width: 22px; padding: 3px 4px;
  color: var(--ztd-black); border: 0; border-radius: 1px; background: var(--perk-cor);
  font: 700 10px/1 'Raleway', sans-serif; text-align: center;
}
.perkIcone {
  display: grid; width: 42px; height: 42px; place-items: center; align-self: center;
  color: var(--perk-cor); border: 1px solid var(--perk-cor); border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(13,13,13,.72);
}
.perkIcone svg {
  width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: bevel;
}
.perkIcone .perkIconeFill { fill: currentColor; stroke: none; }
.perkTexto { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding-right: 18px; }
.perkTexto small { color: var(--perk-cor); font-size: 7px; font-weight: 700; letter-spacing: 1.4px; }
.perkTexto strong { margin-top: 2px; font: 400 20px/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .5px; }
.perkGanho { margin-top: 4px; color: var(--ztd-text-secondary); font-size: 9px; line-height: 1.2; }
.perkAtual {
  grid-column: 1 / -1; padding-top: 6px; color: var(--ztd-text-muted);
  border-top: 1px dashed rgba(199,183,142,.2); font-size: 8px; font-weight: 700; letter-spacing: 1px;
}
/* pisca no atalho quando ele é usado: confirma que a tecla pegou sem tirar o olho da horda */
.perkBtn.hit { border-color: var(--ztd-orange); background: rgba(255,122,26,.2); animation: perkEscolha 180ms ease-out; }
.perkFoot {
  display: flex; min-height: 32px; align-items: center; justify-content: space-between;
  padding: 6px 15px 8px; color: var(--ztd-text-muted); border-top: 1px solid rgba(75,80,59,.55);
  font-size: 8px; letter-spacing: 1.1px;
}
.perkCusto i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: var(--ztd-orange); transform: rotate(45deg); }
#perkHint b { color: var(--ztd-sand); margin-right: 7px; }
@keyframes perkEntrada { from { opacity: 0; transform: translate(-50%, 12px) scale(.985); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes perkEscolha { 50% { box-shadow: 0 0 0 4px rgba(255,122,26,.28); } }

/* No desktop a promoção é um fichário lateral: mantém a decisão à vista sem
   atravessar o campo de tiro. O rodapé direito fica livre para iniciar a horda. */
@media (min-width: 821px) {
  body:not(.toque) #perks {
    top: auto; right: 14px; bottom: 90px; left: auto; transform: none;
    width: min(350px, calc(100vw - 28px)); max-height: calc(100vh - 190px);
    overflow-y: auto; animation-name: perkEntradaDireita;
  }
  body:not(.toque) .perkHead {
    grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto;
    min-height: 86px;
  }
  body:not(.toque) .perkPatente { grid-row: 1 / 3; padding: 9px 8px; }
  body:not(.toque) .perkPatente span,
  body:not(.toque) .perkPatente small { font-size: 6px; letter-spacing: 1px; }
  body:not(.toque) .perkPatente strong { font-size: 40px; }
  body:not(.toque) .perkCabecalho { padding: 11px 10px 4px; }
  body:not(.toque) .perkEyebrow { font-size: 6px; letter-spacing: 1.2px; }
  body:not(.toque) #perkTitle { font-size: 22px; }
  body:not(.toque) #perkInstrucao { margin-top: 3px; font-size: 8px; }
  body:not(.toque) #perkPending {
    grid-column: 2; justify-self: start; gap: 5px; margin: 0 10px 9px;
    padding: 4px 7px;
  }
  body:not(.toque) #perkPending strong { font-size: 20px; }
  body:not(.toque) #perkPending span { font-size: 5.5px; letter-spacing: .8px; }
  body:not(.toque) .perkRow { grid-template-columns: 1fr; gap: 6px; padding: 8px; }
  body:not(.toque) .perkBtn {
    min-height: 76px; grid-template-columns: 36px minmax(0, 1fr); gap: 3px 8px;
    padding: 9px 9px 7px;
  }
  body:not(.toque) .perkIcone { width: 34px; height: 34px; }
  body:not(.toque) .perkIcone svg { width: 20px; height: 20px; }
  body:not(.toque) .perkTexto strong { font-size: 18px; }
  body:not(.toque) .perkGanho { margin-top: 2px; font-size: 8px; }
  body:not(.toque) .perkAtual { padding-top: 4px; font-size: 7px; }
  body:not(.toque) .perkFoot { min-height: 27px; padding: 5px 9px 6px; font-size: 6px; }
  @keyframes perkEntradaDireita {
    from { opacity: 0; transform: translateX(14px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
}

#readyBtn {
  position: absolute; right: 18px; bottom: 18px; display: none;
  background: #7a1f1f; color: #fff; border: 3px solid #a33; border-radius: 4px;
  padding: 12px 22px; font-size: 17px; font-weight: 900; cursor: pointer;
  font-family: 'Arial Black', sans-serif; letter-spacing: 2px; text-transform: uppercase;
}
#readyBtn:hover { background: #942626; }
#readyBtn:disabled { opacity: .6; cursor: default; }

#buildHint {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: var(--stencil); padding: 6px 14px; border-radius: 6px;
  font-size: 14px; display: none; pointer-events: none;
}
#buildHint b { color: var(--bone); }
#buildHint .price { color: var(--acid); }

#msg {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%,-50%);
  font-size: 52px; font-weight: 900; letter-spacing: 4px; color: #fff;
  text-shadow: 0 0 18px #000, 2px 2px 3px #000; opacity: 0; transition: opacity .4s;
  pointer-events: none; text-align: center; white-space: nowrap;
}

/* ---------- menu / lobby ---------- */
#menu {
  position: absolute; inset: 0; background: radial-gradient(circle at center, #1c2418 0%, #0a0d09 80%);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  z-index: 10; color: #ddd; overflow-y: auto; padding: 20px;
}
#menu h1 { color: var(--blood); font-size: 62px; letter-spacing: 6px; margin: 0 0 4px; text-shadow: 0 0 24px #400, 3px 3px 0 #000; text-align: center; }
#menu .tag { margin: 4px 0 22px; color: #999; text-align: center; }
#menuBox { width: min(94vw, 520px); }
.screen { display: none; flex-direction: column; align-items: center; gap: 12px; }
.screen.on { display: flex; }
.screen h2 {
  margin: 0; color: var(--stencil); font-size: 17px; letter-spacing: 3px;
  font-family: 'Arial Black', sans-serif; text-transform: uppercase;
}
#menu input, #menu select {
  background: #191919; color: #eee; border: 2px solid #444; border-radius: 8px;
  padding: 11px 14px; font-size: 17px; width: 100%; text-align: center; outline: none; font-family: inherit;
}
#menu input:focus, #menu select:focus { border-color: var(--acid); }
#menu label { width: 100%; font-size: 12px; color: #8a9070; text-transform: uppercase; letter-spacing: 1.5px; }
#menu label input, #menu label select { margin-top: 4px; }
.bigBtn {
  background: #3a7a2a; color: #fff; border: 3px solid #58a83e; border-radius: 10px;
  padding: 12px 20px; font-size: 19px; font-weight: bold; cursor: pointer; letter-spacing: 2px;
  font-family: inherit; width: 100%;
}
.bigBtn:hover { background: #479133; }
.bigBtn.alt { background: #2a3a5a; border-color: #4a6fa8; }
.bigBtn.alt:hover { background: #35497080; background: #35496f; }
.bigBtn:disabled { opacity: .55; cursor: default; }
.btnRow { display: flex; gap: 10px; width: 100%; }
.linkBtn { background: none; border: none; color: #8a9070; font-size: 13px; cursor: pointer; font-family: inherit; padding: 4px; }
.linkBtn:hover { color: var(--bone); }
.segRow { display: flex; gap: 8px; width: 100%; }
.seg {
  flex: 1; background: #191919; color: #8a9070; border: 2px solid #444; border-radius: 8px;
  padding: 10px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit;
}
.seg.on { background: var(--stencil); color: var(--ink); border-color: var(--stencil); }
#menuErr { color: #e05545; margin-top: 12px; font-size: 14px; min-height: 18px; text-align: center; }
#convite { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.conviteBox {
  border: 2px solid var(--stencil); background: rgba(255,213,74,.08);
  padding: 8px 12px; text-align: center; border-radius: 4px;
}
.conviteBox small { display: block; font-size: 11px; color: #8a9070; text-transform: uppercase; letter-spacing: 2px; }
.conviteBox b { display: block; color: var(--stencil); font-size: 17px; }
.conviteBox span { font-size: 12px; color: #9aa382; }
#menu .help { margin-top: 18px; font-size: 13px; color: #777; text-align: center; }
#carregando { color: #8a9070; font-size: 13px; letter-spacing: 1px; }

/* lista de salas */
#roomList {
  width: 100%; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin; scrollbar-color: #4a5433 transparent;
}
.roomItem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 2px solid var(--panel-line); color: var(--bone);
  padding: 9px 12px; cursor: pointer; font-family: inherit; font-size: 14px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.roomItem:hover:not(:disabled) { border-color: var(--stencil); background: linear-gradient(180deg, #333d24, #262e1c); }
.roomItem:disabled { cursor: default; opacity: .55; }
.roomItem .ri-lock { font-size: 15px; }
.roomItem .ri-main { flex: 1; min-width: 0; }
.roomItem .ri-name { display: block; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomItem .ri-sub { display: block; font-size: 11px; color: #8a9070; }
.roomItem .ri-cnt { font-family: 'Courier New', monospace; font-weight: bold; color: var(--acid); white-space: nowrap; }
.roomItem .ri-cnt.full { color: #e05545; }
.roomItem .ri-fase { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; border: 1px solid; }
.roomItem .ri-fase.night { color: #ff5544; border-color: #ff5544; }
.roomItem .ri-fase.day { color: var(--stencil); border-color: var(--stencil); }
.roomItem .ri-fase.espera { color: var(--acid); border-color: var(--acid); }
#roomEmpty { color: #777; font-size: 13px; text-align: center; padding: 18px 0; }

/* ---------- sala de espera ---------- */
#sala {
  position: absolute; inset: 0; z-index: 8; display: none;
  align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
  background: radial-gradient(circle at center, #1c2418ee 0%, #0a0d09f5 80%);
}
#sala.on { display: flex; }
#salaBox {
  width: min(94vw, 480px); display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 4px;
  box-shadow: 0 16px 60px rgba(0,0,0,.65); padding: 18px;
}
#sala h2 {
  margin: 0; color: var(--stencil); font-size: 17px; letter-spacing: 3px;
  font-family: 'Arial Black', sans-serif; text-transform: uppercase;
}
#salaNome { color: var(--bone); font-size: 20px; font-weight: bold; text-align: center; }
#salaLinha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
#salaCode {
  font-family: 'Courier New', monospace; font-weight: bold; font-size: 18px;
  color: var(--stencil); letter-spacing: 4px; border: 1px dashed #4a5433; padding: 2px 10px;
}
#salaConvite {
  background: #232a1a; color: var(--bone); border: 1px solid #4a5433; border-radius: 4px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
#salaConvite:hover { border-color: var(--stencil); color: var(--stencil); }
#salaOk { color: var(--acid); font-size: 12px; }
#salaLink {
  background: #191919; color: var(--bone); border: 1px solid #4a5433; border-radius: 4px;
  padding: 4px 8px; font-size: 11px; font-family: 'Courier New', monospace; width: 100%;
}
#salaJogHead {
  width: 100%; margin-top: 6px; color: #8a9070; font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid var(--panel-line); padding-bottom: 4px;
}
#salaJogHead b { color: var(--bone); font-family: 'Courier New', monospace; }
#salaJog { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.jogItem {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 14px;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--panel-line); color: var(--bone);
}
.jogItem.eu { border-color: #55663a; }
.jogItem .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acid); flex: none; }
.jogItem .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogItem .tag {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid var(--stencil); color: var(--stencil); font-weight: bold;
}
.jogItem .pronto { font-size: 11px; color: var(--acid); font-weight: bold; }
.jogItem .esperando { font-size: 11px; color: #6f755c; }
.vaga {
  padding: 7px 10px; font-size: 12px; color: #5c624c; border: 1px dashed #333d24;
  text-align: center; font-style: italic;
}
#salaAcao { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
#salaAcao .aviso { text-align: center; color: #8a9070; font-size: 13px; }

/* ---------- barra da sala no jogo ---------- */
#roomBar {
  top: 10px; left: 14px; z-index: 3; display: none; align-items: center; gap: 8px;
  background: rgba(0,0,0,.55); padding: 6px 10px; border-radius: 8px; font-size: 13px;
  text-shadow: 1px 1px 2px #000;
}
#roomBar b { color: var(--bone); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#roomCode { font-family: 'Courier New', monospace; color: var(--stencil); font-weight: bold; letter-spacing: 2px; }
#roomBar button {
  background: #232a1a; color: var(--bone); border: 1px solid #4a5433; border-radius: 4px;
  padding: 3px 9px; font-size: 12px; cursor: pointer; font-family: inherit;
}
#roomBar button:hover { border-color: var(--stencil); color: var(--stencil); }
#inviteOk { color: var(--acid); font-size: 12px; }
#roomLink {
  background: #191919; color: var(--bone); border: 1px solid #4a5433; border-radius: 4px;
  padding: 3px 6px; font-size: 11px; font-family: 'Courier New', monospace; width: 260px;
}

/* ---------- placar de dano da rodada ---------- */
/* fica na direita: a loja ocupa o topo-centro e o HUD o canto inferior esquerdo */
#score {
  top: 74px; right: 14px; z-index: 7; display: none; width: min(92vw, 330px);
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 8px 10px 9px; pointer-events: none;
}
#score.on { display: block; }
#scoreHead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1px solid var(--panel-line); padding-bottom: 5px; margin-bottom: 6px;
}
#scoreTitle {
  margin: 0; color: var(--stencil); font-size: 12px; letter-spacing: 2px;
  font-family: 'Arial Black', sans-serif; text-transform: uppercase; white-space: nowrap;
}
#scoreSub { color: #8a9070; font-size: 10.5px; font-family: 'Courier New', monospace; white-space: nowrap; }
.scoreRow {
  position: relative; display: flex; align-items: center; gap: 6px; overflow: hidden;
  padding: 4px 7px; margin-bottom: 3px; background: rgba(0,0,0,.32);
  border-left: 3px solid #3a4426;
}
.scoreRow .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(184,58,46,.55), rgba(184,58,46,.08));
  transition: width .25s;
}
.scoreRow > span, .scoreRow > b { position: relative; } /* acima da barra de dano */
.scoreRow .pos { color: #8a9070; font-family: 'Courier New', monospace; font-size: 11px; width: 17px; flex: none; }
.scoreRow .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--bone); }
.scoreRow .kk { color: #9aa382; font-size: 10.5px; flex: none; }
.scoreRow .dmg { color: var(--bone); font-family: 'Courier New', monospace; font-size: 12.5px; flex: none; }
.scoreRow .pct { color: #8a9070; font-family: 'Courier New', monospace; font-size: 10.5px; width: 30px; text-align: right; flex: none; }
.scoreRow.top { border-left-color: var(--stencil); }
.scoreRow.top .pos, .scoreRow.top .dmg { color: var(--stencil); }
.scoreRow.eu { background: rgba(143,209,95,.10); }
.scoreRow.eu .nome { color: var(--acid); font-weight: bold; }
#scoreFoot { color: #6f755c; font-size: 10px; text-align: center; margin-top: 5px; letter-spacing: .5px; }

/* ---------- medidor de ping ---------- */
#ping {
  top: 10px; right: 14px; z-index: 11; display: none; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); padding: 5px 10px; border-radius: 8px;
  font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold;
  color: var(--bone); text-shadow: 1px 1px 2px #000; pointer-events: none;
}
#ping .bars { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
#ping .bars i { width: 3px; background: #4a5433; border-radius: 1px; }
#ping .bars i:nth-child(1) { height: 4px; }
#ping .bars i:nth-child(2) { height: 7px; }
#ping .bars i:nth-child(3) { height: 11px; }
#ping .bars i.on { background: var(--pingCor, #5fd15f); }
#ping .ms { color: var(--pingCor, #5fd15f); min-width: 46px; text-align: right; }

/* ---------- pausa / configurações (Esc) ---------- */
/* acima de tudo que é do jogo (ficha 6, placar 7, sala 8) e do menu (10):
   se a conexão cair com o painel aberto, o menu tem que aparecer por baixo dele
   só depois que o painel fecha — quem fecha é o sairDaSala. */
#pause {
  position: absolute; inset: 0; z-index: 12; display: none;
  align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
  background: rgba(6, 8, 5, .72); backdrop-filter: blur(2px);
}
#pause.on { display: flex; }
#pauseBox {
  width: min(94vw, 430px); display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 4px;
  box-shadow: 0 16px 60px rgba(0,0,0,.7); padding: 18px; color: var(--bone);
}
#pauseTitle {
  margin: 0; color: var(--stencil); font-size: 20px; letter-spacing: 4px; text-align: center;
  font-family: 'Arial Black', sans-serif; text-transform: uppercase;
}
#pauseSub { color: #8a9070; font-size: 12px; text-align: center; margin-bottom: 2px; }
#pauseSub.aviso { color: #e0a03a; }
#pauseOpc {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line);
  padding: 8px 0; margin: 2px 0 4px;
}
.opc {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 13.5px;
  cursor: pointer; border-radius: 3px;
}
.opc:hover { background: rgba(255,255,255,.04); }
.opc > .lbl { flex: 1; }
.opc > .lbl small { display: block; font-size: 10.5px; color: #8a9070; letter-spacing: .3px; }
/* interruptor: quadrado estampado, no mesmo idioma dos cards da loja */
.opc .sw {
  flex: none; width: 44px; height: 22px; border: 2px solid var(--panel-line);
  background: #191d12; position: relative; transition: border-color .12s, background .12s;
}
.opc .sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 14px;
  background: #6f755c; transition: transform .12s, background .12s;
}
.opc input { position: absolute; opacity: 0; width: 0; height: 0; }
.opc input:checked + .sw { border-color: var(--acid); background: #1d2a14; }
.opc input:checked + .sw::after { transform: translateX(22px); background: var(--acid); }
.opc input:focus-visible + .sw { outline: 2px solid var(--stencil); outline-offset: 2px; }
.opc .val {
  flex: none; width: 46px; text-align: right; font-family: 'Courier New', monospace;
  font-weight: bold; color: var(--stencil); font-size: 13px;
}
#volRow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
#volRow .lbl { flex: none; font-size: 13.5px; }
#vol {
  flex: 1; min-width: 0; -webkit-appearance: none; appearance: none;
  height: 6px; background: #191d12; border: 1px solid var(--panel-line); border-radius: 3px; outline: none;
}
#vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 20px;
  background: var(--stencil); border: 1px solid #8f7a1e; cursor: pointer;
}
#vol::-moz-range-thumb {
  width: 12px; height: 18px; border-radius: 0;
  background: var(--stencil); border: 1px solid #8f7a1e; cursor: pointer;
}
#vol:focus-visible { border-color: var(--stencil); }
#assetCredits { margin: 0; color: #777d68; font-size: 9.5px; line-height: 1.4; text-align: center; }
#assetCredits a { color: #a7ad8c; }
#pauseBox .bigBtn {
  background: #3a7a2a; color: #fff; border: 3px solid #58a83e; border-radius: 10px;
  padding: 11px 18px; font-size: 17px; font-weight: bold; cursor: pointer; letter-spacing: 2px;
  font-family: inherit; width: 100%;
}
#pauseBox .bigBtn:hover { background: #479133; }
#pauseSair { color: #a8705f; }
#pauseSair:hover { color: #e05545; }

/* ================= TOWER DEFENSE ================= */

.bigBtn.td { background: #4a2f6a; border-color: #7a52a8; }
.bigBtn.td:hover { background: #5b3a80; }

/* ---------- deck de defesas ---------- */
#deckBar, #deckBar2, #deckBar3 {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: rgba(0,0,0,.25); border: 1px solid var(--panel-line); padding: 7px 10px;
}
.deckLbl { font-size: 11px; color: #8a9070; text-transform: uppercase; letter-spacing: 1.5px; }
#deckResumo, #deckResumo2, #deckResumo3 { display: flex; gap: 4px; flex: 1; }
.deckSlot {
  width: 34px; height: 34px; border: 2px solid var(--panel-line); background: #1a2013;
  display: flex; align-items: center; justify-content: center;
}
.deckSlot img { width: 30px; height: 30px; }
.deckSlot.vazio { border-style: dashed; opacity: .45; }
#deckCont {
  font-family: 'Courier New', monospace; font-size: 15px; color: #8a9070;
  border: 1px solid var(--panel-line); padding: 1px 8px; margin-left: 6px;
}
#deckCont.cheio { color: var(--acid); border-color: var(--acid); }
#deckGrade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
  width: 100%; max-height: 46vh; overflow-y: auto; padding: 2px;
  scrollbar-width: thin; scrollbar-color: #4a5433 transparent;
}
.deckCard.selected { border-color: var(--acid); background: linear-gradient(180deg, #34411f, #26301a); }
.deckCard.selected::after {
  content: '✔'; position: absolute; top: 3px; right: 5px; color: var(--acid); font-weight: bold;
}

/* ---------- lista de mapas da campanha ---------- */
#mapaList {
  width: 100%; max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin; scrollbar-color: #4a5433 transparent;
}
.mapItem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 2px solid var(--panel-line); color: var(--bone);
  padding: 9px 12px; cursor: pointer; font-family: inherit; font-size: 14px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.mapItem:hover:not(:disabled) { border-color: var(--stencil); background: linear-gradient(180deg, #333d24, #262e1c); }
.mapItem:disabled { cursor: default; opacity: .5; }
.mapItem .mi-num {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--panel-line); font-weight: bold; font-size: 13px;
}
.mapItem.feito .mi-num { color: var(--acid); border-color: var(--acid); }
.mapItem.rascunho { border-color: #7a52a8; }
.mapItem.rascunho .mi-num { color: #b98ae8; border-color: #7a52a8; }
.mapItem .mi-main { flex: 1; min-width: 0; }
.mapItem .mi-name { display: block; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapItem .mi-sub { display: block; font-size: 11px; color: #8a9070; }
.mapItem .mi-tag { font-size: 11px; color: #9aa382; white-space: nowrap; font-family: 'Courier New', monospace; }
#mapEmpty { color: #777; font-size: 13px; text-align: center; padding: 18px 0; }
.segModo {
  flex: 1; background: #191919; color: #8a9070; border: 2px solid #444; border-radius: 8px;
  padding: 10px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit;
}
.segModo.on { background: #4a2f6a; color: #fff; border-color: #7a52a8; }

/* ---------- vida da base ---------- */
#baseBar {
  display: none; align-items: center; gap: 8px; z-index: 3; pointer-events: none;
  top: 52px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); padding: 5px 14px; border-radius: 8px;
}
.bb-lbl { font-size: 12px; font-weight: bold; letter-spacing: 2px; color: #6fe3ff; }
.bb-track { width: 260px; height: 12px; background: #21261c; border: 2px solid #000; }
#baseFill { height: 100%; width: 100%; background: linear-gradient(#6fe3ff, #2a8fb0); transition: width .18s; }
#baseFill.meio { background: linear-gradient(#e9c93d, #a8862a); }
#baseFill.critico { background: linear-gradient(#e05545, #a83a28); animation: bossPulse 1.1s ease-in-out infinite; }
#baseVal { font-family: 'Courier New', monospace; font-size: 12px; color: var(--bone); }

/* ---------- fim de mapa ---------- */
#fimTD {
  position: absolute; inset: 0; z-index: 9; display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(circle at center, #1c2418dd 0%, #0a0d09f2 80%);
}
#fimTD.on { display: flex; }
#fimBox {
  background: var(--panel); border: 2px solid var(--panel-line); padding: 26px 32px;
  text-align: center; display: flex; flex-direction: column; gap: 14px; max-width: 460px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
#fimTitulo { margin: 0; font-family: 'Arial Black', sans-serif; letter-spacing: 3px; font-size: 26px; }
#fimTitulo.venceu { color: var(--acid); }
#fimTitulo.perdeu { color: #e05545; }
#fimSub { color: #9aa382; font-size: 14px; line-height: 1.5; }

/* ---------- painel de melhoria da artilharia ---------- */
/* Fica na borda esquerda porque a loja do tower defense mora na direita: os
   dois nunca disputam o mesmo canto e o tabuleiro no meio segue limpo. */
/* A altura é limitada porque embaixo dele mora o HUD (vida, dinheiro, armas):
   o painel encolhe e rola em vez de cobrir o que o jogador precisa ler. */
#torrePanel {
  display: none; flex-direction: column; gap: 5px; z-index: 6;
  left: 14px; top: 92px; width: 224px; padding: 9px 11px 10px;
  max-height: calc(100dvh - 250px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #4a5433 transparent;
  background: var(--panel); border: 2px solid var(--panel-line);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
#torrePanel.on { display: flex; }
#tpHead { display: flex; align-items: baseline; gap: 8px; }
#tpNome { font-size: 13px; letter-spacing: .5px; color: var(--bone); font-family: 'Arial Black', sans-serif; line-height: 1.15; }
#tpNivel { font-size: 12px; color: var(--stencil); font-weight: bold; margin-left: auto; white-space: nowrap; }
#tpFechar {
  background: none; border: none; color: #8a9070; font-size: 15px; cursor: pointer;
  padding: 0 2px; line-height: 1; font-family: inherit;
}
#tpFechar:hover { color: var(--bone); }
#tpSub { font-size: 11px; color: #9aa382; line-height: 1.3; }
#tpPips { display: flex; gap: 4px; margin: 1px 0 3px; }
#tpPips i { flex: 1; height: 6px; background: #39422a; border: 1px solid #4a5433; }
#tpPips i.on { background: var(--stencil); border-color: var(--stencil); }
.tpStat {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  font-size: 11.5px; padding: 1px 0; border-bottom: 1px dashed #333d24;
}
.tpStat span { color: #9aa382; }
.tpStat b { font-family: 'Courier New', monospace; color: var(--bone); white-space: nowrap; }
.tpStat i { color: #6f755c; font-style: normal; margin: 0 2px; }
.tpStat em { color: var(--acid); font-style: normal; font-weight: bold; }
#tpUpg { margin-top: 3px; font-size: 12.5px; padding: 8px 10px; letter-spacing: 1px; }
#tpUpg.noMoney { color: #c9aaa6; border-color: #6b1410; }
#tpSell { font-size: 11.5px; }
#tpGira { font-size: 11.5px; color: var(--bone); }
#tpGira:hover { color: var(--stencil); }

/* No tower defense o tabuleiro é estreito e fica no meio da tela: a loja sai do
   centro e vai pro lado, senão ela cobre justamente as linhas onde se constrói. */
body.td #shop { left: auto; right: 12px; transform: none; }
body.td #baseBar { top: 46px; left: 14px; transform: none; }
body.td #torrePanel { top: 78px; }

/* ---------- escolha de modo (solo e online passam por ela) ---------- */
.modoCard {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 2px solid var(--panel-line); color: var(--bone);
  padding: 14px 16px; cursor: pointer; font-family: inherit;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: transform .12s, border-color .12s, background .12s;
}
.modoCard:hover { transform: translateY(-2px); border-color: var(--stencil); background: linear-gradient(180deg, #333d24, #262e1c); }
.modoCard.td:hover { border-color: #b98ae8; background: linear-gradient(180deg, #322445, #241a33); }
.modoCard .mc-ico { font-size: 30px; flex: none; }
.modoCard .mc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modoCard .mc-main b { font-size: 18px; letter-spacing: 1px; }
.modoCard.td .mc-main b { color: #c9a6f0; }
.modoCard .mc-main small { font-size: 12px; color: #9aa382; line-height: 1.35; }
#modoSub { margin-bottom: 4px; }
#menu label small.dica { display: block; margin-top: 5px; font-size: 11px; color: #6f755c; text-transform: none; letter-spacing: 0; line-height: 1.4; }

/* ================= TELA PEQUENA ================= */
/* Vale pro celular e pra janela estreita de PC: só encolhe o que estoura. Os
   controles de dedo são outro assunto, mais abaixo, e dependem de body.toque. */

@media (max-width: 820px) {
  #menu { padding: 16px 12px; }
  #menu h1 { font-size: clamp(30px, 10vw, 62px); letter-spacing: 4px; }
  #menu .tag { margin: 2px 0 14px; font-size: 13px; }
  #menu .help { margin-top: 12px; font-size: 11.5px; line-height: 1.5; }
  #menu input, #menu select { font-size: 16px; padding: 10px 12px; } /* 16px: abaixo disso o iOS dá zoom no foco */
  .bigBtn { font-size: 16px; padding: 12px 14px; letter-spacing: 1px; }
  .screen h2 { font-size: 15px; letter-spacing: 2px; }
  .btnRow { flex-direction: column; }
  #roomList, #mapaList { max-height: 38vh; }
  #deckGrade { max-height: 40vh; }
  .modoCard { padding: 11px 12px; gap: 10px; }
  .modoCard .mc-ico { font-size: 24px; }
  .modoCard .mc-main b { font-size: 15px; }
  .modoCard .mc-main small { font-size: 11px; }

  #topbar { font-size: 14px; padding: 6px 12px; max-width: 94vw; white-space: normal; line-height: 1.3; }
  #msg { font-size: clamp(26px, 8vw, 52px); white-space: normal; width: 92vw; letter-spacing: 2px; }
  #hud { left: 8px; bottom: 8px; }
  #hpBar { width: 150px; height: 15px; }
  #xpBar { width: 108px; }
  #hudInfo { font-size: 15px; margin-top: 4px; }
  #kills { font-size: 12px; }
  #score { top: 66px; right: 8px; }
  #roomBar { left: 8px; gap: 6px; padding: 5px 8px; font-size: 12px; }
  #roomBar b { max-width: 96px; }
  #ping { right: 8px; }
  .bb-track { width: 150px; }
  #readyBtn { right: 10px; bottom: 10px; padding: 10px 14px; font-size: 14px; }
  #buildHint { font-size: 12px; bottom: 54px; width: 94vw; text-align: center; }
  #perks { bottom: auto; top: 50%; width: min(96vw, 700px); max-height: 94vh; overflow-y: auto; transform: translate(-50%, -50%); }
  .perkHead { grid-template-columns: 90px minmax(0, 1fr) auto; min-height: 82px; }
  .perkPatente { padding: 10px; }
  .perkPatente strong { font-size: 48px; }
  .perkCabecalho { padding-inline: 10px; }
  #perkTitle { font-size: 23px; }
  #perkPending { margin-right: 14px; }
  .perkRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perkBtn { min-height: 104px; padding: 12px 10px 9px; }
  #fimBox { padding: 20px 18px; margin: 12px; }
  #fimTitulo { font-size: 20px; }
  #torrePanel { width: 190px; top: 74px; padding: 9px 10px 10px; gap: 5px; }
  #tpNome { font-size: 12px; }
  .tpStat { font-size: 11px; }
  #tpUpg { font-size: 12px; padding: 8px; }
}

/* cards da loja: as 4 colunas continuam sendo os 4 slots do kit, só que menores */
@media (max-width: 560px) {
  .cardRow { gap: 5px; }
  .cardIcon { width: 46px; height: 46px; }
  .cardName { font-size: 10px; min-height: 22px; }
  .cardSub { font-size: 8.5px; min-height: 20px; }
  .cardTag { font-size: 10px; padding: 1px 4px; }
  .stamp { top: 32px; font-size: 9px; }
  .card { padding: 5px 3px 18px; }
  .setHead b { font-size: 11px; }
  .setHead small { font-size: 9.5px; }
  #charView { width: 150px; height: 202px; }
  #charBody { padding: 8px; }
  .slotBox { min-height: 66px; }
  #perks { width: 96vw; }
  .perkHead { grid-template-columns: 76px minmax(0, 1fr) auto; min-height: 76px; }
  .perkPatente { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 9px 8px; }
  .perkPatente strong { grid-row: 2; grid-column: 1; margin: 2px 0; font-size: 38px; }
  .perkPatente span, .perkPatente small { font-size: 6px; letter-spacing: 1px; }
  .perkEyebrow { font-size: 6px; letter-spacing: 1.2px; }
  #perkTitle { font-size: 20px; }
  #perkInstrucao { display: none; }
  #perkPending { gap: 5px; margin-right: 9px; padding: 5px 7px; }
  #perkPending strong { font-size: 22px; }
  #perkPending span { font-size: 5.5px; letter-spacing: .7px; }
  .perkRow { gap: 6px; padding: 8px; }
  .perkBtn { min-height: 112px; grid-template-columns: 34px 1fr; gap: 4px 7px; padding: 11px 8px 8px; }
  .perkIcone { width: 32px; height: 32px; }
  .perkIcone svg { width: 19px; height: 19px; }
  .perkTexto { padding-right: 12px; }
  .perkTexto strong { font-size: 17px; }
  .perkGanho { font-size: 7.5px; }
  .perkAtual { font-size: 6.5px; letter-spacing: .6px; }
  .perkFoot { padding-inline: 9px; font-size: 6.5px; }
}

/* Painel mais alto que a tela: com align-items:center o topo dele fica acima da
   área rolável e o título some. `margin:auto` centra quando cabe e encosta no
   topo quando não cabe, que é o que o dedo consegue rolar. */
#pauseBox, #salaBox, #fimBox { margin: auto; }

/* deitado e baixo (celular em paisagem): o que rouba altura tem que caber */
@media (max-height: 480px) {
  #menu h1 { font-size: 30px; margin-bottom: 0; }
  #menu .tag { margin-bottom: 8px; }
  #menu .help { display: none; }
  #roomList, #mapaList, #deckGrade { max-height: 30vh; }
  #shopBody { max-height: 52vh; }
  #charPanel { max-height: 94vh; overflow-y: auto; }
  #perks { bottom: auto; top: 50%; width: min(96vw, 920px); transform: translate(-50%, -50%); }
  .perkHead { min-height: 62px; grid-template-columns: 84px minmax(0, 1fr) auto; }
  .perkPatente { padding: 7px 9px; }
  .perkPatente strong { font-size: 40px; }
  .perkCabecalho { padding-block: 7px; }
  #perkTitle { font-size: 20px; }
  #perkInstrucao { display: none; }
  #perkPending { margin-right: 14px; padding-block: 4px; }
  .perkRow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 7px 9px; }
  .perkBtn { min-height: 82px; grid-template-columns: 30px 1fr; gap: 3px 6px; padding: 8px 7px 6px; }
  .perkIcone { width: 28px; height: 28px; }
  .perkIcone svg { width: 17px; height: 17px; }
  .perkTexto strong { font-size: 15px; }
  .perkTexto small, .perkGanho, .perkAtual { font-size: 6px; }
  .perkAtual { padding-top: 4px; }
  .perkFoot { min-height: 24px; padding-block: 4px; }
}

/* ================= CONTROLES DE TOQUE ================= */
/* body.toque só entra em aparelho sem mouse (ui/toque.js). No PC nada aqui vale. */

.tqFechar { display: none; }
#tqGirar { display: none; }

body.toque .hudKey { display: none; }         /* não existe teclado pra anunciar */
body.toque #perkHint { display: none; }
body.toque .perkBtn { min-height: 108px; }
body.toque .perkBtn kbd { display: none; }
body.toque #charHead .hint { display: none; }
body.toque .tqFechar {
  display: block; background: none; border: 1px solid #4a5433; border-radius: 4px;
  color: var(--bone); font: inherit; font-size: 16px; line-height: 1;
  padding: 6px 12px; cursor: pointer;
}

/* alvos de toque grandes o bastante pro dedo */
body.toque .wslot { padding: 9px 14px; font-size: 14px; min-height: 40px; }
body.toque #ammoQuick {
  position: fixed; left: 50%; z-index: 8; transform: translateX(-50%);
  width: min(92vw, 520px); margin: 0; padding: 4px 5px;
  border: 1px solid rgba(89,96,85,.78); background: rgba(12,15,12,.88);
}
body.toque #ammoQuick header { display: none; }
body.toque .aqAcoes button { min-height: 44px; padding-right: 67px; }
body.toque .aqNome { font-size: 13px; }
body.toque .aqEstado { font-size: 7px; }
body.toque .aqPreco { right: 5px; padding: 5px; font-size: 9px; }
body.toque #shopMin { padding: 0 14px; font-size: 17px; }
body.toque .linkBtn { padding: 10px 6px; font-size: 14px; }

/* Loja compacta: numa tela de celular o card do PC come metade do mapa. Aqui o
   card encolhe pro tamanho do ícone + preço, que é o que se olha na hora de
   comprar — o resto continua legível, só menor. */
body.toque .tab { padding: 8px 3px 6px; font-size: 9px; letter-spacing: .5px; }
body.toque .cardRow { grid-template-columns: repeat(4, minmax(0, 78px)); gap: 4px; }
body.toque .card { padding: 4px 2px 15px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
body.toque .cardIcon { width: 34px; height: 34px; }
body.toque .cardName { font-size: 9px; min-height: 20px; }
body.toque .cardSub { font-size: 7.5px; min-height: 17px; margin-top: 1px; }
body.toque .cardTag { font-size: 9.5px; padding: 0 4px; }
body.toque .stamp { top: 26px; font-size: 8.5px; padding: 0 4px; }
body.toque .lvlPips i { width: 9px; height: 4px; }
body.toque #shopBody { padding: 6px 6px 10px; }
body.toque .setRow { margin-bottom: 6px; }
body.toque .setHead { gap: 6px; margin-bottom: 3px; }
body.toque .setHead b { font-size: 10px; letter-spacing: 1px; }
body.toque .setHead small { font-size: 9px; }
body.toque .setHead .pip { width: 7px; height: 7px; }
body.toque #upgWeapon { font-size: 10px; margin: 0 0 6px; }

/* A tela do celular se organiza em faixas: o alto é informação, o pé é
   controle. O HUD fica no alto porque embaixo moram os analógicos, e a loja
   entra logo abaixo dele — foi o único jeito de ela ter área de toque decente
   sem cobrir nem a vida nem o dinheiro. */
body.toque #hud { top: 46px; left: calc(8px + env(safe-area-inset-left)); bottom: auto; }
body.toque #score { top: 46px; right: calc(8px + env(safe-area-inset-right)); }
body.toque #ping { top: 62px; right: calc(8px + env(safe-area-inset-right)); }
body.toque #roomBar { top: calc(8px + env(safe-area-inset-top)); }
body.toque #topbar { top: calc(8px + env(safe-area-inset-top)); max-width: 50vw; font-size: 13px; }

/* a fileira de armas sai do bloco do HUD: ela é botão, e botão vai pra onde o
   polegar alcança */
body.toque #weapons {
  position: fixed; left: 50%; transform: translateX(-50%); margin: 0;
  justify-content: center; flex-wrap: wrap;
}

/* A loja fica no alto e no centro, num painel estreito: em tela de celular a
   folha de largura inteira virava uma parede em cima do mapa. A altura para
   onde a faixa de controles começa, então ela nunca cobre o botão da horda. */
body.toque #shop, body.toque.td #shop {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(94vw, 344px);
}
body.toque #shopBody { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* .building recolhe no hover, e hover não existe no dedo: aqui quem recolhe é o
   .min, ligado sozinho ao escolher uma defesa e desligado no ▴ / 🛒 */
body.toque #shop.min { width: min(94vw, 344px); } /* recolher não muda a largura: a fileira de abas não pode dançar */
body.toque #shop.building:not(.min) { opacity: 1; width: min(94vw, 344px); box-shadow: 0 12px 40px rgba(0,0,0,.55); }
body.toque #shop.building:not(.min) #shopBody { max-height: none; flex: 1 1 auto; min-height: 0; padding: 10px 8px 16px; overflow-y: auto; }
body.toque #shop.building:not(.min) .tab { padding: 12px 10px 10px; font-size: 11px; letter-spacing: 1px; }
body.toque #shop.building:not(.min)::after { display: none; }
body.toque #shop.min::after { content: 'loja recolhida · toque numa aba pra abrir'; }

/* acima da camada de toque (9): senão a fileira de botões cobre o ✕ da ficha,
   que no celular é o único jeito de fechar */
body.toque #charPanel { width: min(96vw, 560px); max-height: 90vh; overflow-y: auto; z-index: 10; }
body.toque #perks { bottom: auto; top: 50%; transform: translate(-50%, -50%); z-index: 9; }

/* Aparelho de toque: nada é selecionável e nada rola, fora dos painéis que
   precisam rolar (regra de touch-action lá em cima). Sem isso o segundo dedo
   nos analógicos era lido como "arrastar pra selecionar". */
body.toque, body.toque * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.toque { touch-action: none; }
body.toque input, body.toque select, body.toque textarea { user-select: text; -webkit-user-select: text; }

/* ---------- a camada dos controles ---------- */
#toque { position: fixed; inset: 0; z-index: 9; pointer-events: none; touch-action: none; }
#tqCtl { position: absolute; inset: 0; pointer-events: none; }

#tqBtns {
  position: absolute; top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  display: flex; gap: 6px; pointer-events: auto;
}
.tqBtn {
  width: 44px; height: 44px; font-size: 20px; line-height: 1; cursor: pointer;
  background: rgba(10,13,8,.72); color: var(--bone);
  border: 2px solid var(--panel-line); border-radius: 8px; font-family: inherit;
}
.tqBtn:active { border-color: var(--stencil); background: rgba(40,48,28,.9); }

.tqGatilho {
  display: none; position: absolute; right: calc(26px + env(safe-area-inset-right));
  bottom: calc(174px + env(safe-area-inset-bottom)); width: 76px; height: 76px;
  pointer-events: auto; border-radius: 50%; border: 3px solid #9b4036;
  background: rgba(78,20,18,.72); color: #ffb09f; font: 24px inherit;
  flex-direction: column; align-items: center; justify-content: center;
}
.tqGatilho small { display: block; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
body.toque.fps .tqGatilho { display: flex; }

/* Analógico flutuante: parado ele fica ancorado no canto, mostrando onde pegar;
   com o dedo em cima ele se muda pro ponto tocado, pra o polegar não ter que
   acertar um alvo fixo no escuro. */
.tqStick {
  position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 50%; border: 2px solid rgba(216,207,174,.3);
  background: radial-gradient(circle, rgba(20,24,15,.5), rgba(20,24,15,.1));
  opacity: .45; pointer-events: none; transition: opacity .12s;
  top: calc(100% - env(safe-area-inset-bottom) - 92px);
}
#tqMove { left: calc(env(safe-area-inset-left) + 92px); }
#tqAim { left: calc(100% - env(safe-area-inset-right) - 92px); }
.tqStick.on { opacity: .9; }
.tqStick::after {
  content: attr(data-lbl); position: absolute; left: 50%; bottom: -2px;
  transform: translateX(-50%); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--bone); opacity: .7;
}
.tqStick.on::after { display: none; }
.tqKnob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e9e2c4, #7f8663);
  border: 2px solid rgba(0,0,0,.55); box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

/* ✔ / ✕ da construção: aparecem só com uma defesa escolhida. Ficam no meio de
   baixo, na mesma pilha do botão da horda — os cantos são dos analógicos. */
#tqAcoes {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: row; gap: 10px; pointer-events: auto;
}
#toque.obra #tqAcoes { display: flex; }
.tqAcao {
  width: 76px; padding: 8px 0 5px; font-size: 20px; line-height: 1; cursor: pointer;
  background: rgba(10,13,8,.82); border: 2px solid var(--panel-line);
  border-radius: 8px; color: var(--bone); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tqAcao small { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: #9aa382; }
.tqAcao.ok { border-color: #4d7a34; color: var(--acid); }
.tqAcao.ok:disabled { opacity: .38; border-color: var(--panel-line); color: #8a9070; }
.tqAcao.no { border-color: #7a3a30; color: #e0917f; }
.tqAcao.vira { border-color: #6a6033; color: var(--stencil); }

/* ---------- aviso de girar o aparelho ---------- */
@media (orientation: portrait) {
  body.toque.jogando #tqGirar {
    display: block; position: fixed; z-index: 10;
    top: calc(50% + 30px); left: 50%; transform: translateX(-50%);
    background: rgba(10,13,8,.85); border: 2px solid var(--stencil); border-radius: 8px;
    color: var(--stencil); font-family: inherit; font-size: 13px; padding: 8px 14px;
    text-align: center; cursor: pointer; max-width: 88vw;
  }
  body.toque.jogando #tqGirar small { display: block; font-size: 10px; color: #9aa382; margin-top: 2px; }
}

/* ---------- em pé: falta largura, então tudo vira faixa empilhada ---------- */
/* O meio de baixo é estreito demais entre os dois analógicos: armas e o botão
   da horda sobem pra cima deles em vez de espremer no vão. */
@media (orientation: portrait) {
  body.toque #roomBar { max-width: 58vw; }
  body.toque #topbar { max-width: 96vw; top: calc(52px + env(safe-area-inset-top)); }
  body.toque #hud { top: 92px; }
  body.toque #score { top: 92px; }
  body.toque #shop { top: calc(168px + env(safe-area-inset-top)); max-height: calc(100% - 498px); }
  body.toque #buildHint { top: 220px; }
  /* no tabuleiro entra mais uma faixa (vida da base): tudo desce um degrau */
  body.toque.td #baseBar { top: 100px; left: calc(8px + env(safe-area-inset-left)); transform: none; }
  body.toque.td #hud { top: 134px; }
  body.toque.td #shop { top: calc(210px + env(safe-area-inset-top)); max-height: calc(100% - 540px); }
  body.toque.td #buildHint { top: 262px; }
  body.toque #tqAcoes { bottom: calc(276px + env(safe-area-inset-bottom)); }
  body.toque #weapons { bottom: calc(224px + env(safe-area-inset-bottom)); max-width: 92vw; }
  body.toque #ammoQuick { bottom: calc(282px + env(safe-area-inset-bottom)); }
  body.toque #readyBtn {
    right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(172px + env(safe-area-inset-bottom));
  }
}

/* ---------- deitado: sobra largura no meio, é lá que fica o que se aperta ---------- */
@media (orientation: landscape) {
  /* deitado o painel é estreito e cabe ao lado do HUD: sobe pro topo e ganha
     as duas fileiras de card que faltavam */
  body.toque #topbar { max-width: 44vw; }
  body.toque #shop, body.toque.td #shop {
    top: calc(46px + env(safe-area-inset-top)); max-height: calc(100% - 156px);
  }
  body.toque #buildHint { top: 86px; }
  /* no tabuleiro a vida da base entra na coluna da esquerda e empurra o HUD e
     a loja um degrau pra baixo */
  body.toque.td #baseBar { top: 56px; left: calc(8px + env(safe-area-inset-left)); transform: none; }
  body.toque.td #hud { top: 88px; }
  body.toque.td #shop { top: calc(88px + env(safe-area-inset-top)); max-height: calc(100% - 198px); }
  body.toque.td #buildHint { top: 128px; }
  body.toque #tqAcoes { bottom: calc(116px + env(safe-area-inset-bottom)); }
  body.toque #weapons { bottom: calc(64px + env(safe-area-inset-bottom)); max-width: 56vw; }
  body.toque #ammoQuick { bottom: calc(118px + env(safe-area-inset-bottom)); width: min(56vw, 520px); }
  body.toque #readyBtn {
    right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* A dica de construção sobe pro alto no dedo: embaixo a fila de botões e os
   analógicos já ocupam tudo, e ela é texto, não alvo de toque. */
body.toque #buildHint {
  bottom: auto; left: 50%; transform: translateX(-50%);
  width: auto; max-width: 92vw; text-align: center;
}

/* tela deitada e curta (celular pequeno): analógico menor e pilha mais junta */
@media (orientation: landscape) and (max-height: 430px) {
  body.toque .tqStick { width: 112px; height: 112px; margin: -56px 0 0 -56px; top: calc(100% - env(safe-area-inset-bottom) - 76px); }
  body.toque #tqMove { left: calc(env(safe-area-inset-left) + 76px); }
  body.toque #tqAim { left: calc(100% - env(safe-area-inset-right) - 76px); }
  body.toque .tqKnob { width: 46px; height: 46px; }
  body.toque #tqAcoes { bottom: calc(100px + env(safe-area-inset-bottom)); }
  body.toque #weapons { bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.toque #ammoQuick { bottom: calc(108px + env(safe-area-inset-bottom)); }
  body.toque #readyBtn { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 8px 12px; font-size: 13px; }
  body.toque #buildHint { font-size: 11.5px; }
}

/* ================= INTERFACE SURVIVOR / MANIFESTO DE ABRIGO =================
   A loja é um inventário de campanha preso à esquerda, não uma vitrine no
   centro. O relevo vem de lona, costura e etiqueta de estoque; o mapa continua
   sendo o elemento dominante da tela. */
:root {
  --panel: rgba(15, 18, 15, .96);
  --panel-line: #596055;
  --card: #20251f;
  --card-hi: #292f27;
  --bone: #ddd5bd;
  --stencil: #e7b944;
  --blood: #b34a3c;
  --acid: #a2bf73;
  --steel: #aab0aa;
  --ink: #111411;
  --lona: #30372d;
  --ferrugem: #9b6547;
  --azul-kit: #7894a0;
}

body:not(.toque) #shop,
body:not(.toque).td #shop {
  top: 58px; left: 12px; right: auto; bottom: auto; transform: none;
  width: min(430px, calc(100vw - 24px));
  height: calc(100vh - 245px); max-height: calc(100vh - 245px); overflow: hidden;
  border: 1px solid #6d7468; border-left: 5px solid var(--stencil);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 7px 100%,
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 120px),
    rgba(13,16,13,.96);
  box-shadow: 12px 14px 34px rgba(0,0,0,.46);
}
body:not(.toque) #shop::before {
  content: 'ABRIGO // ESTOQUE';
  position: absolute; left: -5px; bottom: 18px; transform: translateX(-100%) rotate(180deg);
  writing-mode: vertical-rl; padding: 8px 4px;
  color: rgba(231,185,68,.78); background: rgba(12,14,12,.82);
  border: 1px solid #565d52; border-right: 0;
  font: 700 8px/1 'Courier New', monospace; letter-spacing: 2px;
}
#shopMast {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  min-height: 54px; padding: 7px 9px;
  border-bottom: 1px dashed #697064;
  background:
    linear-gradient(105deg, rgba(231,185,68,.13), transparent 42%),
    #1d221c;
}
#shopMast > div { min-width: 0; }
#shopMast b {
  display: block; color: var(--bone); font: 900 15px/1 'Arial Black', sans-serif;
  letter-spacing: 2.5px;
}
#shopMast small {
  display: block; margin-top: 4px; color: #8f978b;
  font: 9px/1.15 'Courier New', monospace; letter-spacing: .2px;
}
.smCodigo {
  color: #181a16; background: #c4b88e; padding: 3px 5px; transform: rotate(-2deg);
  font: 900 8px/1 'Courier New', monospace; box-shadow: 0 1px 2px #000;
}
.smFase {
  color: var(--stencil); border: 1px solid #786426; padding: 4px 5px;
  font: 900 8px/1 'Courier New', monospace; letter-spacing: 1px;
}

#shopTabs {
  min-height: 39px; background: #151915; border-bottom: 1px solid #62695e;
}
.tab {
  position: relative; padding: 10px 5px 8px; border-right: 1px solid #42483f;
  color: #868d82; font: 800 9px/1 'Trebuchet MS', sans-serif; letter-spacing: .8px;
}
.tab.on { color: #171a15; background: var(--stencil); }
.tab.on::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--stencil); z-index: 2;
}
#shopMin { border-left: 1px solid #42483f; color: #a4aa9e; padding: 0 9px; }

body:not(.toque) #shopBody {
  flex: 1 1 0; min-height: 0; max-height: none;
  padding: 10px 9px 28px; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-gutter: stable;
  scrollbar-color: #737a6e #181b17;
}
.sec.on { animation: manifestoEntra .16s ease-out both; }
@keyframes manifestoEntra {
  from { opacity: 0; transform: translateX(-7px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sec.on { animation: none; } }

.arsenalTitulo {
  display: flex; align-items: center; gap: 7px; margin: 10px 1px 6px;
  color: #c9bea0; font: 900 9px/1 'Courier New', monospace; letter-spacing: 2px;
}
.arsenalTitulo::before { content: ''; width: 18px; height: 2px; background: var(--stencil); }
.arsenalTitulo::after { content: ''; flex: 1; border-top: 1px dashed #4c534a; }

.cardRow {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
  justify-content: stretch;
}
.card {
  min-height: 88px; padding: 8px 7px 20px;
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto; column-gap: 7px; align-items: start;
  overflow: hidden; clip-path: none; border: 1px solid #555d52; border-left: 3px solid #747c70;
  border-radius: 1px; text-align: left;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #2a3028, #1e231d);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.card::after {
  content: ''; position: absolute; right: -13px; top: -13px; width: 25px; height: 25px;
  transform: rotate(45deg); background: #111511; border-left: 1px solid #596055;
}
.card:hover:not(:disabled) {
  transform: translateX(3px); border-color: #a8ad9e; border-left-color: var(--stencil);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #353c31, #252b23);
}
.cardIcon {
  grid-row: 1 / 4; grid-column: 1; width: 52px; height: 52px; margin: 5px 0 0;
  align-self: center; filter: saturate(.82) contrast(1.05);
}
.cardName {
  grid-column: 2; min-height: 0; padding-right: 5px;
  color: #e4dcc5; font: 800 11px/1.1 'Trebuchet MS', sans-serif;
}
.cardSub {
  grid-column: 2; min-height: 0; margin: 3px 0 12px;
  color: #929a8f; font: 9px/1.2 'Trebuchet MS', sans-serif;
}
.cardTag {
  left: auto; right: 5px; bottom: 4px; transform: rotate(-1deg);
  border: 0; border-top: 1px solid #8c8367; padding: 1px 5px;
  background: #c9bea1; box-shadow: 0 1px 3px #000;
  font-size: 10px;
}
.stamp {
  top: auto; left: 5px; bottom: 4px; transform: rotate(-5deg);
  font-size: 7px; padding: 1px 3px; background: rgba(15,18,14,.9);
}
.card.owned, .card.equipped {
  border-color: #70805e; border-left-color: var(--acid);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #30392a, #20271d);
}
.card.equipped { box-shadow: inset 3px 0 0 var(--acid), inset 0 0 22px rgba(162,191,115,.08); }
.card.noMoney { border-left-color: #70463f; opacity: .72; }
.card.noMoney .cardTag { background: #b9958d; color: #511b16; }
.card[data-armor] { border-left-color: var(--azul-kit); }
.card[data-build] { border-left-color: #86916b; }
.card[data-track] { border-left-color: var(--ferrugem); }
.municaoRow .card { border-left-color: var(--stencil); border-color: #6c633f; }
.varianteArma {
  left: 4px; right: auto; top: 3px; max-width: 58px;
  color: #d3c58e; font: 7px/1 'Courier New', monospace;
}

/* O arsenal funciona como manifesto de requisição: uma arma por linha, com
   silhueta larga. Em duas colunas os modelos longos viravam miniaturas ilegíveis. */
body:not(.toque) .sec[data-sec="armas"] > .cardRow:not(.municaoRow) {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon] {
  min-height: 90px;
  grid-template-columns: 150px minmax(0, 1fr);
  padding: 10px 10px 20px;
  border: 1px solid #596157; border-left: 4px solid #7d8678;
  background:
    linear-gradient(90deg, rgba(195,204,184,.07) 0 150px, transparent 150px),
    linear-gradient(135deg, #252b24, #171c17);
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon]::before {
  content: ''; position: absolute; z-index: 0;
  left: 150px; top: 8px; bottom: 8px;
  border-left: 1px dashed #51594f;
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon] .cardIcon {
  position: relative; z-index: 1;
  width: 142px; height: 64px; margin: 3px 0 0;
  object-fit: contain; filter: saturate(1.05) brightness(1.2) contrast(1.12) drop-shadow(0 5px 4px #000a);
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon] .cardName {
  position: relative; z-index: 1;
  color: #f0ead8; font: 900 13px/1.1 'Trebuchet MS', sans-serif;
  letter-spacing: .2px;
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon] .cardSub {
  position: relative; z-index: 1;
  color: #aeb6a9; font-size: 10px; line-height: 1.25; margin: 5px 0 10px;
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon] .varianteArma {
  left: 8px; top: 4px; max-width: 120px;
  padding: 2px 4px; background: rgba(10,13,10,.82);
  font-size: 7.5px;
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon]:hover:not(:disabled) {
  transform: translateX(2px);
  background:
    linear-gradient(90deg, rgba(231,185,68,.13) 0 150px, transparent 150px),
    linear-gradient(135deg, #30372e, #1d231c);
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon]:focus-visible {
  outline: 2px solid var(--stencil); outline-offset: -3px;
}
body:not(.toque) .sec[data-sec="armas"] .card[data-weapon] .cardTag {
  color: #181a16; background: #ddd3b6;
  border-top-color: #f2e9cf; font-weight: 900;
}

.setRow {
  margin: 0 0 12px; padding: 7px;
  border: 1px dashed #535a51; background: rgba(48,55,45,.28);
}
.setHead {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px;
  margin: 0 0 7px; padding: 0 0 6px 8px; border-bottom: 1px solid #424941;
}
.setHead b { font-size: 11px; }
.setHead small { grid-column: 1 / -1; font-size: 9px; line-height: 1.25; }
.setHead .pip { transform: none; width: 12px; height: 5px; }

body:not(.toque) #shop.building:not(.consultando),
body:not(.toque) #shop.min {
  width: 290px; height: auto; opacity: .78; box-shadow: 6px 8px 18px rgba(0,0,0,.35);
}
body:not(.toque) #shop.building:not(.consultando) #shopMast,
body:not(.toque) #shop.min #shopMast { min-height: 40px; }
body:not(.toque) #shop.building:not(.consultando):not(.min):hover {
  width: 430px; height: calc(100vh - 245px); opacity: 1; box-shadow: 12px 14px 34px rgba(0,0,0,.46);
}
body:not(.toque) #shop.building:not(.consultando):not(.min):hover #shopBody {
  max-height: none; padding: 10px 9px 28px; overflow-y: auto;
}
body:not(.toque) #shop.building:not(.consultando):not(.min):hover .tab { padding: 10px 5px 8px; font-size: 9px; }
body:not(.toque) #shop.building:not(.consultando):not(.min)::after,
body:not(.toque) #shop.min::after {
  left: 0; transform: none; color: #aaa58f; font: 8px 'Courier New', monospace;
}

/* HUD: uma faixa de sobrevivência baixa e curta, fora do painel de estoque. */
body:not(.toque) #hud {
  left: 12px; right: auto; bottom: 12px; transform: none;
  width: min(430px, calc(100vw - 24px)); min-width: 0; padding: 8px 10px 7px;
  border: 1px solid rgba(102,110,99,.7); border-bottom: 3px solid #30362f;
  background: linear-gradient(180deg, rgba(21,25,21,.86), rgba(8,10,8,.88));
  box-shadow: 0 8px 24px rgba(0,0,0,.42);
}
body:not(.toque) #xpRow { position: absolute; left: 10px; top: -17px; margin: 0; }
body:not(.toque) #xpBar { width: 112px; height: 6px; border-radius: 0; }
body:not(.toque) #hpBar { width: 150px; height: 12px; border-radius: 0; float: left; margin: 3px 10px 0 0; }
body:not(.toque) #hudInfo { display: flex; min-height: 18px; margin: 0; align-items: center; flex-wrap: wrap; font-size: 13px; }
body:not(.toque) #hudInfo .hudKey { margin-left: 7px; font-size: 9px; }
body:not(.toque) #weapons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
body:not(.toque) .wslot {
  min-width: 0; border: 1px solid #525950; border-radius: 1px;
  background: rgba(25,29,24,.9); padding: 4px 8px;
}
body:not(.toque) .wslot.sel { border-color: var(--stencil); box-shadow: inset 3px 0 0 var(--stencil); }

/* Ficha: dossiê assimétrico, com os slots parecendo bolsos costurados. */
#charPanel {
  border: 1px solid #697166; border-left: 5px solid var(--azul-kit); border-radius: 1px;
  width: min(94vw, 650px);
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 6px 100%,
    #161a16;
}
#charHead {
  min-height: 48px; padding: 9px 15px; border-bottom: 1px dashed #666d63;
  background: linear-gradient(90deg, rgba(120,148,160,.18), transparent 55%);
}
#charHead h2 { color: #c5d1d2; font-size: 14px; }
#charBody { gap: 15px; padding: 15px; }
#charLeft {
  width: 220px; padding: 9px; background: #20261f;
  border: 1px solid #4f574e; border-bottom: 5px solid #373e36;
}
#charView {
  width: 200px; height: 270px; border: 0;
  background:
    linear-gradient(transparent 49%, rgba(151,163,150,.12) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(151,163,150,.12) 50%, transparent 51%),
    radial-gradient(circle at 50% 32%, #3c4638, #111510 72%);
}
#charName { font-family: 'Arial Black', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
#charRight { padding: 2px 0; }
.statRow {
  padding: 5px 7px; border-bottom: 1px dashed #454c44;
  background: linear-gradient(90deg, rgba(120,148,160,.07), transparent);
}
#charSlots { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.slotBox {
  position: relative; min-height: 94px; padding: 6px 5px;
  border: 1px dashed #626a60; border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    #242a23;
  box-shadow: inset 0 0 0 3px #1b201a;
}
.slotBox.filled { border: 1px solid #788377; box-shadow: inset 0 0 0 3px #1b201a, inset 4px 0 0 var(--azul-kit); }
.slotBox small { color: #a5ada3; font-family: 'Courier New', monospace; }

/* Toque mantém a coluna à esquerda; em retrato sobra uma tira do mapa à direita. */
body.toque #shop,
body.toque.td #shop {
  left: calc(8px + env(safe-area-inset-left)); right: auto; transform: none;
  width: min(86vw, 344px); border-left: 4px solid var(--stencil);
  background: rgba(13,16,13,.97); overflow: hidden;
}
body.toque #shopMast { min-height: 44px; padding: 5px 7px; }
body.toque #shopBody {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-gutter: stable; padding-bottom: 26px;
}
body.toque #shopMast b { font-size: 12px; }
body.toque #shopMast small { font-size: 8px; }
body.toque .smCodigo { display: none; }
body.toque .cardRow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
body.toque .card {
  min-height: 74px; padding: 5px 4px 17px;
  grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto 1fr auto; column-gap: 4px;
}
body.toque .cardIcon { grid-row: 1 / 4; width: 40px; height: 40px; margin-top: 4px; }
body.toque .cardName { grid-column: 2; font-size: 9px; min-height: 0; }
body.toque .cardSub { grid-column: 2; font-size: 7.5px; min-height: 0; margin: 2px 0 9px; }
body.toque .cardTag { font-size: 8.5px; }
body.toque .stamp { top: auto; bottom: 3px; font-size: 6.5px; }
body.toque .varianteArma { top: 2px; font-size: 6px; }

@media (max-width: 620px) {
  #charPanel { width: min(96vw, 430px); max-height: 94vh; overflow-y: auto; }
  #charBody { flex-direction: column; align-items: stretch; }
  #charLeft { width: 100%; }
  #charView { display: block; margin: auto; }
}

/* ---------- acesso do dono e calibrador de armas ---------- */
#adminSandbox {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  background:
    radial-gradient(circle at 38% 42%, color-mix(in srgb, var(--panel-line) 30%, transparent), transparent 34%),
    linear-gradient(145deg, var(--panel), var(--ink) 68%);
}
#aaPreview {
  display: block; width: calc(100% - 418px); height: 100%; touch-action: none;
  outline: none; user-select: none; -webkit-user-select: none;
}
#aaPreview:focus-visible { box-shadow: inset 0 0 0 2px var(--stencil); }
#adminSandbox.girando-boneco #aaPreview { cursor: ew-resize; }
#adminSandbox.movendo-arma #aaPreview { cursor: move; }
#adminSandbox.rotacionando-arma #aaPreview { cursor: crosshair; }
#adminSandbox.arrastando #aaPreview { cursor: grabbing; }
.aaSandboxTitulo {
  position: absolute; top: 24px; left: 28px; pointer-events: none;
  border-left: 4px solid var(--stencil); padding: 4px 0 4px 12px;
  color: var(--bone); text-shadow: 0 2px 10px var(--ink);
}
.aaSandboxTitulo small {
  color: var(--stencil); font: 700 9px/1 'Courier New', monospace; letter-spacing: .18em;
}
.aaSandboxTitulo h1 { margin: 5px 0 6px; font-size: clamp(19px, 2.4vw, 34px); letter-spacing: .08em; }
.aaSandboxTitulo p { margin: 0; color: var(--steel); font: 700 10px/1.4 'Courier New', monospace; }
.aaPreviewFerramentas {
  position: absolute; right: 432px; bottom: 24px; left: 28px;
  display: grid; justify-items: center; gap: 8px; pointer-events: none;
}
.aaModosInteracao {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 5px;
  pointer-events: auto; background: color-mix(in srgb, var(--ink) 88%, transparent);
  border: 1px solid var(--panel-line); box-shadow: 0 10px 30px var(--ink);
}
.aaModosInteracao button {
  min-height: 38px; padding: 0 13px; border: 1px solid var(--panel-line);
  background: var(--panel); color: var(--steel);
  font: 700 9px/1 'Courier New', monospace; letter-spacing: .08em;
}
.aaModosInteracao button:hover, .aaModosInteracao button:focus-visible {
  border-color: var(--stencil); color: var(--bone);
}
.aaModosInteracao button.on {
  border-color: var(--stencil); background: var(--card); color: var(--stencil);
  box-shadow: inset 0 -2px 0 var(--stencil);
}
#aaInteracaoDica {
  margin: 0; padding: 5px 8px; color: var(--bone);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  font: 700 9px/1.3 'Courier New', monospace; text-align: center;
  text-shadow: 0 2px 8px var(--ink);
}
body.admin-sandbox #adminArmasAtalho { z-index: 91; }
#adminAcesso {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--ink) 88%, transparent);
}
#adminLogin {
  position: relative; width: min(420px, 100%); padding: 22px;
  color: var(--bone); background: var(--panel); border: 2px solid var(--panel-line);
  border-left: 5px solid var(--stencil); box-shadow: 0 18px 60px var(--ink);
}
#adminLogin > small { color: var(--steel); font: 700 9px/1 'Courier New', monospace; letter-spacing: .18em; }
#adminLogin h2 { margin: 5px 0 12px; color: var(--stencil); font-size: 20px; }
#adminLogin p { margin: 0 0 18px; color: var(--steel); font-size: 13px; line-height: 1.4; }
#adminLogin label {
  display: grid; gap: 6px; margin-bottom: 12px; color: var(--steel);
  font: 700 10px/1 'Courier New', monospace; letter-spacing: .12em; text-transform: uppercase;
}
#adminSenha {
  width: 100%; min-height: 44px; border: 1px solid var(--panel-line); border-radius: 0;
  background: var(--ink); color: var(--bone); padding: 8px 10px; outline: none;
  font: 16px 'Courier New', monospace;
}
#adminSenha:focus { border-color: var(--stencil); }
#adminLoginStatus, #aaStatus {
  display: block; min-height: 15px; color: var(--steel);
  font: 700 9px/1.4 'Courier New', monospace; letter-spacing: .05em;
}
#adminLoginStatus { margin-top: 10px; text-align: center; }
#adminLoginStatus[data-estado="erro"], #aaStatus[data-estado="erro"] { color: var(--blood); }
#aaStatus[data-estado="sucesso"] { color: var(--acid); }
#aaStatus[data-estado="pendente"] { color: var(--stencil); }
#adminArmasAtalho {
  position: fixed; right: 16px; bottom: 78px; z-index: 31;
  border: 1px solid var(--panel-line); border-left: 4px solid var(--stencil);
  background: var(--panel); color: var(--bone); padding: 8px 11px;
  font: 700 10px/1 'Courier New', monospace; letter-spacing: .12em;
  box-shadow: 0 8px 24px var(--ink);
}
#adminArmasAtalho kbd { margin-left: 6px; color: var(--stencil); }
#adminArmas {
  display: none; position: fixed; z-index: 90;
  top: 14px; right: 14px; bottom: 14px;
  width: min(390px, calc(100vw - 28px));
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--bone); background: var(--ink);
  border: 1px solid var(--panel-line); border-left: 5px solid var(--stencil);
  box-shadow: 0 18px 60px var(--ink);
  font-family: 'Courier New', monospace;
}
#adminArmas.on { display: block; }
#adminArmas header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 12px; background: var(--panel);
  border-bottom: 1px dashed var(--panel-line);
}
#adminArmas header div { display: grid; gap: 4px; }
#adminArmas header small { color: var(--stencil); font-size: 9px; letter-spacing: .18em; }
#adminArmas header b { color: var(--bone); font: 800 15px/1 Arial, sans-serif; letter-spacing: .12em; }
#aaFechar {
  width: 32px; height: 32px; border: 1px solid var(--panel-line);
  background: var(--ink); color: var(--bone);
}
.aaAviso {
  margin: 0; padding: 10px 14px; color: var(--steel); font-size: 10px;
  line-height: 1.45; border-bottom: 1px solid var(--panel-line);
}
.aaContextos { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 14px 8px; }
.aaContextos button {
  min-height: 34px; border: 1px solid var(--panel-line); background: var(--panel);
  color: var(--steel); font: 700 10px/1 'Courier New', monospace; letter-spacing: .05em;
}
.aaContextos button.on { border-color: var(--stencil); background: var(--card); color: var(--stencil); }
.aaSelect {
  display: grid; grid-template-columns: 102px 1fr; align-items: center; gap: 10px;
  margin: 7px 14px; color: var(--steel); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
}
.aaSelect select {
  width: 100%; min-width: 0; height: 34px; border: 1px solid var(--panel-line);
  border-radius: 0; background: var(--panel); color: var(--bone); padding: 0 8px;
  font: 11px 'Courier New', monospace;
}
#aaCampos { margin-top: 12px; }
.aaGrupoCampos {
  min-width: 0; margin: 0; padding: 0; border: 0;
  border-top: 1px dashed var(--panel-line);
}
.aaGrupoCampos legend {
  display: flex; width: 100%; box-sizing: border-box; align-items: baseline;
  justify-content: space-between; gap: 8px; padding: 10px 14px 6px;
  color: var(--stencil); background: var(--panel);
  font: 700 9px/1.2 'Courier New', monospace; letter-spacing: .08em;
  text-transform: uppercase;
}
.aaGrupoCampos legend small {
  color: var(--steel); font-size: 7px; letter-spacing: .04em; text-align: right;
}
.aaCampo {
  display: grid; grid-template-columns: 112px 1fr 62px; align-items: center;
  gap: 10px; min-height: 61px; padding: 6px 14px; border-bottom: 1px solid var(--panel-line);
}
.aaCampo > span { display: grid; gap: 4px; }
.aaCampo b { color: var(--bone); font-size: 11px; }
.aaCampo small { color: var(--steel); font-size: 8px; }
.aaCampo input[type="range"] { width: 100%; accent-color: var(--stencil); }
.aaValor { position: relative; display: block; width: 62px; }
.aaCampo input[type="number"] {
  width: 62px; height: 30px; box-sizing: border-box;
  border: 1px solid var(--panel-line); border-radius: 0;
  background: var(--panel); color: var(--stencil); padding: 0 5px;
  text-align: right; font: 700 11px 'Courier New', monospace;
}
.aaValor i {
  position: absolute; top: 50%; right: 5px; translate: 0 -50%;
  color: var(--steel); font: 700 10px/1 'Courier New', monospace;
  pointer-events: none;
}
.aaValor.comUnidade input { padding-right: 15px; }
.aaValor.comUnidade input[type="number"] { appearance: textfield; }
.aaValor.comUnidade input[type="number"]::-webkit-inner-spin-button,
.aaValor.comUnidade input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; }
#aaLeitura {
  display: block; margin: 10px 14px; padding: 8px;
  color: var(--steel); background: var(--panel); border-left: 2px solid var(--stencil);
  font-size: 9px;
}
#aaStatus { margin: 0 14px 8px; }
.aaAcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 14px 12px; }
.aaAcoes button {
  min-height: 34px; border: 1px solid var(--panel-line); background: var(--panel);
  color: var(--bone); font: 700 9px/1 'Courier New', monospace;
}
.aaAcoes .publicar {
  grid-column: 1 / -1; min-height: 42px;
  border-color: var(--acid); color: var(--ink); background: var(--acid);
  font-size: 10px; letter-spacing: .08em;
}
.aaAcoes .perigo { grid-column: 1 / -1; border-color: var(--blood); color: var(--blood); }
.aaAcoes .sair { grid-column: 1 / -1; border: 0; background: transparent; color: var(--steel); }
#adminArmas footer {
  padding: 10px 14px 14px; color: var(--steel); border-top: 1px dashed var(--panel-line);
  font-size: 8px; text-align: center; letter-spacing: .05em;
}
body.admin-armas-aberto #adminArmasAtalho { display: none !important; }
body.toque #adminArmasAtalho {
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  bottom: auto;
}

@media (max-height: 650px) {
  #adminArmas { top: 6px; right: 6px; bottom: 6px; }
  .aaCampo { min-height: 49px; }
}
@media (max-width: 430px) {
  body.admin-sandbox #adminArmas {
    inset: 43vh 0 0; width: 100%; border-right: 0; border-bottom: 0;
  }
  body.admin-sandbox #aaPreview { width: 100%; height: 43vh; }
  .aaSandboxTitulo { top: 14px; left: 14px; max-width: calc(100vw - 28px); }
  .aaSandboxTitulo p { font-size: 8px; }
  .aaPreviewFerramentas {
    inset: auto 8px calc(57vh + 8px); gap: 5px;
  }
  .aaModosInteracao { max-width: 100%; padding: 3px; gap: 3px; }
  .aaModosInteracao button { min-height: 34px; padding-inline: 8px; font-size: 8px; }
  #aaInteracaoDica { max-width: calc(100vw - 16px); font-size: 7.5px; }
  .aaCampo { grid-template-columns: 94px minmax(80px, 1fr) 58px; gap: 6px; padding-inline: 9px; }
  .aaValor, .aaCampo input[type="number"] { width: 58px; }
  .aaCampo input[type="number"] { font-size: 16px; }
  .aaGrupoCampos legend { padding-inline: 9px; }
}