:root {
  --paper: #F7F5F0; --paper2: #EDEAE2; --paper3: #DDD9CE;
  --ink: #1C1B18; --ink2: #4A4840; --ink3: #908D82;
  --forest: #4f5433; --forest-lt: #626841; --forest-bg: #f3f4ef;
  --rust: #B03A1E; --rust-bg: #FAF0EC;
  --gold: #8A6500; --gold-bg: #FBF6E8;
  --teal: #135F58; --teal-bg: #E8F4F3;
  --blue: #1A3E6A; --blue-bg: #EBF1FA;
  --br: rgba(28,27,24,0.07); --br2: rgba(28,27,24,0.13);
  --r: 14px; --rsm: 9px;
  --sh: 0 1px 4px rgba(28,27,24,0.06), 0 4px 12px rgba(28,27,24,0.04);
  --sh-hover: 0 6px 20px rgba(30,92,58,0.12), 0 2px 6px rgba(28,27,24,0.06);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  /* Fonte do logótipo. Separada da --font-brand porque as skins trocam a segunda
     (títulos e botões) e o wordmark tem de continuar na letra do logo original. */
  --font-logo: 'Baloo Bhai', var(--font-display);
  --font-brand: var(--font-logo);
  /* Extraídas do CSS para as skins as poderem trocar */
  --surface: #fff;          /* fundo de cartões, botões e campos */
  --on-accent: #fff;        /* texto/ícones sobre o verde de acento */
  --ok: #22c55e;            /* ponto de servidor ligado */
  --forest-bg2: #E7ECD8;    /* pastilha dos pontos no HUD */
  --rust-dk: #8f2e18;       /* hover do botão de apagar media */
  --muted: var(--ink3);     /* neutro: modos ainda não jogados, ícones secundários */
}

/* ═══════════════════════════════════════════════════════════
   SKIN "CAMPO" — inspirada nas apps de campo do Cornell (eBird/Merlin):
   branco puro, tudo plano sem sombras, uma só fonte sem serifas em pesos
   fortes, cantos pouco arredondados e linhas finas a separar secções.
   ═══════════════════════════════════════════════════════════ */
:root[data-skin="campo"] {
  --paper: #FFFFFF; --paper2: #F4F6F4; --paper3: #E4E8E4;
  --ink: #1B1B1B; --ink2: #4A4A4A; --ink3: #767974;
  --forest: #2E7D46; --forest-lt: #37944F; --forest-bg: #EAF3EC;
  --forest-bg2: #E4EFE7;
  --rust: #C0392B; --rust-bg: #FCEDEB; --rust-dk: #99291d;
  --gold: #B07D00; --gold-bg: #FFF8E6;
  --teal: #3A6C8E; --teal-bg: #E9F3F9;
  --blue: #3A6C8E; --blue-bg: #E8F4FA;
  --br: rgba(0,0,0,0.09); --br2: rgba(0,0,0,0.16);
  --r: 5px; --rsm: 3px;
  --muted: #667475;      /* cinzento-esverdeado dos ícones e rótulos secundários */
  --tint: #E8F1EE;       /* fundo das miniaturas */
  --chip-bg: #F8FAF9;    /* pastilhas das aves no pré-jogo */
  --strip: #EAF1EF;      /* faixa de texto por baixo das fotos no modo Identifica */
  --sh: none;
  --sh-hover: none;
  --surface: #FFFFFF;
  --on-accent: #FFFFFF;
  --font-display: var(--font-body);
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: var(--font-body);
  --font-brand: var(--font-body);
}
/* Logo: na home entra o wordmark completo desta skin (logo-campo.png, com a
   assinatura Wild & Kind); nos restantes sítios é texto — mesma letra do logo
   original, "Bird" no verde do eBird e "quiz" a preto, sem itálico. */
:root[data-skin="campo"] .brand-img{display:none}
:root[data-skin="campo"] .home-brand{display:block}
:root[data-skin="campo"] .home-hero .brand-word{display:none}
.brand-word{display:none}
:root[data-skin="campo"] .brand-word{
  display:inline-block;font-family:var(--font-logo);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);line-height:1;
}
:root[data-skin="campo"] .brand-word em{font-style:normal;color:var(--forest);font-weight:700}
:root[data-skin="campo"] .topnav .brand-word{font-size:1.75rem}
/* Logos com marcação própria: mesma estrutura do wordmark — "Bird" destacado, "quiz" em tinta */
:root[data-skin="campo"] .logo,
:root[data-skin="campo"] .home-logo,
:root[data-skin="campo"] .boot-name{font-family:var(--font-logo);color:var(--ink);font-weight:700;letter-spacing:-.01em}
:root[data-skin="campo"] .logo em,
:root[data-skin="campo"] .home-logo em,
:root[data-skin="campo"] .boot-name em{color:var(--forest);font-style:normal;font-weight:700}
/* No painel lateral (fundo azul) o destaque faz-se pelo contraste, não pela cor */
:root[data-skin="campo"] .side-logo{color:rgba(255,255,255,.65)}
:root[data-skin="campo"] .side-logo em{color:var(--on-accent);opacity:1}

/* Ícones Material Symbols (só nesta skin; a Wild & Kind mantém os emojis) */
/* Tamanho em em: o ícone acompanha o texto onde estiver, de um rótulo de 10px
   a um botão de 16px. Com medida fixa ficava descentrado em metade dos sítios. */
.ms-ico{width:1.15em;height:1.15em;vertical-align:-.22em;flex-shrink:0;align-self:center}
/* Invólucro inline: o original era um nó de texto, e num contentor flex isso é
   UM item. Com display:contents passavam a ser dois e a linha desalinhava. */
.ico-wrap{display:inline;white-space:nowrap}

/* Rótulos de secção: navy e em caixa normal, como na página de quiz do eBird
   (a Wild & Kind usa mono maiúsculo espaçado) */
:root[data-skin="campo"] .slbl{
  font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--blue);
}
/* Cartões de escolha: o não-selecionado azul, o selecionado verde — o padrão
   das secções "Onde? / Quando? / Fotografias ou sons?" do quiz do eBird */
:root[data-skin="campo"] .mcard{
  background:var(--blue-bg);border:1.5px solid transparent;
}
:root[data-skin="campo"] .mcard .mcard-name{color:var(--blue)}
:root[data-skin="campo"] .mcard.on{
  background:var(--forest-bg);border:1.5px solid var(--forest);
}
:root[data-skin="campo"] .mcard.on .mcard-name{color:var(--forest)}
:root[data-skin="campo"] .btn-p{width:100%;padding:17px;font-size:16px;font-weight:700}

/* Sem extra-bold em lado nenhum nesta skin: com a system-ui o 800 fica pesado de mais */
:root[data-skin="campo"] .hero h1,
:root[data-skin="campo"] .page-title,
:root[data-skin="campo"] h2 { font-weight: 600; letter-spacing: -.015em; }
:root[data-skin="campo"] .qz-name { font-weight: 600; }
:root[data-skin="campo"] .qlabel,
:root[data-skin="campo"] .pg-title,
:root[data-skin="campo"] .study-title,
:root[data-skin="campo"] .study-name,
:root[data-skin="campo"] .modal-title,
:root[data-skin="campo"] .cat-name,
:root[data-skin="campo"] .hub-name,
:root[data-skin="campo"] .res-msg,
:root[data-skin="campo"] h3 { font-weight: 600; letter-spacing: -.01em; }

/* Miniaturas dos quizzes: ícone cinzento-esverdeado sobre fundo claro */
:root[data-skin="campo"] .qz-thumb,
:root[data-skin="campo"] .pg-thumb{background:var(--tint);color:var(--muted);border-radius:var(--rsm)}
/* Uma linha só entre quizzes vizinhos, em vez de duas encostadas */
:root[data-skin="campo"] .qz-row{
  border:none;border-bottom:1px solid var(--br);border-radius:0;margin-bottom:0;
}
:root[data-skin="campo"] .qz-row:last-child{border-bottom:none}

/* Pastilhas das aves no pré-jogo */
:root[data-skin="campo"] .pg-bird-chip{background:var(--chip-bg);border-color:var(--chip-bg);color:var(--muted)}

/* Faixa do nome por baixo das fotos no modo Identifica */
:root[data-skin="campo"] .po-lbl{background:var(--strip)}

/* Ícone do cartão de modo acompanha a cor da seleção, não fica preto */
:root[data-skin="campo"] .mcard-ico{color:var(--blue)}
:root[data-skin="campo"] .mcard.on .mcard-ico{color:var(--forest)}

/* Botões da home: cantos discretos em vez de 18px e de pílula */
:root[data-skin="campo"] .home-play{border-radius:8px;box-shadow:none;font-family:var(--font-body)}
:root[data-skin="campo"] .home-bank{border-radius:8px;background:var(--surface)}

/* Menu lateral no azul do eBird, não no verde forte */
:root[data-skin="campo"] .side-panel{background:var(--blue)}

/* Desafio diário, missão e "todos os grupos": em vez de a linha inteira ficar
   sombreada, é o ícone que ganha o azul do eBird */
:root[data-skin="campo"] .qz-special{background:var(--surface);border-color:var(--br)}
:root[data-skin="campo"] .qz-special .qz-thumb,
:root[data-skin="campo"] .qz-back .qz-thumb{background:var(--blue);color:var(--on-accent)}
/* Repor a borda toda em vez de só o estilo: com `border:none` a largura fica em
   `medium` (3px), e mexer só no border-style ressuscitava uma barra preta de 3px. */
:root[data-skin="campo"] .qz-back{background:var(--surface);border:none;border-bottom:1px solid var(--br)}
/* Nesta skin nada levanta nem ganha sombra ao passar o rato — é tudo plano */
:root[data-skin="campo"] .qz-row:hover,
:root[data-skin="campo"] .mcard:hover,
:root[data-skin="campo"] .chip:hover,
:root[data-skin="campo"] .nbtn:hover,
:root[data-skin="campo"] .btn-s:hover,
:root[data-skin="campo"] .btn-p:hover,
:root[data-skin="campo"] .bcard:hover { transform: none; box-shadow: none; }
:root[data-skin="campo"] .btn-p { box-shadow: none; }
/* Fundo fotográfico da home: a linguagem destas apps é chapada, sem foto */
:root[data-skin="campo"] body.has-bg { background: var(--paper); }
:root[data-skin="campo"] .qz-row { border-radius: 0; border-left: none; border-right: none; }
@font-face{font-family:'Baloo Bhai';src:url('fonts/BalooBhai-Regular.ttf') format('truetype');font-weight:400 800;font-style:normal;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);min-height:100vh;line-height:1.6}
a{color:var(--forest);text-decoration:none}
a:hover{text-decoration:underline}

.app{max-width:780px;margin:0 auto;padding:0 1.5rem 6rem}
.screen{display:none;animation:fadeIn .3s cubic-bezier(.2,.8,.4,1) forwards;opacity:0}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.topnav{display:flex;align-items:center;justify-content:space-between;padding:1.6rem 0 1.1rem;border-bottom:1.5px solid var(--br);margin-bottom:2.2rem}
.logo{font-family:var(--font-logo);font-size:1.55rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.logo em{font-style:normal;color:var(--forest);font-weight:700}
.nav-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.nbtn{padding:7px 15px;border:1.5px solid var(--br2);border-radius:99px;background:var(--surface);font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;transition:all .18s ease;box-shadow:var(--sh)}
.nbtn:hover{background:var(--paper2);transform:translateY(-1px);box-shadow:var(--sh-hover)}
.nbtn.accent{background:var(--forest);color:var(--on-accent);border-color:var(--forest);box-shadow:0 2px 10px rgba(30,92,58,0.22)}
.nbtn.accent:hover{background:var(--forest-lt);box-shadow:0 4px 14px rgba(30,92,58,0.3)}

.lang-selector { display:flex; background:var(--paper2); border-radius:99px; padding:3px; border:1px solid var(--br2); margin-right:4px; }
.l-opt { background:none; border:none; padding:4px 10px; font-size:11.5px; font-weight:700; font-family:var(--font-body); cursor:pointer; color:var(--ink3); border-radius:99px; transition:all 0.2s; }
.l-opt.active { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,0.1); }

#server-dot{width:7px;height:7px;border-radius:50%;background:var(--ink3);display:inline-block;transition:background .3s;flex-shrink:0}
#server-dot.online{background:var(--ok);box-shadow:0 0 8px rgba(34,197,94,0.5)}

.subtabs-row{display:flex;gap:8px;margin-bottom:2rem;border-bottom:1.5px solid var(--br);padding-bottom:14px;flex-wrap:wrap}
.tab-content{display:none}
.tab-content.active{display:block}

.slbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px;margin-top:2rem;font-weight:500}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;margin-top:2rem}
.section-hdr .slbl{margin:0}

.hero{padding:3.2rem 0 2rem;text-align:center;position:relative}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--forest),transparent);border-radius:99px}
.hero-eye{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--forest);margin-bottom:1rem;font-weight:500}
.hero h1{font-family:var(--font-display);font-size:3.1rem;font-weight:700;line-height:1.1;letter-spacing:-.04em;margin-bottom:1rem;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--forest);font-weight:600}
.hero p{font-size:14.5px;color:var(--ink2);max-width:460px;margin:0 auto;line-height:1.7}
.hero-bird-accent{font-size:3rem;line-height:1;display:block;margin-bottom:1rem;filter:drop-shadow(0 4px 12px rgba(30,92,58,0.15))}

.pack-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem}
.pack-card{background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:16px 20px;box-shadow:var(--sh);display:flex;align-items:center;gap:14px;transition:all .22s ease}
.pack-card:hover{border-color:var(--br2);transform:translateY(-2px);box-shadow:var(--sh-hover)}
.pack-thumb{width:52px;height:50px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--forest-bg);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid rgba(30,92,58,0.12)}
.pack-info{flex:1;min-width:0}
.pack-name{font-size:15px;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.pack-meta{font-size:12px;color:var(--ink3);margin-top:3px}
.pack-tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.ptag{font-family:var(--font-mono);font-size:9px;padding:3px 9px;border-radius:99px;background:var(--paper2);color:var(--ink2);font-weight:500;letter-spacing:.04em}
.ptag.active{background:var(--forest-bg);color:var(--forest)}

.install-zone{border:2px dashed var(--br2);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;transition:all .22s ease;background:var(--surface);position:relative;overflow:hidden;box-shadow:var(--sh)}
.install-zone:hover, .install-zone.dragover{border-color:var(--forest);background:var(--forest-bg)}
.install-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.iz-ico{font-size:26px;display:block;margin-bottom:10px;opacity:.75}
.iz-txt{font-size:13.5px;color:var(--ink2);font-weight:500}.iz-txt strong{color:var(--forest)}
.iz-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink3);margin-top:7px;letter-spacing:.02em}

.search-wrap{position:relative;margin-bottom:1rem}
.search-input{width:100%;padding:11px 14px 11px 42px;border:1.5px solid var(--br2);border-radius:var(--r);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--surface);outline:none;transition:all .2s ease;box-shadow:var(--sh)}
.search-input:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(30,92,58,0.1)}
.search-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;opacity:.5}
.search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:15px;color:var(--ink3);padding:2px;display:none}
.search-clear.show{display:block}

.filter-row{display:flex;gap:7px;margin-bottom:1.2rem;flex-wrap:wrap;align-items:center}
.filter-chip{padding:6px 14px;border:1.5px solid var(--br2);border-radius:99px;font-size:12.5px;cursor:pointer;background:var(--surface);color:var(--ink2);transition:all .18s ease;font-weight:500;white-space:nowrap;box-shadow:var(--sh);font-family:var(--font-body)}
.filter-chip:hover{background:var(--paper2);transform:translateY(-1px)}
.filter-chip.on{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.filter-chip.pack-filter{background:var(--blue-bg);color:var(--blue);border-color:rgba(26,62,106,0.15)}
.filter-chip.pack-filter.on{background:var(--blue);color:var(--on-accent);border-color:var(--blue)}

/* 🔍 FILTROS AVANÇADOS COM SLIDERS */
.adv-filters { display:flex; flex-direction:column; gap:12px; margin-bottom:1.5rem; background:var(--paper2); padding:16px; border-radius:var(--r); border:1.5px solid var(--br2); }
.adv-selects { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
.adv-selects select { width:100%; padding:9px 12px; border:1px solid var(--br2); border-radius:6px; font-family:var(--font-body); font-size:13px; color:var(--ink); background:var(--surface); outline:none; cursor:pointer;}
.adv-sliders { display:grid; grid-template-columns: 1fr; gap:12px; }
@media(min-width:480px){ .adv-sliders { grid-template-columns: 1fr 1fr; } }

/* 🎓 Percurso — uma barra verde por unidade (o tipo de ave) e, por baixo, os níveis
   dessa unidade também em barra. Os nós redondos a serpentear ficavam confusos. */
/* baseline: o botao acerta pela linha do titulo. Com flex-start encostava ao topo do
   bloco e ficava visivelmente mais alto do que o "Aprender". */
.ap-cabecalho{display:flex;align-items:baseline;gap:12px;padding:.5rem 0 1.2rem}
.ap-resumo{font-size:13px;color:var(--ink3);margin-top:5px}
.ap-unidade{margin-bottom:1.6rem}
.ap-unidade-topo{display:flex;align-items:center;gap:10px;padding:11px 14px;margin-bottom:8px;
  border-radius:var(--r);background:var(--forest);color:var(--on-accent)}
.ap-unidade-ico{font-size:19px;flex:0 0 auto}
.ap-unidade-nome{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ap-unidade-n{font-size:12.5px;font-weight:700;opacity:.85}
.ap-barras{display:flex;flex-direction:column;gap:6px;padding-left:14px}
/* A barra de progresso é o fundo do próprio botão, não um elemento à parte */
.ap-barra{position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 14px;border:1.5px solid var(--br2);border-radius:var(--rsm);
  background:var(--surface);overflow:hidden;cursor:pointer;transition:all .18s ease;
  -webkit-tap-highlight-color:transparent}
.ap-barra[disabled]{cursor:default;opacity:.55}
.ap-barra-fill{position:absolute;left:0;top:0;bottom:0;background:var(--forest-bg);
  transition:width .4s ease;z-index:0}
.ap-barra > :not(.ap-barra-fill){position:relative;z-index:1}
.ap-barra-ico{font-size:13px;flex:0 0 auto;color:var(--ink3)}
.ap-barra-nome{flex:1;text-align:left;font-family:var(--font-body);font-size:13.5px;
  font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-barra-n{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ink3)}
.ap-barra.atual{border-color:var(--forest)}
.ap-barra.atual .ap-barra-ico{color:var(--forest)}
.ap-barra.atual:hover{transform:translateX(2px);box-shadow:var(--sh-hover)}
.ap-barra.completo{border-color:var(--forest);background:var(--forest-bg)}
.ap-barra.completo .ap-barra-fill{background:transparent}
.ap-barra.completo .ap-barra-ico,.ap-barra.completo .ap-barra-n{color:var(--forest)}
/* A fase 2 depende da fase 1 do mesmo nível: o avanço mostra isso sem precisar de texto */
/* Cada fase recua um pouco mais: le-se de relance que sao passos do mesmo nivel */
.ap-barra.fase2{margin-left:18px;width:calc(100% - 18px)}
.ap-barra.fase3{margin-left:36px;width:calc(100% - 36px)}

/* ✨ Aprender à medida */
.ap-custom-btn{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:1.4rem;
  padding:12px 14px;border:1.5px dashed var(--br2);border-radius:var(--r);
  background:var(--surface);cursor:pointer;text-align:left;transition:all .18s ease;
  -webkit-tap-highlight-color:transparent}
.ap-custom-btn:hover{border-color:var(--forest);border-style:solid}
.ap-custom-ico{font-size:20px;flex:0 0 auto}
.ap-custom-txt{display:flex;flex-direction:column;gap:2px}
.ap-custom-nome{font-size:14.5px;font-weight:700;color:var(--ink)}
.ap-custom-sub{font-size:12px;color:var(--ink3)}
/* Filtro fotos/sons: fica logo por baixo do cabeçalho, antes dos níveis */
.chips.ap-media{margin:0 0 1.2rem}
.apc-ave.fora{opacity:.45}
.apc-grupo{margin-bottom:1.4rem}
.apc-todas{background:none;border:none;padding:0;font:inherit;font-size:11.5px;
  font-weight:700;color:var(--on-accent);opacity:.9;cursor:pointer;text-decoration:underline}
.apc-aves{display:flex;flex-direction:column;gap:5px;padding-left:14px}
.apc-ave{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;
  border:1.5px solid var(--br2);border-radius:var(--rsm);background:var(--surface);
  cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent}
.apc-ave.on{border-color:var(--forest);background:var(--forest-bg)}
.apc-ave-check{flex:0 0 auto;width:17px;height:17px;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--br2);border-radius:4px;
  font-size:11px;font-weight:700;color:var(--forest)}
.apc-ave.on .apc-ave-check{border-color:var(--forest)}
.apc-ave-nome{flex:1;text-align:left;font-size:13.5px;font-weight:600;color:var(--ink)}
.apc-ave-media{flex:0 0 auto;font-size:11px;opacity:.7}
/* A barra de arranque acompanha o fim da lista: com 50 aves, um botão lá no fundo
   obrigava a rolar tudo outra vez só para começar. */
.apc-barra{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 0;background:var(--paper);border-top:1.5px solid var(--br2)}
.apc-barra .btn-s,.apc-barra .btn-p{margin:0;padding:9px 14px;flex:0 0 auto}
.apc-contagem{flex:1;font-size:12.5px;font-weight:700;color:var(--ink3)}

/* 📔 Caderno — grupos e galeria */
.cad-voltar{background:none;border:none;padding:0 0 8px;color:var(--ink3);
  font-family:var(--font-body);font-size:13px;cursor:pointer}
.cad-voltar:hover{color:var(--ink)}
.cad-grupos{display:flex;flex-direction:column;gap:8px}
.cad-grupo{display:flex;align-items:center;gap:12px;width:100%;padding:14px;
  border:1.5px solid var(--br);border-radius:var(--r);background:var(--surface);
  cursor:pointer;box-shadow:var(--sh);transition:all .18s ease;
  -webkit-tap-highlight-color:transparent}
.cad-grupo:hover{transform:translateY(-1px);box-shadow:var(--sh-hover);border-color:var(--forest)}
.cad-grupo-ico{font-size:24px;flex:0 0 auto}
.cad-grupo-nome{flex:1;text-align:left;font-family:var(--font-body);font-size:15px;
  font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cad-grupo-n{font-size:13px;font-weight:700;color:var(--ink3)}

.cad-conta{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:10px}

/* Barra de pesquisa e de seleção da galeria */
.cad-barra{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cad-sel-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;margin-bottom:12px;border-radius:var(--rsm);
  background:var(--blue-bg);color:var(--blue);font-size:13px;font-weight:600}
.cad-ficha.escolhida{outline:3px solid var(--forest);outline-offset:-3px}
/* Caixa de seleção no canto da ficha, no lugar do selo de dominada */
.cad-ficha-check{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;
  border:2px solid #fff;background:rgba(28,27,24,.35);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.cad-ficha.escolhida .cad-ficha-check{background:var(--forest);border-color:#fff}

/* ⚖️ Comparação lado a lado. Grelha e não tabela: as colunas acompanham o número de
   aves escolhidas, e a linha de rótulos fica presa à esquerda ao rolar na horizontal. */
#s-comparar #cmp-corpo{overflow-x:auto;padding-bottom:2rem}
.cmp-tabela{display:grid;gap:1px;background:var(--br2);border:1px solid var(--br2);
  border-radius:var(--rsm);overflow:hidden;min-width:min-content}
.cmp-canto,.cmp-cabeca,.cmp-rotulo,.cmp-cel{background:var(--surface);padding:10px 12px}
.cmp-cabeca{display:flex;flex-direction:column;gap:2px;min-width:130px;
  font-family:var(--font-body);font-size:13.5px;font-weight:700;color:var(--ink);
  background:var(--forest-bg)}
.cmp-sci{font-size:11px;font-style:italic;font-weight:400;color:var(--ink3)}
.cmp-rotulo{position:sticky;left:0;z-index:1;min-width:96px;background:var(--paper2);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);display:flex;align-items:center}
.cmp-cel{font-size:12.5px;line-height:1.5;color:var(--ink2)}
.cmp-foto{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 38%;
  border-radius:var(--rsm);display:block}
.cmp-vazio{color:var(--ink3)}
.cmp-som{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  padding:0;border:none;border-radius:50%;background:var(--forest);color:var(--on-accent);
  cursor:pointer;transition:background .18s ease}
.cmp-som:hover{background:var(--forest-lt)}

/* Galeria inspirada nas fichas do Merlin: foto grande, nome numa faixa por baixo */
.cad-galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.cad-galeria{grid-template-columns:repeat(3,1fr)}}
.cad-ficha{display:flex;flex-direction:column;padding:0;border:none;border-radius:var(--r);
  overflow:hidden;background:var(--surface);cursor:pointer;box-shadow:var(--sh);
  transition:all .18s ease;-webkit-tap-highlight-color:transparent}
.cad-ficha:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.cad-ficha-foto{position:relative;display:block;width:100%;aspect-ratio:4/3;
  background:var(--paper2);overflow:hidden}
.cad-ficha-foto img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
/* Sem foto continua a ser uma ficha, não um buraco: é a coleção por preencher */
.cad-ficha-vazia{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:26px;opacity:.35}
.cad-ficha.sem-foto{opacity:.7}
.cad-ficha-selo{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;
  background:var(--forest);color:var(--on-accent);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.cad-ficha-nome{padding:9px 10px;font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--ink);text-align:left;line-height:1.3}
.cad-ficha.sabida .cad-ficha-nome{color:var(--forest)}

/* 🔍 "Qual é esta ave?" — a página rola normalmente, como os outros ecrãs. Prender
   tudo à altura da janela deixava a foto a mudar de tamanho conforme o conteúdo. */
.eg-body{display:flex;flex-direction:column;gap:12px;padding:10px 0 3rem}
.eg-tentativas{font-family:var(--font-mono);font-size:12px;color:var(--ink3);font-weight:600}
/* flex:1 + min-height:0 = a foto fica com o espaço que sobrar e nunca o excede */
.eg-foto-wrap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r);background:var(--paper2);border:3px solid var(--teal)}
/* scale(1.1): o desfoque esbate as bordas e deixava uma moldura clara à volta da foto */
/* O scale existe só para esconder as bordas esbatidas do desfoque, e por isso encolhe
   com ele: na revelação final volta a 1 e vê-se o enquadramento inteiro da foto. */
