html{
  scrollbar-gutter: stable;
}
:root{
  --bg:#0d1117;
  --panel:#161b22;
  --panel2:#1c2330;
  --border:#2a3342;
  --accent:#3ddc97;
  --accent2:#e0b84b;
  --danger:#e0564b;
  --text:#e6edf3;
  --muted:#8b96a5;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:radial-gradient(circle at 50% 0%, #182131, var(--bg) 60%);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:14px;
}
h1{
  font-size:27px;
  margin:4px 0 12px 0;
  letter-spacing:0.5px;
  color:var(--accent);
  text-shadow:0 0 12px rgba(61,220,151,0.35);
}
.wrap{
  display:flex;
  gap:14px;
  max-width:1180px;
  width:100%;
  align-items:flex-start;
  flex-wrap:wrap;
  justify-content:center;
}
.game-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* HUD — uma linha só: dinheiro/vidas à esquerda, pontos ao centro, som à direita */
#topbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 16px;
}
.hud-left{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:16px;
  font-size:21px;
  font-weight:700;
}
.hud-left b{margin-left:5px;}
.stat-gold b{color:#ffd75e;}
.stat-lives b{color:#ff6b5e;}
.hud-center{
  justify-self:center;
  font-size:30px;
  font-weight:800;
  letter-spacing:1px;
  color:#4bffb0;
  text-shadow:0 0 14px rgba(75,255,176,0.6);
}
.hud-center b{margin-left:6px;}
.hud-right{
  justify-self:end;
  font-size:20px;
  cursor:pointer;
}

#canvasHolder{
  position:relative;
  border:2px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
}
canvas{
  display:block;
  background:#111823;
  cursor:pointer;
  /* força a promoção pra camada de composição própria já no primeiro
     frame — evita o canvas nascer com uma suavização diferente até a
     primeira interação forçar uma recomposição (comum em Chromium) */
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* controles ancorados no canto inferior direito do board */
#controlsBar{
  position:absolute;
  right:10px;
  bottom:10px;
  display:flex;
  gap:6px;
  background:rgba(10,14,20,0.6);
  padding:6px;
  border-radius:10px;
}
.ctrl-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.ctrl-btn.primary{
  background:var(--accent);
  color:#06120c;
  border:none;
}
.ctrl-btn:disabled{opacity:0.45; cursor:not-allowed;}

#overlay{
  position:absolute;
  inset:0;
  background:rgba(6,9,14,0.92);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:20px;
  gap:8px;
  overflow-y:auto;
}
#overlay h2{
  color:var(--danger);
  font-size:26px;
  margin:6px 0 0 0;
}
#overlay p{margin:2px 0; color:var(--muted);}
#overlay button{
  margin-top:10px;
}
.side{
  width:280px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
}
.panel h3{
  margin:0 0 8px 0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}

/* grid de torres: 3 colunas x 2 linhas, só ícone + custo */
.tower-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.tower-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:15px 4px;
  cursor:pointer;
  transition:transform .08s ease, border-color .15s ease;
}
.tower-btn:hover{border-color:var(--accent);}
.tower-btn.selected{
  border-color:var(--accent);
  background:#1f3327;
  box-shadow:0 0 0 1px var(--accent) inset;
}
.tower-btn .icon{font-size:36px; line-height:1;}
.tower-btn .cost{color:var(--accent2); font-weight:700; font-size:14px;}
.tower-btn.disabled{opacity:0.35; cursor:not-allowed;}

button.action{
  background:var(--accent);
  color:#06120c;
  border:none;
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  font-size:13px;
  width:100%;
  margin-bottom:6px;
}
button.action.secondary{
  background:var(--panel2);
  color:var(--text);
  border:1px solid var(--border);
}
button.action.danger{
  background:var(--danger);
  color:#1a0604;
}
button.action:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

