/* ── VARIÁVEIS E RESET ── */
:root {
  --bg:        #0b0c10;
  --surface:      #151729;
  --surface2:     #232640;
  --surface3:     #222438;
  --border:       #252838;
  --border2:      #303448;
  --text:       #c8cad8;
  --text-dim:   #8a8da4;
  --text-mid:   #666a90;
  --accent:       #ffffff;
  --accent-glow:  rgba(255,255,255,.18);
  --accent-dim:   rgba(255,255,255,.07);
  --ghost:     rgba(255,255,255,.09);
  --seg:       #ffffff;
  --ok:        #3fb950;
  --ok-dim:    rgba(63,185,80,.15);
  --ok-glow:   rgba(63,185,80,.4);
  --err:       #f85149;
  --gold:      #E8B030;
  --gold-glow: rgba(232,176,48,.45);
  --font-ui:   'Outfit', sans-serif;
  --font-heading:   'Outfit', sans-serif;
  --font-display:  'Outfit', sans-serif;
  --radius:         10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
html { background-color: #16171b; }

/* Pinta a safe area do fundo com a cor do final do gradiente */
body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: env(safe-area-inset-bottom);
  background: #0F1014;
  z-index: 9999;
  pointer-events: none;
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(to bottom, #16171b 0%, #0b0c10 100%);
  min-height: 0;
}

/* ── APP SHELL ───────────────────────────────────────────── */
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── BANNER DE ARQUIVO ── */
#archive-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--border);
  padding: 7px clamp(20px,5vw,80px);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 2px; color: var(--text-mid);
}
.btn-back {
  background: none; border: 1px solid var(--border2); color: var(--text-mid);
  font-family: var(--font-ui); font-size: 9px; letter-spacing: 2px;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all .15s;
}
.btn-back:hover { border-color: var(--accent); color: var(--accent); }

/* ── FOOTER ── */
footer {
  flex-shrink: 0;
  text-align: center;
  padding: 8px 20px 28px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-mid);
}

/* ── TECLADO EMBUTIDO ── */
#kb-wrap { display: none; }
.kb-row { display: flex; justify-content: center; gap: 5px; }
.kb-key {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  font-weight: 700;
  height: 42px;
  flex: 1;
  max-width: 34px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  outline: none;
  transition: filter .1s;
}
.kb-key:active { filter: brightness(1.4); }
.kb-key:focus-visible, .btn:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
.kb-key.kb-wide { flex: 1.6; max-width: 52px; font-size: 12px; letter-spacing: 0.5px; font-family: var(--font-heading); }
.kb-key.kb-bksp { font-size: 28px; letter-spacing: 0; font-family: var(--font-heading); }
.kb-key.kb-miss { opacity: .28; }
.kb-key .sg-correct { stroke: var(--seg); filter: none; }

/* ── CABEÇALHO ── */
#logo-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* padding-top reserva espaço para o banner (≈38px) + espaço natural acima do título */
  /* padding-bottom reduz o mesmo valor para manter a altura total constante          */
  padding: calc(clamp(22px, 3.25vh, 42px) + 38px) 0 calc(clamp(65px, 9vh, 100px) - 38px);
}
.logo-icon {
  display: block;
}

/* ── LAYOUT PRINCIPAL ── */
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 3vh, 48px) clamp(32px, 6vw, 100px);
}
main[data-letters="7"] {
  padding-left: clamp(8px, 1vw, 14px);
  padding-right: clamp(8px, 1vw, 14px);
}

/* ── ROLAGEM DE RESERVA (>= 701 px) ──
   Quando o conteúdo não cabe na altura (paisagem curta, janela dividida, 4 tentativas com 7 letras),
   a página inteira rola em vez de cortar o cartão: `main` cresce até o conteúdo e o rodapé vem depois. */
@media (min-width: 701px) {
  #app { overflow-y: auto; overflow-x: hidden; }
  main { flex: 1 0 auto; }
}
/* Telas grandes: o bloco desce um pouco em vez de ficar colado no topo (entre 1280 e 1440 nada muda). */
@media (min-width: 1700px) and (min-height: 950px) and (orientation: landscape) {
  main { padding-top: calc(clamp(20px, 3vh, 48px) + (100vh - 900px) * .14); }
}
/* Janelas baixas: cabeçalho compacto (o topo ainda reserva ≈36px para o banner de arquivo). */
@media (min-width: 701px) and (max-height: 760px) {
  #logo-header { padding: 36px 0 10px; gap: 6px; }
  .logo-icon { width: 24px; height: 36px; }
  main { padding-top: 16px; }
}

/* Empilhado em paisagem de altura média (Quadra, Só traços): mesmo cabeçalho compacto, para o botão
   TENTAR ficar acima da dobra (principal.rs, `Plano::compacto`). */
@media (min-width: 701px) {
  body.compacto #logo-header { padding: 36px 0 10px; gap: 6px; }
  body.compacto .logo-icon { width: 24px; height: 36px; }
  body.compacto main { padding-top: 16px; }
}

.glass-card {
  background: #0f1014;
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 32px;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-card-container {
  padding-top: 15px !important;
  align-self: flex-start;
}

.right-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* ── COLUNA ESQUERDA / GLYPHS ── */
#left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.8vh, 18px);
  flex-shrink: 0;
}

.logo-name {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: clamp(22px, 2.7vw, 37px);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 2px;
  line-height: 1;
}
.logo-sub {
  font-size: clamp(7px, .8vw, 9px);
  letter-spacing: 4px;
  color: var(--text-dim);
  margin-top: -6px;
  text-transform: uppercase;
  margin-left: 2px;
}

.day-lbl {
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 2px;
  color: var(--text-dim);
  align-self: flex-end;
  margin-bottom: 2px;
  text-align: right;
  width: 100%;
  padding-right: 12px;
}

/* Glyph row */
.glyph-row {
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  align-items: center;
}

/* ── CÉLULAS DE GLYPH ── */
.g-cell {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 1.2vw, 13px);
  transition: border-color .4s, box-shadow .4s;
}
.g-cell.correct   { border-color: var(--ok);   box-shadow: 0 0 10px var(--ok-glow),   inset 0 0 10px rgba(63,185,80,.08); }
.g-cell.gold-cell { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow), inset 0 0 10px rgba(232,176,48,.08); }

.sg { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.sg-ghost   { stroke: var(--ghost); }
.sg-on      { stroke: var(--seg);  filter: drop-shadow(0 0 3px rgba(255,255,255,.3)); }
.sg-correct { stroke: var(--ok);   filter: drop-shadow(0 0 5px rgba(63,185,80,.7)); }
.gold-cell .sg-correct { stroke: var(--gold); filter: none; }
.gold-cell svg { filter: none; }

@keyframes segIn { from{opacity:0} to{opacity:1} }
.sg-new { animation: segIn .35s ease forwards; }

.gold-cell svg { filter: drop-shadow(0 0 6px var(--gold-glow)); }

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  margin-top: 22px;
  margin-bottom: -8px;
  margin-left: 5px;
}

.daily-badge {
  background: none;
  color: var(--text-dim);
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  width: fit-content;
  white-space: nowrap;
  font-family: var(--font-ui);
  text-transform: uppercase;
  margin-left: 7px;
}