.eg-foto{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block;
  transform-origin:center 38%;transition:filter .6s ease,transform .6s ease}
.eg-som{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;padding:0;border:3px solid var(--surface);border-radius:50%;
  background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.3);
  transition:transform .12s ease;-webkit-tap-highlight-color:transparent}
.eg-som:active{transform:scale(.93)}

/* Grelha do histórico: 5 tentativas × 5 campos. Fica sempre à vista, mesmo vazia, para
   se perceber de relance quantas tentativas restam e o que já ficou resolvido. */
.eg-grelha{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.eg-cel{aspect-ratio:1;border:1.5px solid var(--br2);border-radius:var(--rsm);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  color:transparent;background:var(--surface);transition:all .25s ease}
.eg-cel.certa{background:var(--forest);border-color:var(--forest);color:var(--on-accent)}
.eg-cel.errada{background:var(--rust);border-color:var(--rust);color:var(--on-accent)}

/* Barra dos campos + botão de adivinhar */
.eg-barra{display:flex;flex-direction:column;gap:7px}
.eg-campos{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.eg-campo{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;padding:6px;border:1.5px solid var(--br2);border-radius:var(--rsm);
  background:var(--surface);color:var(--ink2);cursor:pointer;transition:all .15s ease;
  -webkit-tap-highlight-color:transparent}
/* Medida fixa: a .ms-ico base é dimensionada em em para acompanhar o texto, e num
   botão sem texto isso dava um ícone pequeno de mais. */
.eg-campo .ms-ico{width:30px;height:30px;vertical-align:middle}
.eg-campo-txt{font-family:var(--font-body);font-size:10px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;text-align:center;line-height:1.15}
.eg-campo:hover:not([disabled]){border-color:var(--forest);color:var(--ink)}
.eg-campo.preenchido{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.eg-campo.resolvido{background:var(--forest-bg);border-color:var(--forest);color:var(--forest);cursor:default}
.eg-guess{width:100%;padding:13px;border:none;border-radius:var(--rsm);background:var(--forest);
  color:var(--on-accent);font-family:var(--font-brand);font-size:1rem;font-weight:700;
  letter-spacing:.06em;cursor:pointer;transition:background .18s ease;
  -webkit-tap-highlight-color:transparent}
.eg-guess:hover{background:var(--forest-lt)}
.eg-guess:active{transform:scale(.99)}
#eg-next{display:none}
#eg-next.show{display:block}

/* Folha de opções de um campo, a subir de baixo */
.eg-folha{position:fixed;inset:0;z-index:220;display:flex;align-items:flex-end}
.eg-folha-fundo{position:absolute;inset:0;background:rgba(28,27,24,0.45);animation:fadeIn .18s ease}
.eg-folha-painel{position:relative;width:100%;max-height:82vh;overflow-y:auto;
  background:var(--blue-bg);border-radius:var(--r) var(--r) 0 0;padding:18px 16px 28px;
  animation:egSobe .22s cubic-bezier(.2,.8,.4,1)}
@keyframes egSobe{from{transform:translateY(100%)}to{transform:translateY(0)}}
.eg-folha-topo{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.eg-folha-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:0 0 auto;border-radius:50%;background:var(--surface);color:var(--blue)}
.eg-folha-ico .ms-ico{width:26px;height:26px}
.eg-folha-titulo{flex:1;text-align:center;font-size:15px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0}
.eg-folha-x{width:32px;height:32px;flex:0 0 auto;padding:0;border:none;border-radius:50%;
  background:none;color:var(--blue);font-size:15px;cursor:pointer}
.eg-folha-nota{text-align:center;font-size:12.5px;color:var(--ink2);
  text-decoration:underline;margin:0 0 14px}
.eg-folha-opts{display:flex;flex-direction:column;gap:8px}
.eg-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  padding:13px 16px;border:1.5px solid transparent;border-radius:var(--rsm);
  background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;
  transition:all .15s ease;-webkit-tap-highlight-color:transparent}
.eg-opt:hover{border-color:var(--forest)}
.eg-opt.on{background:var(--forest);border-color:var(--forest);color:var(--on-accent)}
.eg-opt-txt{font-family:var(--font-body);font-size:14.5px;font-weight:600}
.eg-opt-sub{font-family:var(--font-body);font-size:12.5px;font-style:italic;opacity:.7}

/* 🧭 Modo guiado — som em cima, aves em baixo. Cartões largos e altos: no telemóvel
   lê-se a descrição do som de relance, e é isso que se está a treinar a associar. */
.gd-body{padding:1.2rem 0 5rem;display:flex;flex-direction:column;align-items:stretch;gap:14px}
/* Leitor: o espectrograma é o elemento grande, os botões são pequenos ao lado.
   Antes o "Ouvir" ocupava a largura toda e nem sequer deixava parar o som. */
.gd-player{display:flex;flex-direction:column;gap:10px}
/* Ronda de vista: a foto ocupa o lugar do espectrograma */
.gd-foto-wrap{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--rsm);
  background:var(--paper2);border:1.5px solid var(--br)}
.gd-foto{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.gd-spec{width:100%;height:150px;display:block;border-radius:var(--rsm);
  background:var(--paper2);border:1.5px solid var(--br)}
/* O play sobe para cima do espectrograma e fica ao centro exato dele. O ↻ vem logo a
   seguir, encostado ao play, mas posicionado a partir do centro — assim ficam juntos
   sem que o ↻ empurre o play para fora do eixo. */
.gd-player{margin-bottom:-14px}
.gd-controls{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:56px;margin-top:-30px;z-index:2}
.gd-play{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  padding:0;border:none;border-radius:50%;background:var(--forest);color:var(--on-accent);
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:background .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
.gd-play:hover{background:var(--forest-lt)}
.gd-play:active{transform:scale(.93)}
.gd-play.on{background:var(--forest-lt)}
.gd-play-ico{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.gd-replay{position:absolute;left:calc(50% + 40px);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  padding:0;border:1.5px solid var(--br2);border-radius:50%;background:var(--surface);
  color:var(--ink2);cursor:pointer;transition:background .18s ease,color .18s ease;
  box-shadow:var(--sh);-webkit-tap-highlight-color:transparent}
.gd-replay:hover{background:var(--paper2);color:var(--ink)}
.gd-replay:active{transform:translateY(-50%) scale(.93)}
.gd-prompt{background:var(--gold-bg,var(--paper2));border:1.5px dashed var(--br2);
  border-radius:var(--rsm);padding:12px 15px}
.gd-prompt-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.gd-prompt-txt{font-size:14px;line-height:1.55;color:var(--ink2)}
.gd-cards{display:flex;flex-direction:column;gap:10px}
.gd-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;
  padding:14px 16px;border:1.5px solid var(--br2);border-radius:var(--r);background:var(--surface);
  color:var(--ink);text-align:left;cursor:pointer;transition:all .18s ease;
  font-family:var(--font-body);-webkit-tap-highlight-color:transparent}
.gd-card:hover:not([disabled]){border-color:var(--forest);transform:translateY(-1px)}
.gd-card[disabled]{cursor:default}
.gd-card-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.gd-card-desc{font-size:12.5px;line-height:1.5;color:var(--ink3)}
.gd-card.correct{border-color:var(--forest);background:var(--forest-bg)}
.gd-card.wrong{border-color:var(--rust);background:var(--rust-bg)}
/* Fase 2, pergunta "encontra a foto de": os cartões passam a ser fotos e a lista
   vertical dá lugar a uma grelha — seis fotos em coluna eram meio metro de rolagem. */
.gd-cards.fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gd-card-foto{padding:0;overflow:hidden;align-items:stretch}
.gd-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gd-prompt-nome{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
/* Pontos de domínio: quantos acertos seguidos faltam para a ave sair do grupo */
.gd-mastery{display:flex;gap:8px;align-items:center}
.gd-dot{font-size:10px;letter-spacing:1px;color:var(--forest);opacity:.85}
#gd-next{display:none}
#gd-next.show{display:block}

/* 🚫 "Nenhuma destas": a quinta opção de todas as perguntas de escolha. Fica sempre
   em último e visualmente à parte das aves, para se perceber que não é mais uma ave. */
/* Ocupa a linha inteira, seja qual for o número de colunas da grelha nesse ecrã: no
   telemóvel as opções já vêm a uma coluna, no computador vêm a duas (ou três no
   Identifica) e o "Nenhuma destas" ficava com metade da largura das outras. O 1/-1
   resolve os dois casos sem media queries nem contas em JS. */
.opt-none{grid-column:1/-1;font-style:italic;color:var(--ink3);border-style:dashed}
/* No "Identifica" esta é uma resposta como as outras (uma em cinco), por isso pesa o
   mesmo que os cartões de foto: fundo e sombra de cartão, texto na cor normal. O que a
   distingue é só a borda tracejada, não ser mais apagada do que as restantes. */
.photo-opt.opt-none{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:64px;padding:16px;font-family:var(--font-body);font-size:15px;font-weight:600;
  font-style:normal;color:var(--ink);background:var(--surface);border:2px dashed var(--br2);
  box-shadow:var(--sh);cursor:pointer}
.photo-opt.opt-none:not([disabled]):hover{border-color:var(--forest-lt);background:var(--paper2)}
.opt-none.correct,.opt-none.wrong{font-style:normal}

/* ➕ "Mais filtros": gaveta para os filtros de nicho (pacote, medidas, região do eBird).
   Feita com <details>, para abrir e fechar sem JavaScript nenhum. */
.more-panel{margin-bottom:1.5rem;border:1.5px solid var(--br2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.more-summary{display:flex;align-items:center;gap:10px;padding:12px 15px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink2);list-style:none;-webkit-tap-highlight-color:transparent;user-select:none}
.more-summary::-webkit-details-marker{display:none}   /* o triângulo nativo do Safari/Chrome */
.more-summary:hover{background:var(--paper2)}
/* O sinal é desenhado em CSS: um "+" que roda para "×" quando a gaveta abre */
.more-sign{position:relative;width:15px;height:15px;flex:0 0 auto;transition:transform .2s ease}
.more-sign::before,.more-sign::after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:var(--forest);border-radius:2px;transform:translateY(-50%)}
.more-sign::after{transform:translateY(-50%) rotate(90deg)}
.more-panel[open] .more-sign{transform:rotate(45deg)}
.more-body{padding:0 15px 15px;display:flex;flex-direction:column;gap:16px;border-top:1.5px solid var(--br)}
.more-block{padding-top:14px}
.more-lbl{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.more-body .filter-row{margin-bottom:0}

/* 🌍 Cartão do filtro por região do eBird (os estilos estavam inline no HTML, o que
   impedia as skins de lhes tocar e obrigava a repetir a cor em cada elemento) */
.ebird-card{margin:0;padding:16px;background:var(--blue-bg);border-color:rgba(26,62,106,0.15)}
.ebird-title{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px;color:var(--blue)}
.ebird-card label{color:var(--blue)}
.ebird-card input{border-color:rgba(26,62,106,0.2);background:var(--surface)}
.ebird-fields{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.ebird-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ebird-btns .btn-s{margin:0;flex:1;color:var(--on-accent);border:none;padding:10px}
#ebird-btn-recent{background:var(--blue)}
#ebird-btn-hist{background:var(--teal)}
/* ⓘ Botão de ajuda: redondo, discreto, do tamanho do texto ao lado */
.info-btn{width:19px;height:19px;flex:0 0 auto;padding:0;border:1.5px solid currentColor;border-radius:50%;background:none;color:inherit;font-family:var(--font-body);font-size:11px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .18s ease}
.info-btn:hover{opacity:1}
.slider-wrap { background:var(--surface); padding: 12px 16px; border-radius: 8px; border: 1px solid var(--br2); }
.slider-lbl { display:flex; justify-content:space-between; font-size:11px; font-family:var(--font-mono); color:var(--ink3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px; }
.slider-lbl .val { font-weight:700; color:var(--forest); }
.dual-range { position:relative; height:20px; width:100%; display:flex; align-items:center; }
.dual-track { position:absolute; width:100%; height:4px; background:var(--paper2); border-radius:4px; }
.dual-fill { position:absolute; height:4px; background:var(--forest); border-radius:4px; }
.dual-range input[type="range"] { position:absolute; width:100%; -webkit-appearance:none; background:transparent; pointer-events:none; top:50%; transform:translateY(-50%); margin:0; }
.dual-range input[type="range"]::-webkit-slider-thumb { pointer-events:auto; -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--surface); border:2.5px solid var(--forest); cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.15); }

.select-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.select-count{font-size:13px;color:var(--ink3)}
.select-count strong{color:var(--forest);font-weight:600}
.select-actions{display:flex;gap:5px}
.sel-action-btn{padding:5px 12px;border:1.5px solid var(--br2);border-radius:99px;background:var(--surface);font-size:11.5px;font-weight:500;cursor:pointer;color:var(--ink2);transition:all .15s ease;font-family:var(--font-body)}
.sel-action-btn:hover{background:var(--paper2)}

.bird-cards{display:flex;flex-direction:column;gap:9px;margin-bottom:2rem}
.bcard{display:flex;align-items:center;gap:13px;background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:12px 16px;cursor:pointer;transition:all .22s ease;user-select:none;box-shadow:var(--sh)}
.bcard:hover{border-color:var(--forest-lt);transform:translateY(-1px);box-shadow:var(--sh-hover)}
.bcard.sel{border:2px solid var(--forest);background:var(--forest-bg)}
.bcard.sel .bchk{background:var(--forest);border-color:var(--forest);color:var(--on-accent)}

.bthumb{width:54px;height:54px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--paper3);border:1.5px solid var(--br2)}
.bthumb-ph{width:54px;height:54px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,var(--forest-bg),var(--paper2));display:flex;align-items:center;justify-content:center;font-size:20px;border:1.5px solid var(--br2)}

.binfo{flex:1;min-width:0}
.bname{font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.bsci{font-size:11.5px;color:var(--ink3);font-style:italic;margin-top:2px}
.bmeta{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;align-items:center}
.btag{font-family:var(--font-mono);font-size:9px;padding:3px 8px;border-radius:99px;background:var(--paper2);color:var(--ink2);font-weight:500;letter-spacing:.02em}
.btag.has{background:var(--forest-bg);color:var(--forest)}
.btag.weak{background:var(--rust-bg);color:var(--rust);font-weight:600}
.btag.pack{background:var(--blue-bg);color:var(--blue)}
.bchk{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--br2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .2s;font-weight:600}
.bcard-edit{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--br2);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:all .2s;opacity:0}
.bcard:hover .bcard-edit{opacity:1}
.bcard-edit:hover{background:var(--paper2);border-color:var(--ink3)}

.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:1.8rem}
/* Vários campos de escrita (mistura): um por linha, com espaço entre eles */
.write-row + .write-row{margin-top:8px}
@media(min-width:480px){.mode-grid{grid-template-columns:repeat(4,1fr)}}
.mcard{border:1.5px solid var(--br);border-radius:var(--r);padding:16px 10px;text-align:center;cursor:pointer;background:var(--surface);transition:all .22s ease;position:relative;box-shadow:var(--sh)}
.mcard:hover{transform:translateY(-2px);box-shadow:var(--sh-hover);border-color:var(--forest-lt)}
.mcard.on{border:2px solid var(--forest);background:var(--forest-bg)}
.mcard-ico{font-size:24px;display:block;margin-bottom:8px}
.mcard-name{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mcard.on .mcard-name{color:var(--forest)}
.mcard-desc{font-size:10.5px;color:var(--ink3);margin-top:4px;line-height:1.4}
.mcard-hard{position:absolute;top:7px;right:7px;font-family:var(--font-mono);font-size:7.5px;background:var(--rust-bg);color:var(--rust);padding:2px 7px;border-radius:99px;font-weight:500;letter-spacing:.04em}
.mcard.disabled-mode{opacity:.4;pointer-events:none;filter:grayscale(1)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.8rem}
/* Medida única de pastilha em toda a app (a mais apertada, que era só a dos "Modos por
   sessão"): mesma altura e mesmo ar em Definições, filtros e pré-jogo. */
.chip{padding:6px 14px;border:1.5px solid var(--br);border-radius:99px;font-size:12.5px;cursor:pointer;background:var(--surface);color:var(--ink2);transition:all .2s ease;user-select:none;font-weight:500;box-shadow:var(--sh);font-family:var(--font-body)}
.chip:hover{background:var(--paper2);transform:translateY(-1px)}
.chip.on{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}

.btn-p{display:block;width:100%;padding:15px;text-align:center;background:var(--forest);color:var(--on-accent);border:none;border-radius:var(--r);font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;transition:all .22s ease;box-shadow:0 4px 16px rgba(30,92,58,0.2),0 1px 3px rgba(30,92,58,0.15);margin-top:2rem;letter-spacing:-.01em}
.btn-p:hover{background:var(--forest-lt);transform:translateY(-2px);box-shadow:0 8px 28px rgba(30,92,58,0.28)}
.btn-p:disabled{background:var(--paper3);color:var(--ink3);cursor:not-allowed;transform:none;box-shadow:none}
.btn-s{display:inline-block;padding:12px 20px;background:var(--paper2);color:var(--ink2);border:1.5px solid var(--br2);border-radius:var(--r);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .18s ease;text-align:center}
.btn-s:hover{background:var(--paper3);transform:translateY(-1px)}
.btn-s.danger{color:var(--rust);border-color:rgba(176,58,30,0.25)}
.btn-s.danger:hover{background:var(--rust-bg);border-color:var(--rust)}

/* Desafio Diário & Missão (Home) */
.daily-card{background:linear-gradient(135deg,var(--forest-bg) 0%,var(--teal-bg) 100%);border:1.5px solid rgba(30,92,58,0.2);border-radius:var(--r);padding:20px 22px;margin-bottom:1.2rem;box-shadow:var(--sh)}
.daily-card.done{opacity:.85}
.daily-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.daily-badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:var(--forest);color:var(--on-accent);padding:5px 12px;border-radius:99px;font-weight:600}
.daily-streak-pill{font-size:12px;font-weight:600;color:var(--gold);background:var(--gold-bg);padding:4px 12px;border-radius:99px;border:1px solid rgba(138,101,0,0.2)}
.daily-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--ink);margin-bottom:4px;letter-spacing:-.02em}
.daily-sub{font-size:13px;color:var(--ink2);margin-bottom:14px;line-height:1.5}
.daily-btn{margin:0;max-width:220px;padding:12px 20px}
.daily-done-badge{display:inline-block;font-size:12px;font-weight:600;color:var(--forest);background:var(--surface);padding:6px 14px;border-radius:99px;border:1px solid rgba(30,92,58,0.2)}
.weak-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--gold-bg);border:1.5px solid rgba(138,101,0,0.2);border-radius:var(--r);padding:16px 18px;margin-bottom:1.2rem;flex-wrap:wrap;box-shadow:var(--sh)}
.weak-banner-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:180px}
.weak-banner-text strong{font-size:14px;color:var(--gold)}
.weak-banner-text span{font-size:12.5px;color:var(--ink2)}
.mission-btn{margin:0;white-space:nowrap;background:var(--surface);border-color:rgba(138,101,0,0.25);color:var(--gold);font-weight:600}