/* torre selecionada: dois botões grandes, só ícone + valor */
.sel-actions{
  display:flex;
  gap:8px;
}
.icon-action{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:26px;
  padding:14px 4px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
}
.icon-action b{font-size:13px; color:var(--accent2);}
.icon-action.danger b{color:#ffb3ab;}
.icon-action.super{border-color:#6b5a1f;}
.icon-action.super b{color:#ffd75e;}
.icon-action:disabled{opacity:0.4; cursor:not-allowed;}

.sel-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:8px;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}
.sel-stats b{color:var(--accent2);}

/* popup de recompensa (a cada 7 ondas) */
#rewardModal{
  position:absolute;
  inset:0;
  background:rgba(6,9,14,0.92);
  display:none;
  align-items:center;
  justify-content:center;
}
.reward-box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  text-align:center;
}
.reward-box h3{
  margin:0 0 14px 0;
  font-size:15px;
  color:var(--text);
  text-transform:none;
  letter-spacing:0;
}
.reward-options{display:flex; gap:10px;}
.reward-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:32px;
  padding:16px 18px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
}
.reward-btn:hover{border-color:var(--accent);}
.reward-btn span{font-size:12px; font-weight:700;}

.hint{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

#enemyPreview{
  /* width:0 + min-width:100% — a prévia ocupa a largura da coluna mas nunca
     a alarga (com 5 chefes da Revolta em campo, ela empurrava o painel de
     torres pra baixo); se não couber, rola na horizontal */
  width:0;
  min-width:100%;
  height:40px;
  display:flex;
  gap:6px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 10px;
}
.wave-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  padding-right:8px;
  margin-right:2px;
  border-right:1px solid var(--border);
  flex:0 0 auto;
  white-space:nowrap;
}
.enemy-badge{
  width:24px;
  height:24px;
  flex:0 0 auto;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  box-shadow:0 0 6px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.15);
}

/* ranking global (exibido só no fim de jogo) */
#rankingPanel{
  width:260px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}
#rankingPanel h3{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}
#rankingList{display:flex; flex-direction:column; gap:4px; max-height:150px; overflow-y:auto;}
.rank-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 6px;
  border-radius:6px;
  background:var(--panel2);
}
.rank-row .rank-pos{
  width:26px;
  color:var(--accent2);
  font-weight:700;
}
.rank-row .rank-name{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rank-row .rank-score{color:var(--accent); font-weight:600;}
.rank-row .rank-wave{color:var(--muted); font-size:11px;}
#rankingPager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}
#rankingPager button.action{width:auto; padding:4px 12px; margin:0;}

/* envio de pontuação no fim de jogo */
#scoreSubmit{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:220px;
  max-width:100%;
  margin-top:6px;
}
#playerName{
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
}
#submitStatus{min-height:14px;}

/* ---------- CABEÇALHO + MENU DO USUÁRIO (topo direito) ---------- */
#appHeader{
  width:100%;
  max-width:1180px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:12px;
}
#appHeader h1{ grid-column:2; margin:4px 0; text-align:center; }
.user-menu{ grid-column:3; justify-self:end; position:relative; }
.user-menu-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 12px 4px 4px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:999px;
  cursor:pointer;
  color:var(--text);
  transition:border-color 0.15s, box-shadow 0.15s;
}
.user-menu-btn:hover,
.user-menu-btn[aria-expanded="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(61,220,151,0.15);
}
.user-avatar, .um-profile-avatar{
  width:34px; height:34px;
  border-radius:50%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel2);
  flex-shrink:0;
}
.user-menu-btn.logged .user-avatar{ box-shadow:0 0 0 2px var(--accent); }
.user-avatar img, .um-profile-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-fallback{ font-size:18px; opacity:0.8; }
.user-menu-bars{ display:flex; flex-direction:column; gap:3px; }
.user-menu-bars i{ display:block; width:16px; height:2px; border-radius:1px; background:var(--muted); }
.user-menu-btn:hover .user-menu-bars i{ background:var(--accent); }

.user-menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:290px;
  max-width:calc(100vw - 28px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,0.55);
  z-index:150;
  overflow:hidden;
  animation:umIn 0.14s ease-out;
}
.user-menu-panel[hidden]{ display:none; }
@keyframes umIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.um-account{ padding:16px; border-bottom:1px solid var(--border); background:var(--panel2); }
.um-account[hidden]{ display:none; }
.um-profile{ display:flex; align-items:center; gap:12px; }
.um-profile-avatar{ width:46px; height:46px; }
.um-profile-text{ min-width:0; }
.um-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.um-email{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.um-sync{ font-size:11px; color:var(--accent); margin-top:4px; }
.um-guest-title{ font-weight:700; font-size:14px; }
.um-guest-hint{ font-size:12px; color:var(--muted); margin:4px 0 12px; line-height:1.45; }
.um-google{ min-height:44px; display:flex; justify-content:center; }
.um-error{ font-size:11.5px; color:var(--danger); margin-top:6px; text-align:center; }
.um-error:empty{ display:none; }

.um-links{ display:flex; flex-direction:column; padding:6px; }
.um-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:9px;
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}
.um-link[hidden]{ display:none; }
.um-link:hover{ background:var(--panel2); color:var(--accent); }
.um-icon{ width:22px; text-align:center; font-size:17px; }