/* ── COLUNA DIREITA ── */
#right-col {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  min-width: clamp(220px, 22vw, 300px);
  flex-shrink: 0;
  
  /* AJUSTE AQUI */
  margin-top: 0px; /* Aumente este número para DESCER a caixa, diminua para SUBIR */
}

/* Buttons row — right-aligned */
.right-btns {
  display: flex;
  justify-content: center; /* Isso centraliza os ícones horizontalmente */
  gap: 12px;               /* Espaço entre um ícone e outro */
  margin-bottom: 14px;
}
/* ── BOTÕES DE ÍCONE ── */
.btn-ico {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  color: #ffffff;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.btn-ico:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.btn-ico--text { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1px; }

/* ── PONTOS DE PROGRESSO ── */
.prog { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 36px; }
.pdot { width: 18px; height: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; transition: all .3s; }
.pdot.win, .pdot.fail { background: #ffffff; border-color: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.6), 0 0 18px rgba(255,255,255,.2); }
.divider { width: 100%; height: 1px; background: var(--border2); margin: 0 0 26px; }

/* ── CAIXAS DE INPUT ── */

.cell-box.lost-revealed {
  color: var(--err);
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.12);
  opacity: 1 !important; 
  cursor: default;
}

.cells-row {
  display: flex;
  gap: clamp(5px, .8vw, 9px);
  justify-content: center;
  margin-bottom: 24px;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.cells-row.shake { animation: shake .3s ease; }

.cell-box {
  /* --cell vem do Rust (cartões lado a lado que não cabem na janela); sem ela, o clamp original */
  width:  var(--cell, clamp(40px, 5.5vw, 58px));
  height: var(--cell, clamp(40px, 5.5vw, 58px));
  background: var(--surface2);
  border: 2px solid var(--border2);
  border-radius: 9px;
  font-family: var(--font-display);
  /* telas grandes: o Rust aumenta --cell e a letra acompanha (38% do lado) */
  font-size: max(clamp(15px, 1.95vw, 22px), calc(var(--cell, 0px) * .38));
  font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  user-select: none; cursor: text;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cell-box.focused  { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); background: var(--surface3); }
.cell-box.locked   { border-color: var(--ok); color: var(--ok); background: var(--ok-dim); cursor: default; }
.cell-box.disabled { opacity: .35; cursor: not-allowed; }
.cell-box.won-empty { opacity: .18; border-color: var(--border2); }

/* Classe dinâmica para o botão de Compartilhar */
#btn-ok.btn-share {
  background-color: #538d4e; /* Verde estilo Wordle/Sucesso */
  color: #ffffff;
  border-color: #538d4e;
  box-shadow: 0 0 12px rgba(83, 141, 78, 0.4); /* Leve brilho neon */
  transition: all 0.3s ease; /* Animação suave na troca de cor */
}

/* ── BOTÃO TENTAR ── */
.btn-ok {
  background: #ffffff;      /* Mantém o fundo branco */
  color: #0b0c10;
  border: none;
  font-family: var(--font-ui);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 3px;
  padding: clamp(12px, 1.8vh, 16px);
  border-radius: var(--radius);
  cursor: pointer; 
  width: 100%;
  transition: all 0.2s ease;

  /* O EFEITO DE BRILHO BRANCO */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 
              0 0 5px rgba(255, 255, 255, 0.2);
  
  text-transform: uppercase;
}

/* Efeito ao passar o mouse para parecer que "acendeu" mais */
.btn-ok:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6),
              0 0 10px rgba(255, 255, 255, 0.3);
}
.btn-ok:active:not(:disabled) { transform: none; }
.btn-ok:disabled { opacity: .35; cursor: not-allowed; }

/* Hint */
.hint {
  font-size: clamp(8px, .8vw, 9px);
  letter-spacing: 2px;
  color: var(--text-dim);
  text-align: center;
  min-height: 10px;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px); /* Começa um pouco mais baixo */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* Termina na posição original */
  }
}

/* ── SEÇÃO DE TENTATIVAS ── */
#attempts-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  width: 100%;
}
#attempts-section .att-title {
  margin-top: 6px;
  flex-shrink: 0;
}
.att-cell.empty-slot { opacity: 0; pointer-events: none; }
.att-title {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--text-dim);
}
.att-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.att-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.att-row-empty { display: none; }
.att-cells { display: flex; gap: 4px; }
.att-cell {
  width:  clamp(18px, 2vw, 26px);
  height: clamp(18px, 2vw, 26px);
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  transition: background .2s, border-color .2s;
}
.att-cell.filled      { color: var(--text); border-color: var(--border2); }
.att-cell.correct     { background: var(--ok-dim); border-color: var(--ok); color: var(--ok); }
.att-cell.empty-slot  { background: var(--surface2); border-color: var(--border); opacity: .45; }

/* ── TOAST ── */
.toast {
  position: fixed; top: 60px; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--text); color: var(--bg);
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 9px 22px; border-radius: 20px;
  opacity: 0; pointer-events: none; z-index: 1000;
  transition: opacity .18s, transform .18s;
  max-width: min(90vw, 420px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 700px) {
  /* Abaixo do cabeçalho (56 px), como no original: em 8 px o aviso cobria os ícones. */
  .toast { top: calc(env(safe-area-inset-top, 0px) + 60px); font-size: 11px; padding: 8px 16px; border-radius: 16px; line-height: 1.35; max-width: calc(100vw - 24px); }
}