/* Quiz imersivo (estilo jogo mobile) */
body.quiz-active .app{max-width:none;padding:0;margin:0}
#s-quiz.active{display:block;min-height:100dvh;background:var(--paper);animation:none;opacity:1}
.quiz-shell{display:flex;flex-direction:column;width:100%;max-width:780px;margin:0 auto;padding:0 1rem calc(2rem + env(safe-area-inset-bottom, 0px));padding-top:env(safe-area-inset-top, 0px);-webkit-overflow-scrolling:touch}
.quiz-topbar{display:flex;align-items:center;gap:10px;padding:12px 0 8px;flex-shrink:0}
.quiz-topbar-center{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.quiz-quit,.quiz-sfx{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--br2);background:var(--surface);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s ease;box-shadow:var(--sh);font-family:var(--font-body);color:var(--ink2);-webkit-tap-highlight-color:transparent}
.quiz-quit:hover,.quiz-sfx:hover{background:var(--paper2);transform:scale(1.05)}
.quiz-sfx.muted{opacity:.45}
.quiz-sfx.muted::after{content:'';position:absolute;width:2px;height:22px;background:var(--rust);transform:rotate(-45deg);border-radius:2px}
.quiz-sfx{position:relative}
.quiz-body{flex:1;display:flex;flex-direction:column;animation:qSlideIn .35s cubic-bezier(.2,.8,.4,1) forwards}
.quiz-body.leaving{animation:qSlideOut .22s ease forwards}
@keyframes qSlideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes qSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-14px)}}
.quiz-flash{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0;transition:opacity .12s ease}
.quiz-flash.correct-flash{background:radial-gradient(circle at center,rgba(79,84,51,0.18),transparent 70%)}
.quiz-flash.wrong-flash{background:radial-gradient(circle at center,rgba(176,58,30,0.14),transparent 70%)}
.quiz-flash.show{opacity:1}

/* HUD do Quiz */
.quiz-hud{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.hud-combo{font-family:var(--font-brand);font-size:13px;font-weight:600;color:var(--gold);background:var(--gold-bg);padding:5px 14px;border-radius:99px;border:1px solid rgba(138,101,0,0.2);transition:transform .15s ease}
.hud-combo.pop{animation:comboPop .35s cubic-bezier(.34,1.56,.64,1)}
.hud-combo.lost{animation:comboLost .4s ease;color:var(--rust);background:var(--rust-bg);border-color:rgba(176,58,30,0.2)}
@keyframes comboPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes comboLost{0%,100%{opacity:1}50%{opacity:.4}}
.hud-pts{font-family:var(--font-brand);font-size:12px;font-weight:500;color:var(--forest);background:var(--forest-bg2);padding:5px 14px;border-radius:99px;border:1px solid rgba(79,84,51,0.22)}
.hud-mode{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-left:auto}
.mission-bar{display:flex;align-items:center;gap:10px;background:var(--gold-bg);border:1.5px solid rgba(138,101,0,0.18);border-radius:var(--rsm);padding:10px 14px;margin-bottom:12px}
.mission-lbl{font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap}
.mission-dots{display:flex;gap:6px;flex:1}
.mission-dot{width:12px;height:12px;border-radius:50%;background:var(--paper3);border:2px solid var(--br2);transition:all .25s ease}
.mission-dot.half{background:var(--gold);border-color:var(--gold);opacity:.5}
.mission-dot.done{background:var(--forest);border-color:var(--forest)}
.mission-count{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--ink2)}

/* Interface de Quiz */
.qnum{font-family:var(--font-mono);font-size:11.5px;color:var(--ink2);white-space:nowrap;font-weight:500;text-align:center}
.prog-wrap{flex:1;height:5px;background:var(--paper3);border-radius:99px;overflow:hidden}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--forest),var(--forest-lt));border-radius:99px;transition:width .5s cubic-bezier(.34,1.56,.64,1)}
.qbadge{font-family:var(--font-brand);font-size:11px;letter-spacing:.02em;padding:5px 12px;border-radius:99px;background:var(--paper2);color:var(--ink2);white-space:nowrap;font-weight:500;border:1px solid var(--br2)}
.qbadge.review{background:var(--gold-bg);color:var(--gold);border-color:rgba(138,101,0,0.2)}