.um-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--border);
}
.um-lang{ display:flex; gap:4px; }
.um-logout{
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
}
.um-logout:hover{ color:var(--danger); border-color:var(--danger); }
.um-logout[hidden]{ display:none; }
.um-legal{
  display:flex;
  justify-content:center;
  gap:6px;
  padding:0 12px 10px;
  font-size:11px;
  color:var(--muted);
}
.um-legal a{ color:var(--muted); text-decoration:none; }
.um-legal a:hover{ color:var(--accent); text-decoration:underline; }

@media (max-width:600px){
  #appHeader{ grid-template-columns:1fr auto; gap:8px; }
  #appHeader h1{ grid-column:1; font-size:19px; text-align:left; }
  .user-menu{ grid-column:2; }
}

/* popups de página inteira (Ranking global e Manual) */
.page-modal{
  position:fixed;
  inset:0;
  background:rgba(4,6,10,0.82);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:20px;
}
.page-modal-box{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(61,220,151,0.08);
  padding:28px;
}
.page-modal-big{
  width:100%;
  max-width:640px;
  max-height:85vh;
  overflow-y:auto;
}
.page-modal-box h2{
  margin:0 0 4px 0;
  font-size:22px;
  color:var(--accent);
  text-shadow:0 0 10px rgba(61,220,151,0.3);
}
.page-modal-box h3{
  margin:22px 0 10px 0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}
.page-modal-box h3:first-of-type{margin-top:4px;}
.modal-close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:15px;
  cursor:pointer;
}
.modal-close:hover{border-color:var(--danger); color:var(--danger);}
.manual-version{
  position:absolute;
  top:22px; right:58px;
  font-size:10px;
  color:var(--muted);
  opacity:0.5;
  letter-spacing:0.5px;
}

/* ---------- SPLASH SCREEN ---------- */
#splashModal{
  position:fixed;
  inset:0;
  background:rgba(4,6,10,0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:20px;
}
.splash-box{
  position:relative;
  width:100%;
  max-width:840px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(224,184,75,0.15);
}
.lang-switch{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
  display:flex;
  gap:4px;
  background:rgba(4,6,10,0.55);
  border-radius:8px;
  padding:4px;
  backdrop-filter:blur(2px);
}
.lang-btn{
  padding:5px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  cursor:pointer;
}
.lang-btn:hover{ color:var(--text); }
.lang-btn.active{
  color:#2a1d06;
  background:var(--accent2);
}
@media (max-width:600px){
  .lang-switch{ top:8px; right:8px; }
  .lang-btn{ padding:4px 7px; font-size:10px; }
}
.splash-img{
  display:block;
  width:100%;
  height:auto;
}
.splash-buttons{
  position:absolute;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(2, auto); /* 2×2: Fácil/Normal em cima, Aventura/Revolta embaixo */
  gap:10px;
  justify-items:center;
}
.splash-btn{
  width:160px;
  padding:10px 0;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#2a1d06;
  background:linear-gradient(180deg, #f4d98a, var(--accent2) 60%, #b8892f);
  border:1px solid #8a651f;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  transition:transform 0.1s, box-shadow 0.1s;
}
.splash-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}
.splash-btn:active{ transform:translateY(0); }
@media (max-width:600px){
  .splash-btn{ width:130px; font-size:13px; padding:8px 0; }
}
.splash-btn.play{ width:240px; padding:14px 0; font-size:22px; letter-spacing:4px; }
@media (max-width:600px){ .splash-btn.play{ width:180px; padding:11px 0; font-size:17px; } }