/* ── OVERLAYS E MODAIS ── */
.ov {
  position: fixed; inset: 0;
  background: rgba(22, 23, 27, 0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; opacity: 0; pointer-events: none; transition: opacity .2s; padding: 16px;
}
.ov.show { opacity: 1; pointer-events: all; }
#stats-ov { align-items: flex-start; padding-top: clamp(52px, 8dvh, 80px); }
@media (max-width: 700px) { #stats-ov { padding-top: max(52px, env(safe-area-inset-top, 0px) + 52px); } }
.modal {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 16px;
  padding: clamp(22px,5vw,32px);
  width: 100%; max-width: 440px; max-height: 90dvh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  transform: scale(.94); transition: transform .2s;
}
.ov.show .modal { transform: scale(1); }
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px,3vw,18px); color: var(--accent); letter-spacing: 4px; text-align: center; }
.btn-p { width:100%; background:var(--accent); color:#0b0c10; border:none; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:2px; padding:13px; border-radius:var(--radius); cursor:pointer; transition:opacity .15s; }
.btn-share-streak { background:#00d4ff; color:#000; box-shadow:0 0 18px rgba(0,212,255,.35); }
.btn-p:hover { opacity:.85; }
.btn-s { width:100%; background:none; border:1px solid var(--border); color:var(--text-mid); font-family:var(--font-ui); font-size:11px; letter-spacing:1px; padding:11px; border-radius:var(--radius); cursor:pointer; transition:border-color .15s,color .15s; }
.btn-s:hover { border-color:var(--border2); color:var(--text); }

/* ── MODAL DE FIM DE JOGO ── */
.end-icon  { font-size:44px; line-height:1; }
.end-title { font-family:var(--font-ui); font-weight:700; font-size:clamp(14px,3vw,18px); color:var(--accent); letter-spacing:4px; }
.end-word  { font-family:var(--font-ui); font-size:clamp(16px,3.5vw,22px); font-weight:900; letter-spacing:6px; padding:12px 20px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); }
.end-word.gold { color:var(--gold); border-color:var(--gold); }
.gold-badge { display:flex; align-items:center; gap:6px; padding:7px 18px; background:rgba(255,215,0,.08); border:1px solid var(--gold); border-radius:20px; font-size:11px; font-weight:700; color:var(--gold); letter-spacing:2px; }
.end-sub { font-size:11px; color:var(--text-mid); line-height:1.8; letter-spacing:2px; padding: 0 18px; }

/* ── PASSAPORTE / STATS ── */
.passport { width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:10px; overflow:hidden; }
.pp-head  { padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.pp-rank-name { font-size:12px; font-weight:700; letter-spacing:1px; color:var(--text); }
.pp-rank-lbl  { font-size:8px; letter-spacing:2px; color:var(--text-dim); margin-top:2px; }
.pp-rank-icon { font-size:26px; }
.pp-row  { display:flex; border-bottom:1px solid var(--border); }
.pp-row:last-child { border-bottom:none; }
.pp-cell { flex:1; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; border-right:1px solid var(--border); }
.pp-cell:last-child { border-right:none; }
.pp-n { font-family:var(--font-display); font-size:clamp(18px,3vw,26px); font-weight:700; color:var(--accent); line-height:1; }
.pp-n.gold { color:var(--gold); }
.pp-l { font-size:9px; letter-spacing:1.5px; color:var(--text-dim); text-transform:uppercase; text-align:center; }
.pp-info { padding:12px 16px; font-size:12px; color:var(--text-mid); text-align:center; line-height:1.9; width:100%; }
.pp-tabs { display:flex; flex-wrap:wrap; gap:6px; width:100%; max-width:440px; margin-bottom:2px; }
.pp-tab { flex:1 0 auto; max-width:100%; padding:8px 6px; font-family:var(--font-heading); font-size:10px; letter-spacing:1.5px; font-weight:700; border-radius:8px; border:1px solid var(--border2); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:all .15s; }
.pp-tab.active { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.dist-sect  { width:100%; }
.dist-title { font-size:11px; letter-spacing:3px; color:var(--text-dim); margin-bottom:10px; text-align:left; }
.dist-row   { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.dist-lbl   { font-size:12px; width:16px; text-align:right; color:var(--text-mid); flex-shrink:0; }
.dist-bar-wrap { flex:1; height:20px; background:var(--surface); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.dist-bar   { height:100%; border-radius:3px; transition:width .4s ease; }
.dist-bar.ok  { background:var(--ok); }
.dist-bar.err { background:var(--err); }
.dist-pct   { font-size:12px; width:36px; text-align:left; color:var(--text-mid); flex-shrink:0; }

/* ── ALFABETO ── */
#alpha-ov { align-items: flex-start; overflow-y: auto; padding: 20px 16px; }
#alpha-ov > div { margin: auto; }
.alpha-modal { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:clamp(20px,4vw,40px); width:100%; max-width:920px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; transform:scale(.94); transition:transform .2s; }
.ov.show .alpha-modal { transform:scale(1); }
.alpha-grid { display:grid; grid-template-columns:repeat(13,1fr); row-gap:32px; justify-items:center; }
.alpha-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
.alpha-lbl { font-family:var(--font-display); font-size:9px; letter-spacing:1px; color:var(--text-dim); }

/* ── DICAS ── */
.hint-modal { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:clamp(20px,4vw,32px); width:100%; max-width:480px; display:flex; flex-direction:column; gap:14px; transform:scale(.94); transition:transform .2s; }
.ov.show .hint-modal { transform:scale(1); }
.hint-modal-title { font-family:var(--font-display); font-weight:700; font-size:clamp(14px,2.5vw,18px); color:var(--accent); letter-spacing:3px; text-align:center; margin-bottom:2px; }
.hint-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2); transition:all .2s; }
.hint-item.locked { opacity:.45; }
.hint-item.unlocked { border-color:var(--border2); }
.hint-badge { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:1px; color:var(--text-dim); width:22px; text-align:center; flex-shrink:0; }
.hint-item.unlocked .hint-badge { color:var(--accent); }
.hint-text { font-size:15px; color:var(--text-dim); line-height:1.5; flex:1; }
.hint-item.unlocked .hint-text { color:var(--text-mid); }
.hint-item.unlocked .hint-text strong { color:var(--text); }
.hint-item.revealed { border-color:var(--ok); background:rgba(74,222,128,.06); }
.hint-item.revealed .hint-badge { color:var(--ok); }
.hint-item.revealed .hint-text { color:var(--ok); }
.hint-item.revealed .hint-text strong { color:#fff; }
.btn-reveal { background:none; border:1px solid var(--border2); color:var(--text-mid); font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:2px; padding:7px 14px; border-radius:6px; cursor:pointer; transition:all .15s; flex-shrink:0; }
.btn-reveal:hover { border-color:var(--accent); color:var(--accent); }

/* ── CORINGAS INFINITO ── */
.inf-lf-modal { background:var(--surface); border:1px solid rgba(0,212,255,.28); border-radius:16px; padding:clamp(18px,4vw,28px); width:100%; max-width:480px; display:flex; flex-direction:column; gap:8px; transform:scale(.94); transition:transform .2s; }
#inf-lf-list { display:flex; flex-direction:column; gap:8px; }
.ov.show .inf-lf-modal { transform:scale(1); }
.inf-lf-title { font-family:var(--font-heading); font-weight:700; font-size:clamp(13px,2vw,15px); color:#00d4ff; letter-spacing:3px; text-align:center; margin-bottom:2px; }
.inf-lf-sub { font-size:11px; color:var(--text-dim); letter-spacing:1.5px; text-align:center; margin-top:-4px; }
@keyframes lfReveal { 0%{background:rgba(0,212,255,.18);border-color:rgba(0,212,255,.7);} 100%{background:var(--surface2);border-color:rgba(0,212,255,.35);} }
.lf-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2); transition:border-color .3s; }
.lf-item.lf-used { border-color:rgba(0,212,255,.35); animation:lfReveal .6s ease-out forwards; }
.lf-icon { font-size:18px; width:24px; text-align:center; flex-shrink:0; }
.lf-body { flex:1; min-width:0; }
.lf-name { font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:2px; color:#00d4ff; }
.lf-desc { font-size:12px; color:var(--text); margin-top:2px; line-height:1.4; }
.lf-item:not(.lf-used) .lf-desc { color:var(--text-dim); }
.btn-use-lf { background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.4); color:#00d4ff; font-family:var(--font-heading); font-size:9px; font-weight:700; letter-spacing:1.5px; padding:6px 11px; border-radius:6px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; }
.btn-use-lf:hover { background:rgba(0,212,255,.22); }
/* Pular — dentro do modal de coringas */
.lf-skip-divider { width:100%; height:1px; background:rgba(0,212,255,.15); margin:6px 0 4px; }
.lf-item.lf-skip { border-color:rgba(0,212,255,.40); }
.lf-item.lf-skip.lf-used { opacity:.45; }

/* ── MODO INFINITO ── */
.mode-card-badge.badge-inf { background:rgba(0,212,255,.10); color:#00d4ff; border:1px solid rgba(0,212,255,.30); }
body.infinite-active .daily-badge { color:#00d4ff; }
@media (max-width: 700px) { body.infinite-active #left-col .glass-card { background:transparent !important; border-color:transparent !important; box-shadow:none !important; } }
@media (min-width: 701px) { body.infinite-active #left-col .glass-card { border-color:rgba(0,212,255,.25); box-shadow:0 0 24px rgba(0,212,255,.07); } }
body.infinite-active .right-card-container { border-color:rgba(0,212,255,.20) !important; }
body.infinite-active .cell-box.focused { border-color:#00d4ff; box-shadow:0 0 0 2px rgba(0,212,255,.18); }
body.infinite-active .logo-name { text-shadow:0 0 22px rgba(0,212,255,.40); }

/* ── TUTORIAL ── */
/* ── MODES MODAL ── */
.modes-modal { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:clamp(22px,5vw,34px); width:100%; max-width:390px; max-height:92dvh; overflow-y:auto; display:flex; flex-direction:column; gap:18px; transform:scale(.94); transition:transform .2s; }
.ov.show .modes-modal { transform:scale(1); }
.modes-modal { overscroll-behavior: contain; }
.modes-grid { display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
.modes-modal > * { flex-shrink: 0; }
@media (max-height: 760px) {
  .modes-modal { padding: 18px 20px; gap: 12px; }
  .modes-grid { gap: 7px; }
  .mode-card { padding: 9px 14px; gap: 12px; }
  .mode-card-icon { width: 30px; height: 30px; }
  .mode-card-icon svg { width: 30px; height: 30px; }
  .mode-card-desc { margin-top: 1px; line-height: 1.35; }
}
.mode-card { display:flex; align-items:center; gap:14px; background:var(--surface2); border:1px solid var(--border2); border-radius:12px; padding:14px 16px; cursor:pointer; transition:all .18s; text-align:left; text-decoration:none; }
.mode-card:hover { border-color:var(--accent); background:var(--accent-dim); }
.mode-card-icon { width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.mode-card-icon svg { fill:none; stroke:var(--text-mid); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mode-card-info { flex:1; min-width:0; }
.mode-card-name { font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--accent); letter-spacing:2.5px; }
.mode-card-desc { font-family:var(--font-ui); font-size:11px; color:var(--text-mid); margin-top:3px; line-height:1.45; }
/* Desafio por link: formulário abaixo do card */
.desafio-form { display:flex; flex-direction:column; gap:8px; margin-top:-2px; }
.desafio-form[hidden], .desafio-linha[hidden] { display:none; }
.desafio-linha { display:flex; gap:8px; }
.desafio-input { flex:1; min-width:0; background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:10px 12px; color:var(--text); font-family:var(--font-ui); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; }
.desafio-input::placeholder { color:var(--text-dim); letter-spacing:1px; font-size:11px; }
.desafio-input:focus { outline:none; border-color:var(--accent); }
.desafio-link { text-transform:none; letter-spacing:0; font-size:12px; color:var(--text-mid); }
.desafio-btn { flex-shrink:0; background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent); border-radius:10px; padding:0 14px; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:1.5px; cursor:pointer; }
.desafio-btn:hover { background:var(--accent); color:var(--bg); }
.mode-card-badge { font-family:var(--font-ui); font-size:9px; font-weight:700; letter-spacing:1.5px; padding:3px 8px; border-radius:4px; flex-shrink:0; }
.mode-card-badge.badge-active { background:var(--ok-dim); color:var(--ok); border:1px solid rgba(97,218,138,.35); }
.mode-card-badge.badge-soon { background:rgba(255,255,255,.04); color:var(--text-dim); border:1px solid var(--border2); }

.tut-modal { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:clamp(24px,5vw,36px); width:100%; max-width:580px; max-height:92dvh; overflow-y:auto; display:flex; flex-direction:column; gap:20px; transform:scale(.94); transition:transform .2s; }
.ov.show .tut-modal { transform:scale(1); }
.tut-slide { display:none; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.tut-slide.active { display:flex; }
.tut-num   { font-size:10px; letter-spacing:3px; color:var(--text-dim); }
.tut-title { font-family:var(--font-display); font-weight:700; font-size:clamp(16px,3vw,20px); color:var(--accent); letter-spacing:3px; }
.tut-body  { font-size:clamp(14px,2.5vw,16px); line-height:1.8; color:var(--text-mid); max-width:360px; }
.tut-example { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.tut-nav { display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; }
.tut-dots { display:flex; gap:6px; }
.tut-dot  { width:7px; height:7px; border-radius:50%; background:var(--border2); transition:background .2s; }
.tut-dot.on { background:var(--accent); }
.btn-tnav { background:none; border:1px solid var(--border); color:var(--text-mid); font-family:var(--font-ui); font-size:12px; padding:10px 18px; border-radius:var(--radius); cursor:pointer; transition:border-color .15s, color .15s, background-color .15s, opacity .15s; flex:1; min-width:0; white-space:nowrap; }
.btn-tnav:hover { border-color:var(--accent); color:var(--accent); }
.btn-tnav.pri { background:var(--accent); color:#0b0c10; border-color:var(--accent); font-weight:700; }
.btn-tnav.pri:hover { opacity:.85; }
@media (max-width: 420px) {
  .tut-modal { padding: 22px 14px; }
  .tut-nav { gap: 6px; }
  .btn-tnav { font-size: 11px; padding: 10px 6px; letter-spacing: 0; }
}

/* ── CALENDÁRIO ── */
.cal-modal { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:clamp(16px,4vw,28px); width:100%; max-width:460px; max-height:90dvh; overflow-y:auto; display:flex; flex-direction:column; gap:16px; transform:scale(.94); transition:transform .2s; }
.ov.show .cal-modal { transform:scale(1); }
.cal-head { display:flex; align-items:center; justify-content:space-between; }
.cal-month-lbl { font-family:var(--font-ui); font-weight:700; font-size:13px; color:var(--accent); letter-spacing:2px; }
.cal-nav-row { display:flex; gap:6px; }
.btn-cnav { background:none; border:1px solid var(--border); color:var(--text-mid); width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.btn-cnav:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.btn-cnav:disabled { opacity:.3; cursor:not-allowed; }
.cal-dow  { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }
.cal-dow-lbl { font-size:10px; letter-spacing:1px; color:var(--text-dim); padding:2px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-day  { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:clamp(13px,2vw,16px); border-radius:6px; border:1px solid transparent; cursor:default; transition:all .15s; }
.cal-day.future { color:var(--text-mid); opacity:.35; }
.cal-day.today  { position:relative; color:var(--accent); font-weight:700; }
.cal-day.today::after { content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent); }
.cal-day.past   { cursor:pointer; color:#ffffff; font-weight:500; }
.cal-day.past:hover,
.cal-day.today:hover { background:var(--surface2); border-color:var(--border2); cursor:pointer; }
.cal-day.won    { background:var(--ok-dim); border-color:var(--ok); color:var(--ok); cursor:pointer; }
.cal-day.lost   { background:rgba(248,81,73,.1); border-color:var(--err); color:var(--err); cursor:pointer; }
.cal-day.playing { background:#ffffff; color:#0b0c10 !important; border-color:#ffffff; font-weight:700; cursor:pointer; }
.cal-day.today.playing { background:#ffffff !important; border-color:#ffffff !important; color:#0b0c10 !important; }
.cal-day.playing.today::after { background:#0b0c10; }
.cal-legend { display:flex; gap:12px; justify-content:center; font-size:9px; color:var(--text-dim); letter-spacing:1px; flex-wrap:wrap; }
.leg-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:middle; }

/* ── DUPLA / QUADRA: tabuleiros (principal.rs, medidas_board/medidas_multi, replica estas medidas) ── */
.boards { display: grid; gap: 14px; justify-content: center; }
.boards.cols-1 { grid-template-columns: auto; }
.boards.cols-2 { grid-template-columns: auto auto; }
.board { display: flex; gap: 5px; padding: 8px; border: 1px solid var(--border2); border-radius: 12px; transition: border-color .4s, box-shadow .4s; }
.board .g-cell { padding: 5px; border-radius: 8px; }
.board.ok { border-color: var(--ok); box-shadow: 0 0 10px var(--ok-glow); }
.board.err { border-color: var(--err); }
.board.err .sg-correct { stroke: var(--err); filter: none; }
main[data-multi] { padding-left: clamp(8px, 1vw, 14px); padding-right: clamp(8px, 1vw, 14px); }
@media (min-width: 701px) { main[data-multi] #left-col .glass-card { padding: 16px; } }
#attempts-section.att-multi { flex-direction: column; align-items: center; gap: 6px; }
.att-multi .att-grid { display: grid; grid-template-columns: auto auto; column-gap: 12px; }
.att-multi .att-cell { width: 20px; height: 20px; font-size: 11px; }
@media (max-width: 700px) {
  .boards { gap: 6px; }
  .board { gap: 2px; padding: 4px; border-radius: 9px; }
  .board .g-cell { padding: 2px; border-radius: 6px; }
  .board .g-cell svg { transform: none; }
  .board.ok { box-shadow: none; }
  .mob-att-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; padding: 0 8px; }
  .mob-att-word { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-mid); padding: 3px 6px; border: 1px solid var(--border2); border-radius: 5px; background: var(--surface); }
}

/* ── TENTATIVAS FIXAS (mobile) ── */
#att-drawer { display: none; }
@media (max-width: 700px) {
  #att-drawer { display: none; width: 100%; }
  #att-drawer.att-has { display: block; }
  #att-drawer-body {
    display: flex; flex-direction: column; gap: 4px; align-items: center;
    padding: 0 12px;
  }
  .mob-att-row { display: flex; gap: clamp(3px, 1vw, 5px); }
  .mob-att-cell {
    width: clamp(20px, 9.5vw, 34px); height: clamp(20px, 9.5vw, 34px);
    border-radius: 5px; border: 1px solid var(--border2); background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: clamp(9px, 2.6vw, 13px);
    font-weight: 700; color: var(--text-mid);
  }
  .mob-att-cell.correct { background: var(--ok-dim); border-color: var(--ok); color: var(--ok); }
}

/* ── MOBILE ── */
@media (max-width: 700px) {
  /* Layout geral */
  html {
    background-color: #16171b;
  }
  body {
    background: linear-gradient(to bottom, #16171b 0%, #0b0c10 55%, #16171b 85%, #16171b 100%);
  }
  main {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: visible;
    gap: 14px;
    padding: clamp(10px, 3vh, 30px) 0 0;
  }
  main[data-letters="7"] { padding-left: 0; padding-right: 0; }

  /* Cards: largura total */
  .glass-card { width: 100%; padding: 18px 6px; box-sizing: border-box; }
  .right-card-container {
    flex: 0 0 auto;
    margin-top: 22px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0 2px 0 !important;
    border: 1px !important;
    border-radius: 20px !important;
    background: #16171b !important;
  }
  #left-col { align-items: center; width: 100%; }
  .day-lbl  { align-self: center; text-align: center; }
  #right-col { width: 100%; min-width: 0; max-width: 100%; }

  /* Badge e data no mobile */
  .header-row { display: none; }
  .daily-badge { display: block; font-size: 13px; margin-bottom: 8px; text-align: center; }
  .day-lbl { font-size: 11px; text-align: center; align-self: center; padding: 0; margin-top: 8px; margin-bottom: 1px; }
  #left-col { gap: 2px; }

  /* Classe de animação com delay para o mobile */
  .animate-pop-delay {
    opacity: 0; /* Começa invisível */
    animation: slideUpFade 0.4s ease-out 0.8s forwards; /* 0.8s é o tempo de espera */
  }

  /* Header mobile: oculta ícone e subtítulo, mantém só título */
  .logo-icon { display: none; }
  .logo-sub  { display: none; }
  #logo-header { gap: 2px; }
  .logo-name { font-size: 24px; }

  /* Traços internos das letras mais finos no mobile */
  .sg { stroke-width: 4.5; }

  /* Glyphs: sem redução de escala, tamanho máximo */
  .g-cell { padding: 4px; }
  .g-cell svg { transform: scale(0.85); }
  #glyph-row { gap: 4px; justify-content: center; }

  /* Botões de ícone: menores e mais juntos */
  .right-btns { justify-content: center; gap: clamp(3px, 1.6vw, 8px); margin-bottom: 10px; }
  .btn-ico { width: clamp(38px, 10vw, 46px); height: clamp(38px, 10vw, 46px); }
  .btn-ico svg { width: 20px; height: 20px; }
  .btn-ico--text { font-size: 12px; }

  /* Hard badge: espaço abaixo para separar do badge de modo */
  #hard-badge { padding-bottom: 10px; }

  /* Progresso e células */
  .prog { margin-bottom: 16px; }
  .cells-row { margin-bottom: 14px; gap: clamp(4px, 1.5vw, 8px); padding: 0 12px; }
  .cell-box {
    width: clamp(50px, 15vw, 68px);
    height: clamp(50px, 15vw, 68px);
    font-size: clamp(19px, 5.5vw, 25px);
  }

  /* Tentativas — scroll próprio no mobile */
  #attempts-section {
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: clamp(90px, 20vh, 170px);
    width: 100%;
    padding: 4px 12px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .att-cell {
    width:  clamp(24px, 7vw, 34px);
    height: clamp(24px, 7vw, 34px);
    font-size: 10px;
  }

  /* Remove glow das letras no mobile */
  .g-cell.correct, .g-cell.gold-cell { box-shadow: none; }
  .sg-on { filter: none; }

  /* Footer: dentro do card direito, bem pequeno */
  footer { display: block; font-size: 8px; padding: 0px 0 4px; text-align: center; opacity: 0.4; }
  /* Teclado no card: sem margem extra (justify-content: flex-end cuida do posicionamento) */
  .right-card-container > #kb-wrap { margin-top: 12px; }


  /* Modais: quase tela cheia */
  .modal, .tut-modal, .cal-modal, .modes-modal {
    max-width: calc(100vw - 28px);
    max-height: 88dvh;
  }
  .hint-modal { max-width: calc(100vw - 28px); }

  /* Alfabeto: 7 por linha no mobile */
  .alpha-modal { max-width: calc(100vw - 28px); padding: 18px 14px; }
  .alpha-modal .modal-title { text-align: center; }
  .alpha-grid  { grid-template-columns: repeat(7, 1fr); row-gap: 18px; }
  .alpha-item:nth-child(22) { grid-column-start: 2; }
  .alpha-lbl   { font-size: 12px; }

  /* Teclado embutido visível no mobile */
  #kb-wrap { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 6px; flex-shrink: 0; }
  /* Teclado quando dentro do card direito */
  .right-card-container #kb-wrap { padding: 6px 3px; width: 100%; }
  .right-card-container .kb-key { max-width: none; }
  .right-card-container .kb-key.kb-wide { max-width: none; }

  /* 1. Banner de arquivo + logo-header: fundo transparente no mobile */
  #archive-banner {
    position: relative;
    padding: 5px 16px 3px;
    background: transparent;
    border-bottom: none;
  }
  #archive-banner #archive-lbl { font-size: 8px; letter-spacing: 1.5px; }
  #logo-header {
    padding: 10px 16px 8px;
    background: transparent;
    border-bottom: none;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 4px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  #logo-header .logo-name { justify-self: center; margin-right: 14px; min-width: 0; white-space: nowrap; }
  #logo-header .right-btns { margin-bottom: 0; margin-top: 0; justify-self: end; flex-shrink: 0; }

  /* 2. Remove botão TENTAR (submissão via ENTER do teclado embutido) */
  #btn-ok { display: none; }

  /* 3. Ordem do card direito: dots → células (ícones e tentativas movidos por JS) */
  .divider { display: none; }
  .prog      { order: 1; }
  #cells-row { order: 2; margin-bottom: 8px; }
  /* Card esquerdo: sem box visual, apenas layout em coluna */
  #left-col .glass-card {
    flex-direction: column;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Ícones quando dentro do card esquerdo */
  #left-col .glass-card .right-btns { margin-top: 0; margin-bottom: 0; }
  /* Tentativas: oculto no mobile */
  #attempts-section { display: none !important; }
  #att-label { font-size: 8px; letter-spacing: 1.5px; color: var(--text-dim); font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
  .att-grid { gap: 8px; }
  .att-row { gap: 4px; }
  .att-cell { width: clamp(28px, 8.5vw, 38px); height: clamp(28px, 8.5vw, 38px); font-size: clamp(10px, 3vw, 13px); border-radius: 6px; }
}


/* ── HARD MODE toggle ── */
.hard-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  background: var(--surface2);
  margin-bottom: 4px;
}
.hard-toggle-label { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--text); display:flex; align-items:center; gap:6px; }
.btn-hard-info { background:none; border:1px solid rgba(248,81,73,.35); color:var(--err); font-size:10px; font-weight:700; font-family:var(--font-heading); cursor:pointer; padding:0; width:17px; height:17px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; transition:background .15s,border-color .15s; }
.btn-hard-info:hover { background:rgba(248,81,73,.12); border-color:var(--err); }
.hard-tut-modal { background:var(--surface); border:1px solid rgba(248,81,73,.28); border-radius:16px; padding:clamp(20px,4vw,28px); width:100%; max-width:420px; display:flex; flex-direction:column; gap:16px; transform:scale(.94); transition:transform .2s; }
.ov.show .hard-tut-modal { transform:scale(1); }
.hard-tut-title { font-family:var(--font-heading); font-weight:700; font-size:17px; color:var(--err); letter-spacing:2px; text-align:center; }
.hard-tut-sub { font-size:10px; letter-spacing:3px; color:var(--text-dim); text-align:center; margin-top:-8px; }
.hard-tut-rules { display:flex; flex-direction:column; gap:10px; }
.hard-tut-rule { display:flex; gap:14px; align-items:flex-start; background:var(--surface2); border-radius:10px; padding:12px 14px; border:1px solid var(--border); }
.hard-tut-rule-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
.hard-tut-rule-name { font-family:var(--font-heading); font-size:10px; letter-spacing:1.5px; font-weight:700; color:var(--err); margin-bottom:4px; }
.hard-tut-rule-desc { font-size:12px; color:var(--text-mid); line-height:1.6; }
.btn-inf-info { background:none; border:1px solid rgba(0,212,255,.35); color:#00d4ff; font-size:10px; font-weight:700; font-family:var(--font-heading); cursor:pointer; padding:0; width:17px; height:17px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; transition:background .15s,border-color .15s; }
.btn-inf-info:hover { background:rgba(0,212,255,.12); border-color:#00d4ff; }
.inf-tut-modal { background:var(--surface); border:1px solid rgba(0,212,255,.28); border-radius:16px; padding:clamp(20px,4vw,28px); width:100%; max-width:420px; max-height:90dvh; display:flex; flex-direction:column; gap:16px; transform:scale(.94); transition:transform .2s; overflow:hidden; }
.inf-tut-rules { overflow-y:scroll; -webkit-overflow-scrolling:touch; min-height:0; flex:1; scrollbar-width:thin; scrollbar-color:rgba(0,212,255,.35) transparent; }
.inf-tut-rules::-webkit-scrollbar { width:4px; }
.inf-tut-rules::-webkit-scrollbar-track { background:transparent; }
.inf-tut-rules::-webkit-scrollbar-thumb { background:rgba(0,212,255,.35); border-radius:2px; }
.ov.show .inf-tut-modal { transform:scale(1); }
.inf-tut-title { font-family:var(--font-heading); font-weight:700; font-size:17px; color:#00d4ff; letter-spacing:2px; text-align:center; }
.inf-tut-sub { font-size:10px; letter-spacing:3px; color:var(--text-dim); text-align:center; margin-top:-8px; }
.inf-tut-rules { display:flex; flex-direction:column; gap:10px; }
.inf-tut-rule { display:flex; gap:14px; align-items:flex-start; background:var(--surface2); border-radius:10px; padding:12px 14px; border:1px solid var(--border); }
.inf-tut-rule-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
.inf-tut-rule-name { font-family:var(--font-heading); font-size:10px; letter-spacing:1.5px; font-weight:700; color:#00d4ff; margin-bottom:4px; }
.inf-tut-rule-desc { font-size:12px; color:var(--text-mid); line-height:1.6; }
.hard-toggle-sub   { font-size: 10px; letter-spacing: 1px; color: var(--text-dim); margin-top: 2px; }
.hard-toggle-switch {
  position: relative; width: 44px; height: 24px; flex-shrink: 0;
}
.hard-toggle-switch input { opacity: 0; width: 0; height: 0; }
.hard-toggle-slider {
  position: absolute; inset: 0; background: var(--border2);
  border-radius: 12px; cursor: pointer; transition: background .2s;
}
.hard-toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.hard-toggle-switch input:checked + .hard-toggle-slider { background: var(--err); }
.hard-toggle-switch input:checked + .hard-toggle-slider::before { transform: translateX(20px); }
.hard-toggle-disabled { opacity: .4; }

/* ── Seletor de idioma (modal de modos) ── */
.idioma-card { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 16px; border-radius:12px; border:1px solid var(--border2); background:var(--surface); }
.idioma-sel { background:var(--surface2); color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:6px 10px; font:inherit; font-size:13px; }

/* ── STATS: dois cards flutuantes no mesmo overlay ── */
.stats-ov-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  max-height: 90dvh;
  overflow-y: auto;
}
.stats-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: clamp(18px,4vw,28px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.hard-card {
  background: var(--surface);
  border: 1px solid rgba(248,81,73,.35);
  border-radius: 12px;
  padding: 10px 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}


/* ── HARD MODE: badge na tela principal ── */
#hard-badge-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .35s ease-out;
}
#hard-badge-wrap.visible {
  grid-template-rows: 1fr;
}
#hard-badge {
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 0;
}
.hard-badge-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--err);
  padding: 8px 10px;
  border: 1px solid rgba(248,81,73,.35);
  border-radius: 20px;
  background: rgba(248,81,73,.08);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .3s ease-out, transform .35s ease-out;
}
#hard-badge-wrap.visible .hard-badge-pill {
  opacity: 1;
  transform: scale(1);
}

/* ── HARD MODE: tema visual ── */
body.hard-active .glass-card {
  border-color: rgba(248,81,73,.28);
  box-shadow: 0 0 24px rgba(248,81,73,.07);
}
body.hard-active .right-card-container {
  border-color: rgba(248,81,73,.28) !important;
}
body.hard-active .cell-box.focused {
  border-color: var(--err);
  box-shadow: 0 0 0 2px rgba(248,81,73,.20);
  background: rgba(248,81,73,.06);
}
body.hard-active .logo-name {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(248,81,73,.55);
}
body.hard-active .logo-icon .sg-correct {
  stroke: var(--err);
  filter: drop-shadow(0 0 5px rgba(248,81,73,.7));
}
@media (max-width: 700px) {
  body.hard-active .g-cell {
    border-color: rgba(248,81,73,.45);
    box-shadow: 0 0 10px rgba(248,81,73,.12);
  }
  #btn-alpha { display: none; }
}
@keyframes hardPulseBox {
  0%,100% { border-color: rgba(248,81,73,.20); box-shadow: 0 0 10px rgba(248,81,73,.06); }
  50%      { border-color: rgba(248,81,73,.65); box-shadow: 0 0 28px rgba(248,81,73,.22); }
}
@media (min-width: 701px) {
  body.hard-active #left-col .glass-card { animation: hardPulseBox 2s ease-in-out infinite; }
  body.hard-active .g-cell {
    border-color: rgba(248,81,73,.45);
    box-shadow: 0 0 10px rgba(248,81,73,.12);
  }
}
@media (prefers-color-scheme: light) {
  body.hard-active .glass-card { border-color: rgba(200,50,50,.22); }
  body.hard-active .right-card-container { border-color: rgba(200,50,50,.22) !important; }
  body.hard-active .cell-box.focused { border-color: #c03030; box-shadow: 0 0 0 2px rgba(192,48,48,.15); background: rgba(192,48,48,.05); }
  body.hard-active .logo-name { color: #b02020; text-shadow: none; }
}

/* ── MOBILE LANDSCAPE: igual ao desktop (duas colunas) ── */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  /* Anula as regras do mobile portrait que forçam coluna */
  main {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: clamp(10px, 2vh, 20px) clamp(16px, 3vw, 40px) !important;
    gap: clamp(12px, 2vw, 24px) !important;
    overflow-y: visible !important;
  }

  /* Left col: como desktop */
  #left-col { align-items: flex-start !important; width: auto !important; }
  #left-col .glass-card {
    background: #0f1014 !important;
    border: 1px solid var(--border2) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: none !important;
  }
  .header-row { display: flex !important; }
  .daily-badge { font-size: 9px !important; }
  .day-lbl { font-size: 9px !important; }

  /* Glyphs menores para caber */
  .g-cell { padding: 3px !important; }
  .g-cell svg { transform: scale(0.72) !important; }
  #glyph-row { gap: 3px !important; }

  /* Right card: como desktop mas compacto */
  .right-card-container {
    align-self: flex-start !important;
    width: auto !important;
    min-width: clamp(180px, 30vw, 260px) !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    background: #0f1014 !important;
    border: 1px solid var(--border2) !important;
    border-radius: 16px !important;
  }
  #right-col { width: 100% !important; min-width: 0 !important; }

  /* btn-ok visível, teclado oculto */
  #btn-ok { display: block !important; font-size: 11px !important; padding: 10px !important; }
  #kb-wrap { display: none !important; }
  #mobile-share-container { display: none !important; }

  /* Tentativas ocultas */
  #attempts-section { display: none !important; }
  .divider { display: block !important; }

  /* Células menores */
  .cell-box {
    width:  clamp(34px, 8vw, 44px) !important;
    height: clamp(34px, 8vw, 44px) !important;
    font-size: clamp(13px, 3.5vw, 17px) !important;
  }
  .cells-row { margin-bottom: 10px !important; gap: 4px !important; }
  .prog { margin-bottom: 16px !important; }

  /* Header compacto */
  #logo-header {
    padding: 5px 16px 3px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .logo-name { font-size: 18px !important; }
  .logo-sub  { font-size: 7px !important; }

  /* Botões de ícone menores */
  .right-btns { gap: 5px !important; margin-bottom: 8px !important; }
  .btn-ico { width: 28px !important; height: 28px !important; }
  .btn-ico svg { width: 13px !important; height: 13px !important; }
}


/* ── DESKTOP/iPAD PORTRAIT: qualquer dispositivo portrait com largura >= 600px ── */
/* Também janelas de 701 a 900 px em paisagem: duas colunas não cabem (principal.rs, LARGURA_DUAS_COLUNAS) */
@media (orientation: portrait) and (min-width: 600px), (min-width: 701px) and (max-width: 900px) {
  main {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(16px, 2.5vh, 32px) !important;
    padding: clamp(16px, 3vh, 40px) clamp(24px, 6vw, 80px) 0 !important;
  }
  main[data-letters="7"], main[data-multi] {
    padding-left: clamp(12px, 2vw, 24px) !important;
    padding-right: clamp(12px, 2vw, 24px) !important;
  }

  #left-col { align-items: center !important; width: 100% !important; }
  .header-row { align-self: stretch !important; display: flex !important; }
  .daily-badge { display: block !important; }
  .day-lbl { align-self: flex-end !important; text-align: right !important; }
  #glyph-row { justify-content: center !important; }
  .glass-card { width: 100% !important; }

  #left-col .glass-card {
    background: var(--surface) !important;
    border: 1px solid var(--border2) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: none !important;
    padding: 24px 16px !important;
  }

  .right-card-container {
    align-self: center !important;
    width: 100% !important;
    max-width: 540px !important;
    padding-top: 8px !important;
    margin-top: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border2) !important;
    border-radius: 20px !important;
  }
  #right-col { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

  /* btn-ok visível — teclado nativo (físico ou virtual) */
  #btn-ok    { display: block !important; }
  #kb-wrap   { display: none !important; }
  #mobile-share-container { display: none !important; }
  #attempts-section { display: block !important; }
  .divider   { display: block !important; }

  .cell-box {
    width:  clamp(44px, 8vw, 64px) !important;
    height: clamp(44px, 8vw, 64px) !important;
    font-size: clamp(16px, 3vw, 22px) !important;
  }

  #logo-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .logo-icon { display: block !important; }
  .logo-sub  { display: block !important; }
  .logo-name { font-size: clamp(24px, 4vw, 38px) !important; }
}

/* Paisagem acima de 900 px com glifo pequeno demais lado a lado (7 letras até ≈1100 px): o Rust marca
   `main[data-pilha]` (principal.rs, `plano`) e vale o mesmo arranjo empilhado do bloco acima. */
main[data-pilha] {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(16px, 2.5vh, 32px) !important;
  padding: clamp(16px, 3vh, 40px) clamp(24px, 6vw, 80px) 0 !important;
}
main[data-pilha][data-letters="7"],
main[data-pilha][data-multi] {
  padding-left: clamp(12px, 2vw, 24px) !important;
  padding-right: clamp(12px, 2vw, 24px) !important;
}
main[data-pilha] #left-col { align-items: center !important; width: 100% !important; }
main[data-pilha] .header-row { align-self: stretch !important; display: flex !important; }
main[data-pilha] .daily-badge { display: block !important; }
main[data-pilha] .day-lbl { align-self: flex-end !important; text-align: right !important; }
main[data-pilha] #glyph-row { justify-content: center !important; }
main[data-pilha] .glass-card { width: 100% !important; }
main[data-pilha] #left-col .glass-card {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: none !important;
  padding: 24px 16px !important;
}
main[data-pilha] .right-card-container {
  align-self: center !important;
  width: 100% !important;
  max-width: 540px !important;
  padding-top: 8px !important;
  margin-top: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 20px !important;
}
main[data-pilha] #right-col { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
main[data-pilha] #btn-ok { display: block !important; }
main[data-pilha] #kb-wrap { display: none !important; }
main[data-pilha] #mobile-share-container { display: none !important; }
main[data-pilha] #attempts-section { display: block !important; }
main[data-pilha] .divider { display: block !important; }
main[data-pilha] .cell-box {
  width:  clamp(44px, 8vw, 64px) !important;
  height: clamp(44px, 8vw, 64px) !important;
  font-size: clamp(16px, 3vw, 22px) !important;
}

/* ── LIGHT MODE ── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #E6E8ED;
    --surface:      #e8eaf4;
    --surface2:     #cacde0;
    --surface3:     #d3d6e8;
    --border:       #c4c7d6;
    --border2:      #b4b7c8;
    --text:       #1a1c2a;
    --text-dim:   #4a4d62;
    --text-mid:   #5c5f7a;
    --accent:       #0b0c10;
    --accent-glow:  rgba(11,12,16,.15);
    --accent-dim:   rgba(11,12,16,.06);
    --ghost:     rgba(0,0,0,.10);
    --seg:       #0b0c10;
    --gold:      #C8900A;
    --gold-glow: rgba(200,144,10,.55);
    --ok-glow:   rgba(40,160,65,.55);
  }
  html { background-color: #ffffff; }
  body::after { background: #E6E8ED; }
  body {
    background: linear-gradient(to bottom, #ffffff 0%, #E6E8ED 55%, #ffffff 85%, #ffffff 100%);
  }
  /* Botão principal: inverte para fundo escuro */
  /* Classe dinâmica para o botão de Compartilhar com tom mais escuro */
#btn-ok.btn-share {
  background-color: #2e5c2b; 
  color: #ffffff;
  border-color: #2e5c2b;
  box-shadow: 0 0 15px rgba(46, 92, 43, 0.3); /* Brilho mais sutil */
  transition: all 0.3s ease;
}
  #btn-ok.btn-share:active {
  background-color: #244921; /* Feedback visual ao clicar */
  transform: scale(0.98);
}
  .btn-ok:hover:not(:disabled) {
    box-shadow: 0 0 22px rgba(11,12,16,.32), 0 0 10px rgba(11,12,16,.16);
  }
  /* Botões primários de modal */
  .btn-p  { color: #ffffff; }
  .btn-tnav.pri { color: #ffffff; }
  /* Glyph on: sombra escura visível */
  .sg-on      { filter: drop-shadow(0 0 3px rgba(0,0,0,.40)); }
  .sg-correct { filter: drop-shadow(0 0 5px rgba(40,160,65,.85)); }
  /* Alfabeto: segmentos menos intensos */
  .alpha-modal .sg-on    { stroke: rgba(11,12,16,.90); filter: none; }
  .alpha-modal .sg-ghost { stroke: rgba(0,0,0,.08); }
  /* Badge diário */
  .g-cell.gold-cell { background: rgba(200,144,10,.06); }
  .gold-cell svg { filter: none; }
  /* Calendário: dia sendo jogado */
  .cal-day.playing { background: #0b0c10; color: #ffffff !important; border-color: #0b0c10; }
  .cal-day.today.playing { background: #0b0c10 !important; border-color: #0b0c10 !important; color: #ffffff !important; }
  .cal-day.playing.today::after { background: #ffffff; }
  /* Ícones de botão: eram brancos, ficam escuros */
  .btn-ico { color: var(--text-dim); background: rgba(0,0,0,.04); }
  .btn-ico:hover { color: var(--accent); background: var(--accent-dim); }
  /* Bolinhas de progresso */
  .pdot { border-color: rgba(0,0,0,.18); }
  .pdot.win, .pdot.fail {
    background: #0b0c10;
    border-color: #0b0c10;
    box-shadow: 0 0 8px rgba(0,0,0,.25), 0 0 18px rgba(0,0,0,.08);
  }
  /* Glass card: fundo mais opaco para separar do bg */
  .glass-card { background: #E6E8ED; border-color: var(--border); }
  @media (max-width: 700px) {
    .right-card-container { background: #ffffff !important; border-color: var(--border) !important; }
  }
  /* Calendário: dias passados visíveis */
  .cal-day.past { color: var(--text); }
  /* Hints: melhor contraste no claro */
  .hint-item.locked { opacity: .55; }
  .hint-item.unlocked .hint-text { color: var(--text); }
  .hint-item.unlocked .hint-badge { color: var(--text); }
  .hint-item.revealed .hint-text { color: #1a6e30; }
  .hint-item.revealed .hint-text strong { color: #0d3d1c; }
  .hint-item.revealed .hint-badge { color: #1a6e30; }
  /* Banner de arquivo: desktop light */
  #archive-banner { background: rgba(0,0,0,.04); }
  /* Overlay */
  .ov { background: rgba(255, 255, 255, 0.6); }
}
/* Mobile light mode: cabeçalho transparente igual ao fundo */
@media (max-width: 700px) and (prefers-color-scheme: light) {
  #archive-banner { background: transparent; border-bottom: none; }
  #logo-header    { background: transparent; border-bottom: none; }
}