.big-photo{width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--paper2);margin-bottom:1.2rem;border:1.5px solid var(--br);position:relative;box-shadow:var(--sh)}
@media(min-width:480px){.big-photo{aspect-ratio:16/10;margin-bottom:1.5rem}}
.big-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.bp-badge{position:absolute;top:12px;left:12px;background:rgba(138,101,0,0.9);color:var(--on-accent);border-radius:99px;font-size:9.5px;font-family:var(--font-mono);font-weight:500;padding:5px 12px;backdrop-filter:blur(4px)}
.credit-btn{position:absolute;bottom:12px;right:12px;background:rgba(28,27,24,0.6);color:rgba(255,255,255,0.95);border:none;border-radius:99px;font-size:9.5px;padding:5px 12px;cursor:pointer;font-family:var(--font-mono);transition:all .2s ease;backdrop-filter:blur(6px)}
.credit-btn:hover{background:rgba(28,27,24,0.85)}


/* 🔍 Clicar na foto amplia-a. Sem botão nenhum por cima: o cursor e a moldura
   inteira são a pista, e no telemóvel toda a gente experimenta tocar na imagem. */
.ampliavel{cursor:zoom-in}
/* Enquanto a foto seguinte não chega, a anterior fica na frente e parece que o toque
   não pegou. Isto dá sinal de vida sem trocar a imagem por um vazio. */
.study-photo img.a-carregar{opacity:.45;transition:opacity .12s ease}

/* ↔ Setas de fotografia. Encostadas aos lados, discretas, e com uma área de toque
   de 44px — o mínimo que se acerta com o dedo sem apanhar a imagem por engano. */
.foto-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;background:rgba(28,27,24,0.4);color:rgba(255,255,255,0.92);
  font-size:20px;line-height:1;padding:0;cursor:pointer;opacity:.7;
  transition:opacity .2s ease,background .2s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.foto-seta:hover,.foto-seta:focus-visible{opacity:1;background:rgba(28,27,24,0.75)}
.foto-seta-esq{left:8px}
.foto-seta-dir{right:8px}
.foto-seta .ms-ico{width:22px;height:22px;vertical-align:middle}
@media(hover:none){.foto-seta{opacity:.8}}

.photo-grid{display:grid;gap:10px;margin-bottom:1.5rem}
.photo-opt{border:2px solid transparent;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .22s ease;background:var(--surface);box-shadow:var(--sh)}
.photo-opt:not([disabled]):hover{transform:translateY(-2px);box-shadow:var(--sh-hover);border-color:var(--forest-lt)}
.photo-opt img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 38%;display:block;pointer-events:none;border-bottom:1px solid var(--br);background:var(--paper2)}
.po-lbl{font-size:12.5px;font-weight:600;padding:10px 12px;min-height:36px;line-height:1.35;text-align:center;font-family:var(--font-body)}
.po-lbl .pn{visibility:hidden}
.photo-opt.correct .pn,.photo-opt.wrong .pn,.photo-opt[disabled] .pn{visibility:visible}
.photo-opt.correct{border:2px solid var(--forest);background:var(--forest-bg);animation:ansPop .4s cubic-bezier(.34,1.56,.64,1)}.photo-opt.correct .po-lbl{color:var(--forest)}
.photo-opt.wrong{border:2px solid var(--rust);background:var(--rust-bg);animation:ansShake .45s ease}.photo-opt.wrong .po-lbl{color:var(--rust)}
.photo-opt[disabled]:not(.correct):not(.wrong){opacity:.35;cursor:default}
.photo-opt{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

.text-opts{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:1.5rem}
@media(min-width:480px){.text-opts{grid-template-columns:1fr 1fr}}
.topt{padding:16px 18px;min-height:52px;border:1.5px solid var(--br2);border-radius:var(--r);font-size:15px;cursor:pointer;text-align:left;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-weight:500;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;line-height:1.4;box-shadow:var(--sh);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.topt:not([disabled]):hover{background:var(--paper2);border-color:var(--ink3);transform:translateY(-1px)}
.topt:not([disabled]):active{transform:scale(.98)}
.topt.correct{background:var(--forest-bg);border:2px solid var(--forest);color:var(--forest);font-weight:600;animation:ansPop .4s cubic-bezier(.34,1.56,.64,1)}
.topt.wrong{background:var(--rust-bg);border:2px solid var(--rust);color:var(--rust);font-weight:600;animation:ansShake .45s ease}
.topt[disabled]:not(.correct):not(.wrong){opacity:.35;cursor:default}
@keyframes ansPop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes ansShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.sound-card{background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:22px;margin-bottom:1.5rem;box-shadow:var(--sh)}
.sound-viz{display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin-bottom:18px;background:var(--paper);border-radius:var(--rsm);padding:10px}
.sv-bar{width:4px;border-radius:99px;background:var(--forest);height:5px;transition:height .15s ease}
.sv-bar.active{animation:wv var(--d,.5s) ease-in-out infinite alternate;background:var(--forest-lt)}
@keyframes wv{from{height:5px}to{height:var(--h,32px)}}
.sound-row{display:flex;align-items:center;gap:16px}
.play-btn{width:64px;height:64px;border-radius:50%;background:var(--forest);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .22s ease;box-shadow:0 6px 22px rgba(30,92,58,0.26);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.play-btn:hover{background:var(--forest-lt);transform:scale(1.07)}
.play-btn:active{transform:scale(.95)}
.play-btn.playing{animation:playPulse 1.2s ease infinite}
@keyframes playPulse{0%,100%{box-shadow:0 6px 22px rgba(30,92,58,0.26)}50%{box-shadow:0 6px 28px rgba(30,92,58,0.45),0 0 0 8px rgba(79,84,51,0.12)}}
.play-btn:disabled{background:var(--paper3);cursor:not-allowed;box-shadow:none;transform:none}
.play-btn svg{width:22px;height:22px;fill:var(--on-accent)}
.si-title{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.si-sub{font-size:12.5px;color:var(--ink3);margin-top:4px}
.mixer-pill{display:inline-block;font-family:var(--font-brand);font-size:9.5px;text-transform:uppercase;padding:5px 12px;border-radius:99px;background:var(--rust-bg);color:var(--rust);border:1px solid rgba(176,58,30,0.18);margin-bottom:12px;font-weight:500;letter-spacing:.06em}
#s-quiz .btn-p{margin-top:0.5rem;min-height:52px;font-size:16px;-webkit-tap-highlight-color:transparent}
#s-quiz .mixer-pill{font-size:10px}

.fact-box{background:var(--teal-bg);border:1.5px solid rgba(19,95,88,0.18);border-radius:var(--rsm);padding:14px 20px;font-size:13.5px;line-height:1.5;color:var(--teal);margin-bottom:1rem;display:none;animation:fi .25s ease}
.fact-box.show{display:block}
.fact-box > strong{font-weight:700;color:var(--ink);display:block;font-size:14.5px}
.fact-box .fb-hint{display:block;margin-top:6px;opacity:.85}
.fact-box .fb-hint strong{font-weight:600;color:var(--ink)}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.next-btn{width:100%;padding:17px;background:var(--forest);border:none;border-radius:var(--r);font-family:var(--font-body);font-size:16px;font-weight:600;cursor:pointer;color:var(--on-accent);transition:all .22s ease;display:none;margin-top:auto;text-align:center;box-shadow:0 4px 16px rgba(30,92,58,0.22);-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:52px}
.next-btn.show{display:block;animation:qSlideIn .3s ease}
.next-btn:hover{background:var(--forest-lt);transform:translateY(-1px)}
.next-btn:active{transform:scale(.98)}
.qlabel{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--ink);margin-bottom:1rem;letter-spacing:-.02em}
@media(min-width:480px){.qlabel{font-size:1.35rem;margin-bottom:1.2rem}}

/* Modais de Créditos */
.modal-backdrop{position:fixed;inset:0;background:rgba(28,27,24,0.45);backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}
.modal{background:var(--surface);border-radius:var(--r);padding:28px;max-width:460px;width:100%;box-shadow:0 24px 56px rgba(0,0,0,0.14);animation:slideUp .28s cubic-bezier(.34,1.56,.64,1);border:1.5px solid var(--br); max-height: 90vh; overflow-y:auto;}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.modal-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:16px;color:var(--ink)}
.credit-row{padding:12px 0; border-bottom:1px solid var(--br); margin-bottom:12px; font-size:13px}
.credit-row:last-child{border-bottom:none}
.cr-name{font-weight:600;color:var(--ink); font-size:14px; margin-bottom: 6px;}
.cr-details{display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; color: var(--ink2);}
.cr-badge{background:var(--forest-bg);color:var(--forest);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:bold;margin-left:6px;}
.modal-close{display:block;width:100%;padding:12px;background:var(--paper2);border:none;border-radius:var(--rsm);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;color:var(--ink2);margin-top:18px;transition:all .15s ease}
.modal-close:hover{background:var(--paper3)}

/* Resultados */
.res-hero{text-align:center;padding:3rem 0 1.8rem}
.res-score{font-family:var(--font-display);font-size:5.5rem;font-weight:700;color:var(--forest);line-height:1;letter-spacing:-.04em}
.res-denom{font-size:15px;color:var(--ink3);margin-top:8px;font-weight:500}
.res-msg{font-family:var(--font-display);font-size:1.45rem;font-style:italic;color:var(--ink);margin:1.1rem 0 .9rem}
.streak-pill{display:inline-block;background:var(--gold-bg);border:1.5px solid rgba(138,101,0,0.22);border-radius:99px;padding:6px 18px;font-size:13px;color:var(--gold);font-weight:600}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1.5rem 0 2.2rem}
.stat-card{background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:18px;text-align:center;box-shadow:var(--sh)}
.stat-val{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:var(--ink)}
.stat-lbl{font-family:var(--font-mono);font-size:9px;color:var(--ink3);margin-top:6px;letter-spacing:.12em;font-weight:500}
.weak-res-box{background:var(--gold-bg);border:1.5px solid rgba(138,101,0,0.18);border-radius:var(--r);padding:20px;margin:1.5rem 0;box-shadow:var(--sh)}
.rv-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--br);border-radius:var(--rsm);padding:10px 14px;margin-bottom:8px;box-shadow:var(--sh)}
.rv-row.ok{border-color:rgba(30,92,58,0.25);background:var(--forest-bg)}
.rv-row.bad{border-color:rgba(176,58,30,0.2);background:var(--rust-bg)}
.rv-ico{font-size:16px;flex-shrink:0;width:24px;text-align:center}
.rv-info{flex:1;min-width:0}
.rv-name{font-size:14px;font-weight:600;color:var(--ink)}
.rv-meta{font-size:11px;color:var(--ink3);margin-top:2px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.rv-pts{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--forest);flex-shrink:0}
.btn-row{display:flex;gap:12px;margin-top:2rem;flex-wrap:wrap}
.btn-row .btn-s{flex:1;text-align:center;margin:0;padding:15px}
.btn-row .btn-p{flex:2;margin:0}

/* Barra de Progresso */
.pb-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:14px 18px;margin-bottom:9px;box-shadow:var(--sh);transition:transform .15s ease}
.pb-row:hover{transform:translateX(3px)}
.pb-info{flex:1;min-width:0}.pb-name{font-size:14.5px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em;color:var(--ink)}
.pb-bw{height:5px;background:var(--paper2);border-radius:99px;overflow:hidden}
.pb-bf{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.pb-right{text-align:right;flex-shrink:0}
.pb-pct{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--ink)}

/* Formulário de Gestão */
.ab-card{background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:22px;margin-bottom:1.1rem;box-shadow:var(--sh)}
.ab-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:14px;color:var(--ink);letter-spacing:-.02em}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px;font-weight:500}
.field input, .field textarea, .field select{width:100%;padding:10px 13px;border:1.5px solid var(--br2);border-radius:var(--rsm);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper);outline:none;transition:all .2s ease}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--forest);background:var(--surface);box-shadow:0 0 0 3px rgba(30,92,58,0.1)}
.field textarea{resize:vertical;min-height:80px;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.drop-zone{border:2px dashed var(--br2);border-radius:var(--rsm);padding:22px;text-align:center;cursor:pointer;transition:all .2s ease;background:var(--paper);position:relative;overflow:hidden}
.drop-zone:hover, .drop-zone.dragover{border-color:var(--forest);background:var(--forest-bg)}
.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dz-ico{font-size:24px;display:block;margin-bottom:7px;opacity:.65}
.dz-txt{font-size:13px;color:var(--ink3);font-weight:500}.dz-txt strong{color:var(--forest)}
.dz-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink3);margin-top:5px;letter-spacing:.02em}