/* ---------- TELA DE MODOS (v41) ---------- */
#modeModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:20px;
  background:radial-gradient(circle at 50% 0%, #1b2538, #05080d 70%);
  overflow-y:auto;
}
.mode-screen{ width:100%; max-width:1120px; margin:auto; }
.mode-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:18px;
}
.mode-head h2{
  margin:0;
  font-size:26px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent2);
  text-shadow:0 0 14px rgba(224,184,75,0.35);
}
.mode-back{
  justify-self:start;
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
}
.mode-back:hover{ color:var(--text); border-color:var(--accent2); }
.mode-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.mode-card{
  --mc:#e0b84b;
  position:relative;
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:0;
  overflow:hidden;
  color:var(--text);
  font:inherit;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--border);
  border-top:3px solid var(--mc);
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mode-card:hover{
  transform:translateY(-4px);
  border-color:var(--mc);
  box-shadow:0 14px 34px rgba(0,0,0,0.6), 0 0 22px color-mix(in srgb, var(--mc) 30%, transparent);
}
.mode-emblem{
  height:150px;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mc) 16%, #0d1117), #0b0f16 75%);
  border-bottom:1px solid var(--border);
}
.mode-emblem{ display:flex; justify-content:center; width:100%; }
.mode-emblem svg{ display:block; height:100%; width:auto; max-width:100%; }
.mode-body{ padding:12px 16px 14px; display:flex; flex-direction:column; gap:6px; flex:1; width:100%; }
.mode-name{
  font-size:18px;
  font-weight:800;
  letter-spacing:0.5px;
  color:var(--mc);
}
.mode-crest{ margin-right:4px; }
.mode-desc{ font-size:12.5px; line-height:1.5; color:var(--muted); flex:1; }
.mode-chips{ display:flex; gap:8px; margin-top:4px; }
.mode-chips span{
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
}
.mode-lock{ display:none; }
.mode-card.locked{ cursor:not-allowed; }
.mode-card.locked .mode-emblem, .mode-card.locked .mode-body{ filter:grayscale(0.85) brightness(0.65); }
.mode-card.locked:hover{ transform:none; box-shadow:0 8px 24px rgba(0,0,0,0.45); border-color:var(--border); }
.mode-card.locked .mode-lock{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  font-size:18px;
  background:rgba(4,6,10,0.8);
  border:1px solid var(--border);
  border-radius:50%;
}
@media (max-width:900px){
  .mode-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .mode-grid{ grid-template-columns:1fr; }
  .mode-head h2{ font-size:19px; }
}
@media (max-height:820px) and (min-width:901px){
  .mode-emblem{ height:112px; }
  .mode-desc{ font-size:12px; }
}

