: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 {
  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, #shop.min { box-shadow: none; width: min(80vw, 330px); }
#shop.building { opacity: .28; }
#shop.min { opacity: .62; } /* mais visível: o botão de reabrir precisa ser achável */
#shop.building #shopBody, #shop.min #shopBody { max-height: 0; padding: 0; overflow: hidden; }
#shop.building .tab, #shop.min .tab { padding: 3px 8px 2px; font-size: 9.5px; letter-spacing: 1px; }
#shop.building: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(.min):hover #shopBody { max-height: 66vh; padding: 10px 10px 18px; overflow-y: auto; }
#shop.building:not(.min):hover .tab { padding: 9px 18px 7px; font-size: 12px; letter-spacing: 2px; }
#shop.building: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(.min):hover::after { display: none; }
#shop.min::after {
  content: 'loja minimizada · M ou ▴ 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 {
  background: rgba(0,0,0,.6); border: 2px solid #444; border-radius: 6px;
  padding: 4px 10px; font-size: 13px; cursor: pointer; color: #ddd;
}
.wslot.sel { border-color: var(--stencil); color: var(--stencil); }
.wslot b { margin-right: 5px; color: #888; }
.wslot.sel b { color: var(--stencil); }

#perks {
  position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 2px solid #d4a017; border-radius: 4px;
  padding: 12px 18px; display: none; text-align: center; z-index: 5;
}
#perkTitle { color: var(--stencil); font-weight: bold; font-size: 16px; margin-bottom: 10px; letter-spacing: 2px; text-shadow: 1px 1px 2px #000; font-family: 'Arial Black', sans-serif; text-transform: uppercase; }
.perkRow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.perkBtn {
  background: #2a2416; color: #ffe9b0; border: 2px solid #7a6420; border-radius: 4px;
  padding: 10px 14px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 8px;
}
.perkBtn:hover { border-color: var(--stencil); background: #3a3220; }
.perkBtn:disabled { opacity: .4; cursor: default; border-color: #4a4030; }
.perkBtn:disabled:hover { border-color: #4a4030; background: #2a2416; }
.perkBtn kbd {
  background: #0d0b06; color: var(--stencil); border: 1px solid #7a6420; border-radius: 3px;
  padding: 2px 7px; font-family: inherit; font-size: 12px; font-weight: bold; line-height: 1.2;
}
/* pisca no atalho quando ele é usado: confirma que a tecla pegou sem tirar o olho da horda */
.perkBtn.hit { border-color: var(--stencil); background: #4a4028; }
#perkHint { color: #b8a97a; font-size: 11px; margin-top: 8px; letter-spacing: 1px; }

#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); }
#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; }
  #perkTitle { font-size: 13px; }
  .perkBtn { font-size: 12px; padding: 8px 10px; }
  #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; }
}

/* 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%; transform: translate(-50%, -50%); }
}

/* ================= 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 #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 #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); }

/* 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 #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 #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 #readyBtn { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 8px 12px; font-size: 13px; }
  body.toque #buildHint { font-size: 11.5px; }
}