/* Abas de Línguas na Edição */
.lang-tabs { display:flex; gap:6px; margin-bottom:12px; border-bottom:1.5px solid var(--br); padding-bottom:8px; }
.lang-tab { padding:6px 14px; font-size:12px; font-weight:600; font-family:var(--font-body); border-radius:var(--rsm); cursor:pointer; background:var(--paper2); color:var(--ink3); transition:all 0.2s; border:1px solid transparent; }
.lang-tab.active { background:var(--blue-bg); color:var(--blue); border-color:rgba(26,62,106,0.15); }
.lang-section { display:none; animation:fadeIn 0.2s ease; }
.lang-section.active { display:block; }

/* 🎨 METADADOS DAS FOTOS/SONS */
.media-meta-card { display:flex; flex-direction: column; gap:14px; background:var(--surface); border:1.5px solid var(--br2); border-radius:10px; padding:18px; margin-bottom:14px; width: 100%; box-shadow: var(--sh); }
@media(min-width:480px){.media-meta-card { flex-direction: row; align-items:flex-start; }}
.meta-fields { display:flex; flex-direction:column; gap:6px; flex:1; width: 100%;}
.meta-fields input { padding:9px 12px; border:1px solid var(--br2); border-radius:6px; font-size:13px; font-family:var(--font-body); background: var(--paper); }
.meta-fields input:focus { border-color: var(--forest); background:var(--surface); outline:none; }

.meta-univ-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media(min-width:480px){ .meta-univ-row { grid-template-columns: 1fr 1fr; } }
.meta-univ-row input.full-w { grid-column: 1 / -1; }


.existing-media{display:flex; flex-direction:column; gap:12px; margin-bottom:14px}
.pack-select-wrap{display:flex;gap:10px;align-items:flex-end}
.pack-select-wrap .field{flex:1;margin:0}
.manage-list{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto;padding-right:4px}
.mrow{display:flex;align-items:center;gap:12px;background:var(--paper2);border:1.5px solid var(--br);border-radius:var(--rsm);padding:10px 14px}
.mrow-info{flex:1;min-width:0}
.mrow-name{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mrow-meta{font-size:10.5px;color:var(--ink3);font-family:var(--font-mono);margin-top:2px;letter-spacing:.02em}
.mrow-btns{display:flex;gap:6px}
.mrow-btn{padding:5px 12px;border:1.5px solid var(--br2);border-radius:99px;background:var(--surface);font-size:11px;cursor:pointer;font-family:var(--font-body);color:var(--ink2);transition:all .15s ease}
.mrow-btn:hover{background:var(--paper2)}
.mrow-btn.del { color: var(--rust); border-color: rgba(176,58,30,0.25); font-size: 13px; padding: 4px 10px; }
.mrow-btn.del:hover { background: var(--rust-bg); border-color: var(--rust); }

.empty-state{text-align:center;padding:3.5rem 1rem;color:var(--ink3)}
code.ic{font-family:var(--font-mono);font-size:12px;background:var(--forest-bg);padding:2px 7px;border-radius:5px;color:var(--forest);font-weight:500;border:1px solid rgba(30,92,58,0.15)}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:99px}
.no-results{text-align:center;padding:2rem;color:var(--ink3);font-size:14px}

.hab-grid { display:grid; grid-template-columns:1fr; gap:8px; background:var(--paper2); padding:12px 14px; border-radius:var(--rsm); border:1px solid var(--br2); }
@media(min-width:480px){.hab-grid { grid-template-columns:1fr 1fr; }}
.hab-lbl { font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:8px; cursor:pointer; }
.hab-lbl input { width:auto; cursor:pointer; }
/* ⏱️ Cronómetro no HUD do quiz */
.hud-time{font-family:var(--font-brand);font-size:12px;font-weight:500;color:var(--teal);background:var(--teal-bg);padding:5px 14px;border-radius:99px;font-variant-numeric:tabular-nums;border:1px solid rgba(19,95,88,0.2)}