/* ranking — visual "bem bacana": medalhas nos 3 primeiros, linhas listradas */
.ranking-modal-header{margin-bottom:18px;}
.rank-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.rank-tab{
  flex:1 1 auto;
  padding:8px 10px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
}
.rank-tab.active{
  color:#2a1d06;
  background:var(--accent2);
  border-color:#b8892f;
}
.ranking-modal-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:200px;
}
.rank-modal-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:10px;
  background:var(--panel2);
}
.rank-modal-row:nth-child(odd){background:#1a212c;}
.rank-modal-row.top1{background:linear-gradient(90deg,#3a3212,#1c2330); box-shadow:0 0 0 1px rgba(255,215,94,0.4) inset;}
.rank-modal-row.top2{background:linear-gradient(90deg,#2a2d33,#1c2330); box-shadow:0 0 0 1px rgba(200,210,220,0.3) inset;}
.rank-modal-row.top3{background:linear-gradient(90deg,#33241a,#1c2330); box-shadow:0 0 0 1px rgba(224,140,66,0.35) inset;}
.rank-modal-pos{
  width:34px;
  text-align:center;
  font-size:18px;
  font-weight:800;
  color:var(--accent2);
  flex:0 0 auto;
}
.rank-modal-name{
  flex:1;
  font-weight:700;
  font-size:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rank-modal-score{
  font-size:17px;
  font-weight:800;
  color:var(--accent);
  min-width:70px;
  text-align:right;
}
.rank-modal-wave{
  font-size:11px;
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:3px 8px;
  flex:0 0 auto;
}
.rankingPager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:16px;
  font-size:12px;
  color:var(--muted);
}
.rankingPager button.action{width:auto; padding:6px 16px; margin:0;}

/* manual — tabelas de referência */
.manual-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  margin-bottom:8px;
}
.manual-table th{
  text-align:left;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:6px 8px;
  border-bottom:1px solid var(--border);
}
.manual-table td{
  padding:8px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.manual-table td.icon-cell{font-size:20px; width:34px; text-align:center;}
.manual-list{
  margin:0 0 8px 0;
  padding-left:18px;
  font-size:12.5px;
  color:var(--text);
  line-height:1.7;
}
.manual-list li{margin-bottom:4px;}

/* ---------- ACHIEVEMENTS ---------- */
#achievementToasts{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:300;
  display:flex;
  flex-direction:column-reverse;
  gap:10px;
  pointer-events:none;
}
.achv-toast{
  display:flex;
  align-items:center;
  gap:12px;
  width:300px;
  padding:12px 14px;
  background:linear-gradient(135deg, #1c2330, #161b22);
  border:1px solid var(--accent2);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(224,184,75,0.15);
  animation: achv-in 0.35s ease-out, achv-out 0.4s ease-in 4.6s forwards;
}
.achv-toast .achv-icon{font-size:28px; flex-shrink:0;}
.achv-toast .achv-text{min-width:0;}
.achv-toast .achv-label{font-size:10px; color:var(--accent2); text-transform:uppercase; letter-spacing:1px; font-weight:700;}
.achv-toast .achv-name{font-size:14px; font-weight:700; color:var(--text);}
.achv-toast .achv-desc{font-size:11px; color:var(--muted); margin-top:2px;}
@keyframes achv-in{
  from{ transform:translateX(120%); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
@keyframes achv-out{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(120%); opacity:0; }
}

.page-modal-wide{ max-width:1040px; }
/* achievements em 4 colunas (cartões verticais), caindo pra 3/2 em telas menores */
.achievements-list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
@media (max-width:900px){
  .achievements-list{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:640px){
  .achievements-list{ grid-template-columns:repeat(2, 1fr); }
}
.achv-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:14px 10px 12px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:12px;
}
.achv-card .achv-text{ width:100%; }
.achv-card.locked{ opacity:0.5; }
.achv-card.locked .achv-icon{ filter:grayscale(1); }
.achv-card.unlocked{ border-color:var(--accent2); box-shadow:inset 0 0 18px rgba(224,184,75,0.08); }
.achv-card .achv-icon{font-size:30px; line-height:1;}
.achv-card .achv-name{font-size:13px; font-weight:700; color:var(--text);}
.achv-card .achv-desc{font-size:11px; color:var(--muted); margin-top:2px;}
.achv-card .achv-progress{
  margin-top:5px;
  height:4px;
  background:var(--border);
  border-radius:2px;
  overflow:hidden;
}
.achv-card .achv-progress-fill{
  height:100%;
  background:var(--accent2);
}
.achv-card .achv-progress-label{font-size:10px; color:var(--muted); margin-top:3px;}

/* ---------- ESTATÍSTICAS GLOBAIS ---------- */
.stats-section-title{
  margin:20px 0 10px 0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}
.stats-section-title:first-child{ margin-top:4px; }
.stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:600px){
  .stats-grid{ grid-template-columns:1fr; }
}
.stat-tile{
  padding:12px 14px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:10px;
}
.stat-tile .stat-value{
  font-size:20px;
  font-weight:700;
  color:var(--accent);
}
.stats-admin-line{
  margin-top:18px;
  padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:12px;
  color:var(--muted);
  text-align:center;
}
.stats-admin-line b{ color:var(--accent2); }
.stat-tile .stat-label{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

/* ---------- ATUALIZAÇÕES (histórico de versões) ---------- */
.changelog-version{ margin-bottom:14px; }
.changelog-version h3{ margin:0 0 6px 0; }
.changelog-date{ font-size:11px; font-weight:400; color:var(--muted); margin-left:6px; }

/* ---------- HISTÓRIA DE ABERTURA DOS MODOS ---------- */
.story{ --mc:#e0b84b; max-width:620px; text-align:center; }
.story-crest{ font-size:34px; letter-spacing:6px; margin-bottom:4px; }
.story h2{ color:var(--mc); margin-top:0; text-shadow:0 0 16px color-mix(in srgb, var(--mc) 35%, transparent); }
.story p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--text);
  text-align:left;
  margin:0 0 12px;
}
.story .story-call{
  text-align:center;
  font-weight:700;
  color:var(--accent2);
  font-size:15.5px;
  margin-top:18px;
}
.story-btn{
  width:auto; padding:12px 28px; font-size:14px; margin-top:6px;
  color:#0b0f16;
  background:linear-gradient(180deg, color-mix(in srgb, var(--mc) 60%, #fff), var(--mc) 60%, color-mix(in srgb, var(--mc) 60%, #000));
  border-color:color-mix(in srgb, var(--mc) 50%, #000);
}

.rush-boss-hp{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.rush-boss-hp b{ font-size:11px; color:var(--text); }
.rush-hp-bar{
  width:64px; height:8px;
  background:var(--border);
  border-radius:4px;
  overflow:hidden;
}
.rush-hp-bar i{ display:block; height:100%; background:linear-gradient(90deg, #ff2d55, #ff8c42); }
.rush-incoming{ font-size:12px; color:var(--muted); flex:0 0 auto; }

/* aviso de modo trancado (tela de modos) */
.splash-lock-msg{
  grid-column:1 / -1;
  min-height:0;
  font-size:12px;
  font-weight:700;
  color:#ffe7a8;
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
  text-align:center;
}
.splash-lock-msg:empty{ display:none; }

/* ---------- TELA DE VITÓRIA ---------- */
.victory-box{
  max-width:560px;
  text-align:center;
  border-color:var(--accent2);
  box-shadow:0 0 40px rgba(224,184,75,0.25);
}
.victory-crest{ font-size:56px; line-height:1; margin-bottom:6px; animation:victoryPop 0.6s ease-out; }
@keyframes victoryPop{ 0%{ transform:scale(0.3); opacity:0; } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } }
.victory-box h2{ color:var(--accent2); margin:4px 0 12px; font-size:26px; }
.victory-story{ font-size:14.5px; line-height:1.7; color:var(--text); text-align:left; margin:0 0 16px; }
.victory-stats{ margin-bottom:14px; text-align:left; }
.victory-unlock{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(61,220,151,0.12);
  border:1px solid var(--accent);
  color:var(--accent);
  font-weight:700;
  font-size:14px;
}
.victory-unlock[hidden]{ display:none; }
.victory-btn{ width:auto; padding:12px 30px; font-size:14px; }

/* tela de derrota: mesma estrutura da vitória, em tom sóbrio */
.victory-box.defeat{ border-color:var(--danger); box-shadow:0 0 40px rgba(224,86,75,0.2); }
.victory-box.defeat h2{ color:#ff8a7e; }

/* =====================================================================
   CELULAR (v38) — tudo abaixo só vale com html.mobile (posto pelo
   js/mobile.js em telas de toque pequenas). No desktop, #appRoot é
   "invisível" (display:contents) e nada daqui se aplica.
   ===================================================================== */
#appRoot{ display:contents; }
.tower-btn .name{ display:none; }
.tower-toggle, .place-hint{ display:none; }

html.mobile, html.mobile body{ height:100%; overflow:hidden; }
html.mobile body{
  padding:0;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
html.mobile #appRoot{
  display:block;
  position:fixed;
  top:0; left:0;
  width:var(--app-w);
  height:var(--app-h);
  overflow:hidden;
  background:radial-gradient(circle at 50% 0%, #182131, var(--bg) 60%);
}
/* modo girado: aparelho em pé → o jogo inteiro é desenhado deitado */
html.mobile.rotated #appRoot{
  transform-origin:top left;
  transform:rotate(90deg) translateY(-100%);
}
html.mobile #appHeader{ display:none; }
html.mobile .wrap{
  max-width:none;
  height:100%;
  padding:6px;
  gap:6px;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:flex-start;
}
html.mobile .game-col{ gap:0; justify-content:center; }
html.mobile #canvasHolder{ border-width:2px; }

/* coluna da direita (dock): HUD, controles, torres, especiais, seleção */
html.mobile .side{
  flex:1;
  min-width:0;
  width:auto;
  gap:6px;
  overflow-y:auto;
  overflow-x:hidden;
}
html.mobile .dock-top{ display:flex; justify-content:flex-end; }
html.mobile .user-menu-btn{ padding:2px 8px 2px 2px; gap:6px; }
html.mobile .user-avatar{ width:28px; height:28px; }
html.mobile .user-menu-panel{
  position:fixed;
  top:6px; right:6px;
  max-height:calc(var(--app-h) - 12px);
  overflow-y:auto;
}
html.mobile #topbar{ padding:6px 10px; grid-template-columns:auto 1fr auto; gap:6px; }
html.mobile .hud-left{ font-size:15px; gap:10px; }
html.mobile .hud-center{ font-size:19px; }
html.mobile .hud-right{ font-size:16px; }
html.mobile #enemyPreview{ height:30px; padding:0 6px; }
html.mobile .enemy-badge{ width:18px; height:18px; font-size:10px; }
html.mobile .wave-label{ font-size:10px; }
html.mobile #controlsBar{
  position:static;
  background:transparent;
  padding:0;
  gap:6px;
}
html.mobile .ctrl-btn{ flex:1; width:auto; height:38px; }
html.mobile .panel{ padding:6px; border-radius:8px; }
html.mobile .icon-action{ font-size:19px; padding:6px 2px; border-radius:8px; }
html.mobile .icon-action b{ font-size:11px; }
html.mobile .sel-stats{ margin-top:4px; font-size:12px; }

/* botão que abre a gaveta de torres */
html.mobile .tower-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:7px 8px;
  border-radius:10px;
  border:1px solid rgba(61,220,151,0.45);
  background:rgba(61,220,151,0.12);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
html.mobile .tower-toggle.active{ border-color:var(--accent); background:rgba(61,220,151,0.22); }
html.mobile .tower-toggle .tt-icon{ font-size:20px; line-height:1; }
html.mobile .place-hint{ display:block; font-size:10.5px; color:var(--muted); text-align:center; line-height:1.3; }
html.mobile .place-hint:empty{ display:none; }

/* gaveta translúcida com as 6 torres, por cima do tabuleiro */
html.mobile .tower-drawer{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(6,9,14,0.55);
  backdrop-filter:blur(2px);
}
html.mobile .tower-drawer.open{ display:flex; }
html.mobile .tower-drawer .panel{
  width:88%;
  max-width:440px;
  background:rgba(22,27,34,0.94);
  padding:10px;
}
html.mobile .tower-btn{ padding:8px 4px; gap:3px; }
html.mobile .tower-btn .icon{ font-size:28px; }
html.mobile .tower-btn .cost{ font-size:12px; }
html.mobile .tower-btn .name{ display:block; font-size:10.5px; color:var(--muted); }

/* telas por cima do jogo: cabem na altura baixa do celular deitado */
html.mobile #overlay{ position:fixed; inset:0; z-index:90; padding:12px; }
html.mobile .page-modal{ padding:8px; }
html.mobile .page-modal-box{ padding:16px; border-radius:12px; }
html.mobile .page-modal-big{ max-height:calc(var(--app-h) - 16px); }
html.mobile .modal-close{ top:10px; right:10px; }
html.mobile #splashModal{ padding:8px; }
html.mobile #modeModal{ padding:8px; align-items:flex-start; }
html.mobile .mode-head{ margin-bottom:8px; }
html.mobile .mode-head h2{ font-size:15px; letter-spacing:1px; }
html.mobile .mode-back{ padding:5px 9px; font-size:11px; }
html.mobile .mode-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; }
html.mobile .mode-card{ border-radius:10px; }
html.mobile .mode-emblem{ height:58px; }
html.mobile .mode-body{ padding:5px 8px 6px; gap:3px; }
html.mobile .mode-name{ font-size:12px; }
html.mobile .mode-desc{ display:none; }
html.mobile .mode-chips{ gap:4px; margin-top:0; }
html.mobile .mode-chips span{ font-size:10px; padding:1px 5px; }
html.mobile .mode-card.locked .mode-lock{ width:22px; height:22px; font-size:12px; top:5px; right:5px; }
/* história de abertura: compacta pra caber (e o botão aparecer) no celular deitado */
html.mobile .story{ max-width:none; padding:10px 14px; }
html.mobile .story-crest{ font-size:20px; letter-spacing:3px; margin-bottom:0; }
html.mobile .story h2{ font-size:16px; margin:2px 0 6px; }
html.mobile .story p{ font-size:12px; line-height:1.35; margin:0 0 5px; }
html.mobile .story .story-call{ font-size:12.5px; margin-top:8px; }
html.mobile .story-btn{ padding:8px 22px; font-size:13px; margin-top:4px; }
html.mobile .splash-box{
  width:auto;
  height:calc(var(--app-h) - 16px);
  max-width:calc(var(--app-w) - 16px);
  aspect-ratio:3 / 2;
}
html.mobile .splash-img{ width:100%; height:100%; object-fit:cover; }
html.mobile .splash-btn{ width:140px; padding:8px 0; font-size:13px; }
html.mobile .splash-buttons{ gap:6px; bottom:4%; }
html.mobile .reward-box{ padding:12px; }
html.mobile .reward-btn{ font-size:24px; padding:10px 12px; }