/* 🏅 Medalhas e recordes (resultados) */
.stat-row-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:479px){.stat-row-4{grid-template-columns:repeat(2,1fr)}}
.res-medal{display:inline-flex;align-items:center;gap:8px;background:var(--gold-bg);border:1.5px solid rgba(138,101,0,0.25);border-radius:99px;padding:7px 20px;margin-bottom:14px;animation:medalPop .5s cubic-bezier(.34,1.56,.64,1)}
.medal-emoji{font-size:22px}
.medal-name{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
@keyframes medalPop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.record-line{text-align:center;font-size:13.5px;color:var(--ink2);background:var(--surface);border:1.5px solid var(--br);border-radius:var(--rsm);padding:12px 18px;margin:-1.2rem 0 2rem;box-shadow:var(--sh)}
.record-line.is-new{background:var(--gold-bg);border-color:rgba(138,101,0,0.3);color:var(--gold);font-weight:600;animation:medalPop .5s cubic-bezier(.34,1.56,.64,1)}
.record-line strong{color:var(--gold)}

/* 📖 Modo Estudo */
.start-row{display:flex;gap:12px;margin-top:2rem;align-items:stretch}
.start-row .study-btn{flex:1;margin:0;padding:15px;font-weight:600}
.start-row .btn-p{flex:2}
.study-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:.5rem 0 1.2rem}
.study-title{font-family:var(--font-display);font-size:1.8rem;font-weight:700;letter-spacing:-.02em}
.study-sub{font-size:13px;color:var(--ink3);margin-top:5px}
.study-counter{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--forest);background:var(--forest-bg);padding:6px 16px;border-radius:99px;white-space:nowrap}
.study-inner{background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);animation:fi .25s ease}
.study-photo{position:relative;width:100%;aspect-ratio:16/10;background:var(--paper2)}
.study-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.study-photo-empty{display:flex;align-items:center;justify-content:center;font-size:64px;cursor:default}
.study-photo-count{position:absolute;bottom:10px;right:10px;background:rgba(28,27,24,0.65);color:var(--on-accent);font-family:var(--font-mono);font-size:11px;padding:4px 12px;border-radius:99px}
.study-info{padding:18px 20px 20px}
.study-name-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.study-name{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.study-sci{font-style:italic;font-size:13.5px;color:var(--ink3);margin-top:2px}
.study-credits{padding:5px 12px;font-size:12px;margin:0;border-radius:99px}
.study-tech{font-family:var(--font-mono);font-size:12px;color:var(--ink2);margin-top:10px}
.study-sounds{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.study-snd-btn{padding:9px 18px;border:1.5px solid rgba(19,95,88,0.25);border-radius:99px;background:var(--teal-bg);color:var(--teal);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .18s ease}
.study-snd-btn:hover{transform:translateY(-1px)}
.study-snd-btn.playing{background:var(--teal);color:var(--on-accent);border-color:var(--teal)}
.study-hint{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--teal);background:var(--teal-bg);border:1.5px solid rgba(19,95,88,0.15);border-radius:var(--rsm);padding:10px 14px}
.study-hint strong{color:var(--ink);font-weight:600}
.study-nav{display:flex;gap:12px;margin-top:1.2rem;align-items:stretch}
/* Uma metade da linha para cada seta: com o botão do quiz fora, não havia razão
   para ficarem dois quadrados de 64px e um vazio enorme no meio. */
.study-nav-btn{flex:1;margin:0;font-size:18px;font-weight:700;padding:14px 0}

/* 🏠 Hub da home (estilo Seterra) */
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.2rem}
.hub-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:20px 18px 18px;cursor:pointer;font-family:var(--font-body);text-align:left;box-shadow:var(--sh);transition:all .22s ease;-webkit-tap-highlight-color:transparent}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:rgba(79,84,51,0.35)}
.hub-card:active{transform:scale(.98)}
.hub-card.hub-play{background:var(--forest);border-color:var(--forest)}
.hub-card.hub-play .hub-name{color:var(--on-accent)}
.hub-card.hub-play .hub-sub{color:rgba(255,255,255,0.75)}
.hub-card.disabled{opacity:.55;cursor:default}
.hub-card.disabled:hover{transform:none;box-shadow:var(--sh)}
.hub-ico{font-size:30px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 2px 6px rgba(28,27,24,0.12))}
.hub-name{font-family:var(--font-display);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.hub-sub{font-size:12px;color:var(--ink3);font-weight:500}
.hub-bar{display:block;width:100%;height:5px;background:var(--paper2);border-radius:99px;margin-top:10px;overflow:hidden}
.hub-bar-fill{display:block;height:100%;width:0%;background:var(--forest);border-radius:99px;transition:width .5s ease}

/* Hero mais compacto (a home agora é um hub, não uma landing page) */
.hero{padding:2rem 0 1.4rem}
.hero h1{font-size:2.3rem}
.hero p{display:none}
@media(min-width:480px){.hero p{display:block;font-size:13.5px}}

/* 🚀 Splash de arranque */
#boot-splash{position:fixed;inset:0;z-index:999;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .4s ease}
#boot-splash.hide{opacity:0;pointer-events:none}
.boot-logo{font-size:56px;line-height:1;animation:bootFloat 1.6s ease-in-out infinite}
.boot-name{font-family:var(--font-logo);font-size:1.6rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.boot-name em{font-style:normal;color:var(--forest);font-weight:700}
.boot-spinner{width:26px;height:26px;border:3px solid var(--paper3);border-top-color:var(--forest);border-radius:50%;animation:bootSpin .8s linear infinite}
@keyframes bootSpin{to{transform:rotate(360deg)}}
@keyframes bootFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 🗂️ Grupos de Aves (cartões de categoria estilo Seterra) */
.cat-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.adv-toggle{margin:0;padding:11px 16px;font-size:13px;white-space:nowrap}
.adv-toggle.on{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-bottom:.5rem}
@media(min-width:600px){.cat-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}}
.cat-card{background:var(--surface);border:2px solid var(--br);border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--sh);transition:all .2s ease;-webkit-tap-highlight-color:transparent}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.cat-card:active{transform:scale(.98)}
.cat-card.on{border-color:var(--forest);box-shadow:0 0 0 3px rgba(79,84,51,0.15),var(--sh)}
.cat-photo{position:relative;aspect-ratio:16/11;background:var(--forest-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cat-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.cat-emoji{font-size:44px}
.cat-check{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--forest);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,0.25)}
.cat-body{padding:10px 12px 12px}
.cat-name{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.cat-sub{font-size:11px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-count{font-family:var(--font-mono);font-size:10px;color:var(--forest);margin-top:5px;letter-spacing:.04em;text-transform:uppercase}
.cat-btn{display:block;margin-top:9px;padding:7px 10px;border:1.5px solid var(--br2);border-radius:99px;background:var(--paper2);color:var(--ink2);font-size:12px;font-weight:600;text-align:center;transition:all .18s ease}
.cat-btn.on{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.cat-btn.edit{background:var(--blue-bg);color:var(--blue);border-color:rgba(26,62,106,0.2)}

/* Barra inferior compacta do setup */
.setup-bottom{border-top:1.5px solid var(--br);margin-top:1.6rem;padding-top:.3rem}
.setup-bottom .mode-grid{grid-template-columns:repeat(4,1fr);gap:8px}
.setup-bottom .mcard{padding:12px 6px 10px}
.setup-bottom .mcard-ico{font-size:20px;margin-bottom:4px}
.setup-bottom .mcard-name{font-size:12.5px}
.setup-bottom .mcard-desc{display:none}
.opt-row{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.opt-col{flex:1;min-width:220px}
#adv-panel{background:var(--paper2);border:1.5px solid var(--br2);border-radius:var(--r);padding:16px;margin-bottom:1rem}

/* 🌐 Dropdown de língua (preparado para mais idiomas) */
.lang-select{padding:7px 12px;border:1.5px solid var(--br2);border-radius:99px;background:var(--surface);font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;outline:none;box-shadow:var(--sh);transition:all .18s ease;-webkit-appearance:none;appearance:none}
.lang-select:hover{background:var(--paper2)}
.lang-select:focus{border-color:var(--forest)}

/* 🏠 Home minimalista (estilo Seterra mobile) */
#s-home{position:relative}
#s-home.active{display:flex;flex-direction:column;min-height:92vh}
/* No body, não em #s-home::before: .screen tem animation-fill-mode:forwards que deixa um
   transform residual, o que faria um position:fixed filho ficar preso no padding da .app */
body.has-bg{background:var(--paper) url('home-bg.jpg') center/cover no-repeat fixed}
.menu-btn{position:absolute;top:2.4rem;right:10px;background:rgba(255,255,255,0.85);border:1.5px solid var(--br2);border-radius:12px;font-size:23px;padding:9px 16px;cursor:pointer;color:var(--ink);box-shadow:var(--sh);z-index:5;transition:all .18s ease}
.menu-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-hover)}
.home-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;padding:3rem 0 6rem}
.home-logo{font-family:var(--font-logo);font-size:3.4rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1;text-shadow:0 2px 12px rgba(247,245,240,0.8)}
.home-logo em{font-style:normal;color:var(--forest)}
/* Medida pela largura (e não pela altura): o wordmark é largo e baixo, e é a
   largura que o faz ler como logótipo de abertura em vez de cabeçalho. */
.home-brand{width:min(100%,450px);height:auto;object-fit:contain;margin-bottom:3rem;filter:drop-shadow(0 1px 6px rgba(247,245,240,0.9))}
/* Os blocos da home esticam à largura da hero para as ações poderem ser medidas
   em percentagem — com o fit-content do flex a percentagem não tinha referência. */
.home-hero>div{align-self:stretch}
/* Coluna com os filhos esticados: assim o "Banco de aves" fica exatamente com a
   mesma largura do "Jogar", sem medidas fixas. */
.home-actions{display:flex;flex-direction:column;align-items:stretch;gap:20px;width:min(91%,400px);margin:0 auto}
.home-play{background:var(--forest);color:var(--on-accent);border:none;border-radius:20px;font-family:var(--font-brand);font-size:clamp(1.7rem,8.6vw,2.3rem);font-weight:700;line-height:1.15;padding:.95em 1rem;cursor:pointer;box-shadow:0 8px 28px rgba(79,84,51,0.35);transition:all .2s ease;-webkit-tap-highlight-color:transparent}
.home-play:hover{transform:translateY(-2px);background:var(--forest-lt)}
.home-play:active{transform:scale(.97)}
.home-bank{background:rgba(255,255,255,0.88);color:var(--ink2);border:1.5px solid var(--br2);border-radius:99px;font-family:var(--font-body);font-size:clamp(15px,4.3vw,17px);font-weight:600;padding:1.05em 1rem;cursor:pointer;box-shadow:var(--sh);transition:all .18s ease}
.home-bank:hover{background:var(--surface);transform:translateY(-1px)}

/* 🍔 Menu lateral */
.side-menu{position:fixed;inset:0;z-index:200}
.side-backdrop{position:absolute;inset:0;background:rgba(28,27,24,0.4);backdrop-filter:blur(3px);animation:fadeIn .2s ease}
.side-panel{position:absolute;top:0;left:0;bottom:0;width:min(78%,320px);background:var(--forest);padding:2.2rem 1.6rem;display:flex;flex-direction:column;gap:6px;animation:slideRight .25s cubic-bezier(.2,.8,.4,1);box-shadow:8px 0 40px rgba(0,0,0,0.3)}
@keyframes slideRight{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.side-logo{font-size:2rem;color:var(--on-accent);margin-bottom:2rem;text-shadow:none}
.side-logo em{color:var(--gold-bg)}
.side-item{display:flex;align-items:center;gap:12px;background:none;border:none;color:var(--on-accent);font-family:var(--font-body);font-size:16px;font-weight:600;padding:14px 10px;cursor:pointer;text-align:left;border-radius:var(--rsm);transition:background .15s ease;border-bottom:1px solid rgba(255,255,255,0.12)}
.side-item:hover{background:rgba(255,255,255,0.1)}
.side-lang{cursor:default}
.side-lang .lang-select{background:rgba(255,255,255,0.15);color:var(--on-accent);border-color:rgba(255,255,255,0.3)}
.side-lang .lang-select option{color:var(--ink)}

/* 📋 Lista de quizzes */
#quiz-list{margin-bottom:1.5rem}
.qz-row{display:flex;align-items:center;gap:13px;background:var(--surface);border:1.5px solid var(--br);border-radius:var(--r);padding:11px 14px;margin-bottom:9px;cursor:pointer;box-shadow:var(--sh);transition:all .18s ease;-webkit-tap-highlight-color:transparent}
.qz-row:hover{transform:translateX(3px);box-shadow:var(--sh-hover);border-color:rgba(79,84,51,0.3)}
.qz-row:active{transform:scale(.99)}
.qz-thumb{width:54px;height:54px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--forest-bg);display:flex;align-items:center;justify-content:center;font-size:26px}
.qz-thumb img{width:100%;height:100%;object-fit:cover}
/* Título de página (estava em estilo inline, o que impedia as skins de o alterar) */
.page-title{font-family:var(--font-body);font-size:1.6rem;font-weight:800;letter-spacing:-.01em}
/* Voltar: só uma seta no canto superior esquerdo, como o ✕ do jogo (nas duas skins) */
.back-btn{order:-1;width:40px;height:40px;padding:0;border-radius:50%;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
.back-btn:hover{transform:scale(1.05)}
.qz-info{flex:1;min-width:0}
.qz-name{font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qz-meta{font-size:11.5px;color:var(--ink3);margin-top:2px}
.qz-prog{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;min-width:56px}
.qz-pct{font-family:var(--font-mono);font-size:14px;font-weight:600}
.qz-pct.zero{color:var(--ink3);opacity:.55;font-weight:400}
.qz-bar{width:56px;height:5px;background:var(--paper2);border-radius:99px;overflow:hidden}
.qz-bar-fill{height:100%;border-radius:99px;transition:width .4s ease}
.qz-chev{color:var(--ink3);font-size:20px;flex-shrink:0;opacity:.5}
.qz-special{background:var(--gold-bg);border-color:rgba(138,101,0,0.15)}

/* 🎯 Pré-jogo */
.pg-head{display:flex;align-items:center;gap:16px;padding:.4rem 0 1.2rem}
.pg-thumb{width:74px;height:74px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--forest-bg);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:var(--sh)}
.pg-thumb img{width:100%;height:100%;object-fit:cover}
.pg-title{font-family:var(--font-body);font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.pg-count{font-family:var(--font-mono);font-size:12px;color:var(--forest);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.pg-birds-wrap{margin-bottom:.4rem}
.pg-birds{display:flex;flex-wrap:wrap;gap:7px}
.pg-bird-chip{background:var(--surface);border:1.5px solid var(--br2);border-radius:99px;padding:5px 13px;font-size:12.5px;color:var(--ink2);font-weight:500}
.pg-expand{background:none;border:none;color:var(--forest);font-size:12.5px;font-weight:600;cursor:pointer;padding:8px 4px;font-family:var(--font-body)}
.pg-expand:hover{text-decoration:underline}
.pg-rec{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--br);border-radius:var(--rsm);padding:10px 16px;margin-bottom:7px;font-size:13.5px;color:var(--ink2);box-shadow:var(--sh)}
.pg-rec strong{font-size:15px}
.pg-rec-medal{font-size:17px}
.pg-rec-date{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink3)}
.pg-rec.empty{color:var(--ink3);font-style:italic;justify-content:center}
.pg-modes{grid-template-columns:repeat(4,1fr);gap:8px}
.pg-modes .mcard{padding:12px 6px 10px}
.pg-modes .mcard-ico{font-size:20px;margin-bottom:4px}
.pg-modes .mcard-name{font-size:12.5px}
.pg-modes .mcard-desc{display:none}
.pg-more{margin-top:1.4rem;background:var(--paper2);border:1.5px solid var(--br2);border-radius:var(--rsm);padding:12px 16px}
.pg-more summary{font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer}
.pg-more .slbl{margin-top:.8rem}

/* Menu lateral: secções e ajustes */
.side-slbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin:1.2rem 0 .3rem;font-weight:500}
.qz-back{background:var(--paper2);border-style:dashed}
.qz-back .qz-thumb{background:transparent;font-size:20px;color:var(--ink2)}
.qz-del{background:none;border:none;font-size:15px;cursor:pointer;padding:6px;opacity:.5;flex-shrink:0;transition:opacity .15s ease}
.qz-del:hover{opacity:1}

/* ✍️ Modo Escrever */
.write-row{display:flex;gap:10px;align-items:stretch}
.write-input{flex:1;min-width:0;padding:15px 18px;border:2px solid var(--br2);border-radius:var(--r);font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--surface);outline:none;transition:all .2s ease;box-shadow:var(--sh)}
@media(max-width:420px){.write-row{flex-direction:column}.write-check{width:100%}}
.write-input:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(79,84,51,0.12)}
.write-input.correct{border-color:var(--forest);background:var(--forest-bg);color:var(--forest);font-weight:600}
.write-input.wrong{border-color:var(--rust);background:var(--rust-bg);color:var(--rust);font-weight:600}
.write-check{margin:0;flex:0 0 auto;width:auto;padding:15px 26px;font-size:15px}
.write-check[disabled]{opacity:.5;cursor:default}

/* 5 modos no pré-jogo */
.pg-modes{grid-template-columns:repeat(3,1fr)}
@media(min-width:480px){.pg-modes{grid-template-columns:repeat(5,1fr)}}

/* 🔢 Números de destaque (streaks, percentagens) na fonte da marca, para uniformizar com "Birdquiz" */
.brand-num{font-family:var(--font-brand);font-weight:700}

/* 🔎 Pesquisa de multimédia online (iNaturalist / Wikimedia Commons / xeno-canto) */
.ab-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.ab-card-head h3{margin-bottom:0}
.media-search-btn{margin:0;padding:8px 16px;font-size:12.5px;flex-shrink:0;white-space:nowrap}
.ms-src-tag{display:inline-block;font-family:var(--font-mono);font-size:9px;background:var(--blue-bg);color:var(--blue);padding:3px 9px;border-radius:99px;margin-bottom:8px;letter-spacing:.03em}
.ms-modal{max-width:640px}
.ms-sub{font-size:12.5px;color:var(--ink3);margin:-8px 0 14px;line-height:1.5}
.ms-status{min-height:0}
.ms-loading{text-align:center;padding:2rem 1rem;color:var(--ink3);font-size:13.5px}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:50vh;overflow-y:auto;padding:2px}
.ms-card{border:2px solid var(--br);border-radius:var(--rsm);overflow:hidden;cursor:pointer;background:var(--surface);transition:all .15s ease;-webkit-tap-highlight-color:transparent}
.ms-card:hover{border-color:rgba(79,84,51,0.3);transform:translateY(-1px)}
.ms-card.sel{border-color:var(--forest);box-shadow:0 0 0 3px rgba(79,84,51,0.15)}
.ms-thumb{position:relative;aspect-ratio:1/1;background:var(--forest-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ms-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ms-thumb-ico{font-size:28px;opacity:.6}
.ms-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1.5px solid var(--br2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--forest)}
.ms-card.sel .ms-check{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.ms-meta{padding:7px 8px 9px;display:flex;flex-direction:column;gap:2px}
.ms-src{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--forest)}
.ms-credit{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.ms-lic{font-size:10px;color:var(--ink3)}
.ms-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--br)}
.ms-footer span{font-size:12.5px;color:var(--ink2);font-weight:600}

/* Interruptor "incluir não-comercial" e pré-escuta de áudio na pesquisa online */
.ms-nc-toggle{display:flex;align-items:center;gap:10px;background:var(--paper2);border:1.5px solid var(--br2);border-radius:var(--rsm);padding:11px 14px;margin-bottom:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ms-nc-toggle input{width:17px;height:17px;flex-shrink:0;accent-color:var(--forest);cursor:pointer}
.ms-nc-toggle span{display:flex;flex-direction:column;gap:2px}
.ms-nc-toggle strong{font-size:13px;color:var(--ink);font-weight:600}
.ms-nc-hint{font-size:11.5px;color:var(--ink3);line-height:1.45}
.ms-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(28,27,24,0.62);color:var(--on-accent);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);transition:background .15s ease;padding-left:2px}
.ms-play:hover{background:rgba(28,27,24,0.8)}

/* Botão exportar pacote (.zip) no Banco de Aves */
.pack-export{flex-shrink:0;padding:8px 14px;border:1.5px solid var(--br2);border-radius:99px;background:var(--forest-bg);color:var(--forest);font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s ease;white-space:nowrap}
.pack-export:hover{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}

/* Contagem do inventário de aves */
.mrow-count{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--forest);background:var(--forest-bg);padding:4px 12px;border-radius:99px;white-space:nowrap}

/* Marcador "sem media" e botão auto no inventário */
.mrow.is-nomedia{border-left:3px solid var(--gold)}
.mrow-nomedia{font-size:12px;color:var(--gold);opacity:.75;vertical-align:middle;cursor:default;line-height:1}
.mrow-mediacount{font-family:var(--font-mono);font-size:10px;color:var(--ink3);vertical-align:middle;white-space:nowrap}


/* Metadados de media: listas de Idade/Sexo/Tipo (substituíram texto livre bilingue) */
.meta-sel-row{display:flex;gap:10px;flex-wrap:wrap;width:100%}
.meta-sel-row label{display:flex;flex-direction:column;gap:3px;flex:1;min-width:110px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.meta-fields select{padding:9px 12px;border:1px solid var(--br2);border-radius:6px;font-family:var(--font-body);font-size:13px;color:var(--ink);background:var(--paper);outline:none;cursor:pointer;width:100%}
.meta-fields select:focus{border-color:var(--forest)}

/* Miniatura clicável + lightbox para ver a foto em grande ao editar */
.media-thumb-zoom{width:70px;height:70px;border-radius:6px;object-fit:cover;cursor:zoom-in;transition:transform .15s ease,box-shadow .15s ease}
.media-thumb-zoom:hover{transform:scale(1.06);box-shadow:var(--sh-hover)}
.zoom-overlay{position:fixed;inset:0;z-index:400;background:rgba(28,27,24,0.88);display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.zoom-overlay.show{display:flex;animation:fadeIn .18s ease}
.zoom-overlay img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.5)}
.zoom-close{position:fixed;top:18px;right:20px;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:var(--ink);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ✕ Remover media ainda não gravada (importada ou arrastada por engano) */
.media-thumb-wrap{position:relative;flex-shrink:0;width:70px;height:70px}
.media-remove{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--surface);background:var(--rust);color:var(--on-accent);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 6px rgba(28,27,24,.28);transition:transform .15s ease,background .15s ease;z-index:2}
.media-remove:hover{transform:scale(1.15);background:var(--rust-dk)}

/* 📈 Conclusão por modo de jogo (mostrada por baixo de cada modo no pré-jogo) */
.mcard-prog{margin-top:7px;display:flex;flex-direction:column;align-items:center;gap:6px}
.mcard-prog .brand-num{font-size:11px;line-height:1}
.mcard-prog-bar{display:block;width:58%;height:3px;border-radius:99px;background:var(--paper3);overflow:hidden}
.mcard-prog-bar > span{display:block;height:100%;border-radius:99px}
.pg-rec-mode{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem}

/* Cabeçalho dos modos: um modo (default) ou vários */
.pg-modes-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:1.8rem 0 .5rem}
.pg-modes-hdr .slbl{margin:0}
/* Sem o margin:0, que deixava esta secao colada a seguinte: 13px de intervalo contra
   os 28px das outras duas. So o gap entre pastilhas e que e mais apertado. */
.chips.modepick{gap:6px}
.start-row-3 .btn-p{flex:2}
.start-row .study-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media(max-width:420px){.start-row-3{flex-wrap:wrap}.start-row-3 .study-btn{flex:1 1 45%}.start-row-3 .btn-p{flex:1 1 100%}}

/* ✍️ Sugestões de nomes no modo escrever */
.write-ac{position:relative;flex:1;min-width:0;display:flex}
.write-ac .write-input{width:100%}
.write-sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1.5px solid var(--br);border-radius:var(--rsm);box-shadow:0 10px 30px rgba(28,27,24,.14);z-index:20;overflow:hidden;max-height:15rem;overflow-y:auto}
.write-sugg-item{padding:11px 16px;font-size:14px;color:var(--ink2);cursor:pointer;border-bottom:1px solid var(--br)}
.write-sugg-item:last-child{border-bottom:none}
.write-sugg-item:hover,.write-sugg-item.on{background:var(--forest-bg);color:var(--forest);font-weight:600}

/* 🧭 Modo guiado: dica visual/sonora sempre à vista */
.guided-hint{background:var(--gold-bg,var(--paper2));border:1.5px dashed var(--br2);border-radius:var(--rsm);padding:12px 16px;margin-bottom:1rem;animation:fi .25s ease}
.guided-hint-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.guided-hint-txt{font-size:13.5px;line-height:1.55;color:var(--ink2)}

/* 🔗 Importar da Macaulay Library colando o link — recolhido atrás do "+" no cabeçalho */
.ab-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ml-toggle{margin:0;width:34px;height:34px;padding:0;border-radius:var(--rsm);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ml-toggle.on{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.ml-paste[hidden]{display:none}
.ml-paste{background:var(--paper2);border:1.5px solid var(--br2);border-radius:var(--rsm);padding:12px 14px;margin-bottom:12px}
.ml-paste-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.ml-paste-row{display:flex;gap:8px;align-items:stretch}
.ml-paste-row input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--br);border-radius:var(--rsm);font-family:var(--font-body);font-size:13px;background:var(--surface);color:var(--ink);outline:none}
.ml-paste-row input:focus{border-color:var(--forest)}
.ml-paste-row .btn-s{margin:0;flex:0 0 auto;padding:10px 16px;font-size:13px}
.ml-paste-note{font-size:11.5px;color:var(--ink3);margin-top:8px;line-height:1.45}

/* Confirmação de importação: o resumo do que vai acontecer, antes de acontecer */
.imp-summary{margin-bottom:16px}
.imp-pack{font-size:1rem;color:var(--ink);margin-bottom:2px}
.imp-ver{font-size:12px;color:var(--ink3)}
.imp-dest{font-size:13px;color:var(--ink2);margin-bottom:12px}
.imp-line{font-size:13px;color:var(--ink2);padding:8px 12px;border-radius:var(--rsm);background:var(--paper2);margin-bottom:6px}
.imp-line.ok{background:var(--forest-bg);color:var(--ink)}
.imp-line.dup{background:var(--paper3)}
.imp-line span{display:block;font-size:12px;color:var(--ink3);margin-top:3px}
.imp-q{font-size:13px;font-weight:600;color:var(--ink);margin:14px 0 8px}
.imp-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--br2);border-radius:var(--rsm);margin-bottom:8px;cursor:pointer;transition:all .15s ease}
.imp-opt:hover{background:var(--paper2)}
.imp-opt input{margin-top:3px;flex:none}
.imp-opt strong{display:block;font-size:13px;color:var(--ink)}
.imp-opt em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:2px}
.imp-opt:has(input:checked){border-color:var(--forest);background:var(--forest-bg)}
.pack-acts{display:flex;gap:6px;align-items:center}
.inv-counts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mrow-count.nomedia{color:var(--gold);background:var(--gold-bg)}

/* ==========================================
   📍 SÍTIOS — região activa
   ========================================== */
/* A pastilha vive no topo da lista de quizzes: de onde são estas aves tem de
   estar à vista sem abrir menu nenhum. */
.sit-chip{
  display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;
  padding:10px 14px;background:var(--surface);border:1px solid var(--br2);
  border-radius:var(--r);box-shadow:var(--sh);cursor:pointer;text-align:left;
  font-family:var(--font-body);color:var(--ink);
}
.sit-chip:hover{border-color:var(--forest)}
.sit-chip-ico{font-size:18px;line-height:1}
.sit-chip-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.sit-chip-lbl{font-size:11px;color:var(--ink3);letter-spacing:.02em}
.sit-chip-nome{font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sit-chip-seta{color:var(--ink3);font-size:13px}

.sit-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.sit-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--br2);border-radius:var(--r);
}
.sit-row:hover{border-color:var(--forest)}
.sit-row.on{border-color:var(--forest);background:var(--forest-bg)}
.sit-marca{color:var(--forest);font-size:15px;line-height:1}
.sit-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sit-txt strong{font-size:15px;font-weight:600;color:var(--ink)}
.sit-sub{font-size:12px;color:var(--ink2)}
.sit-cont{font-size:12px;color:var(--forest);font-weight:600}
.sit-data{font-size:11px;color:var(--ink3)}
.sit-acoes{display:flex;gap:4px}
.sit-btn{
  background:none;border:1px solid var(--br2);border-radius:var(--rsm);
  padding:5px 7px;cursor:pointer;font-size:13px;color:var(--ink2);line-height:1;
}
.sit-btn:hover{border-color:var(--forest);color:var(--forest)}
.sit-btn.del:hover{border-color:var(--rust);color:var(--rust)}

.sit-aviso{
  font-size:13px;color:var(--gold);background:var(--gold-bg);
  border:1px solid var(--br2);border-radius:var(--rsm);
  padding:10px 12px;margin:0 0 14px;
}

.sit-form{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.sit-modos{display:flex;gap:18px;font-size:14px;color:var(--ink)}
.sit-modos label{display:flex;align-items:center;gap:6px;cursor:pointer}
.sit-geo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sit-coords{font-family:var(--font-mono);font-size:12px;color:var(--ink2)}
.sit-nota{font-size:12px;color:var(--ink3);margin:8px 0 0}
.sit-msg{font-size:13px;color:var(--ink2);margin:0;min-height:1.2em}
.sit-msg.erro{color:var(--rust)}
.sit-passo-t{font-family:var(--font-brand);font-size:16px;font-weight:600;color:var(--ink);margin:0 0 6px}
.sit-passo-p{font-size:13px;color:var(--ink2);margin:0 0 12px;line-height:1.5}
.sit-passos{margin:0 0 16px;padding-left:20px;font-size:13px;color:var(--ink2);line-height:1.9}
.sit-passos a{color:var(--forest);font-weight:600}
.sit-trocar-chave{
  display:block;margin:2px auto 0;background:none;border:none;padding:4px;
  font-family:var(--font-body);font-size:12.5px;color:var(--ink3);
  text-decoration:underline;cursor:pointer;
}
.sit-trocar-chave:hover{color:var(--forest)}

/* Os passos do formulário são colunas com gap próprio: sem isto as margens soltas
   do .field e do .btn-row abriam um buraco entre o nome do sítio e os botões. */
#sit-passo-chave, #sit-passo-resto{display:flex;flex-direction:column;gap:12px}
.sit-form .field{margin-bottom:0}
.sit-form .btn-row{margin-top:4px}
.sit-msg{min-height:0}
.sit-msg:empty{display:none}
.wipe-wrap{display:inline-flex;align-items:center;gap:7px;color:var(--rust)}

/* 🔒 Ecrã de privacidade */
.priv-corpo{max-width:70ch;padding-bottom:2.5rem}
.priv-h{font-family:var(--font-brand);font-size:15px;font-weight:600;color:var(--ink);
        margin:1.6rem 0 .4rem}
.priv-h:first-child{margin-top:0}
.priv-p{font-size:14px;line-height:1.65;color:var(--ink2);margin:0}
.priv-p b{color:var(--ink);font-weight:600}

/* Contadores do Banco que filtram ao ser clicados */
.mrow-count.filtro{border:1px solid transparent;cursor:pointer;font-family:var(--font-mono);
  font-size:12px;font-weight:600;color:var(--ink2);background:var(--paper2);
  padding:4px 12px;border-radius:99px;white-space:nowrap}
.mrow-count.filtro:hover{border-color:var(--forest);color:var(--forest)}
.mrow-count.filtro.nomedia{color:var(--gold);background:var(--gold-bg)}
.mrow-count.filtro.on{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.cr-alterado{color:var(--ink3);font-size:10.5px;font-style:italic}
a.cr-badge{text-decoration:none}
a.cr-badge:hover{text-decoration:underline}

/* O logo do topo leva à home */
.topnav .brand-img,.topnav .brand-word{cursor:pointer}

/* Fase 1 do Aprender: cada cartão traz a sua própria dica por baixo do nome */
.gd-card-desc{font-size:12.5px;line-height:1.45;color:var(--ink2);font-weight:400;
  text-align:left;display:block;margin-top:2px}
.gd-cards.com-dica .gd-card{padding-top:12px;padding-bottom:12px}
.gd-card.gd-card-dica.certo .gd-card-desc,
.gd-card.gd-card-dica.errado .gd-card-desc{color:inherit;opacity:.85}

/* 🔁 Rever hoje — revisão espaçada, à cabeça do Aprender */
.ap-rev-btn{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 1.2rem;
  padding:13px 16px;background:var(--gold-bg);border:1.5px solid var(--gold);
  border-radius:var(--r);cursor:pointer;text-align:left;font-family:var(--font-body);color:var(--ink)}
.ap-rev-btn:hover{border-color:var(--gold);box-shadow:var(--sh)}
.ap-rev-ico{font-size:20px;line-height:1}
.ap-rev-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.ap-rev-nome{font-size:15px;font-weight:600;color:var(--gold)}
.ap-rev-sub{font-size:12px;color:var(--ink2);margin-top:1px}
.ap-rev-n{font-size:18px;font-weight:700;color:var(--gold)}