/* ============================================================
   MUSIKAI — camada compartilhada pelas QUATRO páginas
   (mural, afinador, percepção, aulagame)

   Só componentes NOVOS + ajustes da tab bar de 4 itens. Toda a
   paleta vem das variáveis já definidas em cada página
   (--panel, --ink, --phosphor, --hue-s/--hue-l, --on-hue …),
   por isso este arquivo funciona nos dois temas sem cópia de cor.
   Carregado DEPOIS do <style> inline: pode sobrepor a tab bar.
   ============================================================ */

/* ---------- tab bar com 4 itens ----------
   em 360px cada item tem 90px: rótulo menor e padding curto para
   "PERCEPÇÃO" caber sem quebrar. Altura de toque continua >=44px. */
.tabbar a{padding:8px 3px}
@media (max-width:430px){
  .tabbar a{font-size:9.5px;letter-spacing:.04em;padding:8px 2px;gap:2px}
  .tabbar a svg{width:21px;height:21px}
  body.hivis .tabbar a{font-size:11px;letter-spacing:.01em}
  body.hivis .tabbar a svg{width:24px;height:24px}
}
@media (max-width:330px){
  .tabbar a{font-size:9px;letter-spacing:0}
}

/* ============================================================
   MODO A+ (alta visibilidade) — das QUATRO páginas
   O botão nasceu no aulagame; aqui ele vira camada comum. Regras
   escritas para NÃO regredir o aulagame: onde o seletor coincide
   com o que ele já tinha no <style> inline (este arquivo carrega
   depois e venceria por ordem), os valores são os mesmos.
   Princípio: tipografia maior, borda mais grossa, alvo maior e
   tinta no contraste máximo — sem trocar o fundo das páginas.
   ============================================================ */
.msk-hivis{
  flex:none;min-width:48px;min-height:44px;padding:0 12px;border-radius:10px;
  border:2px solid var(--line-2);background:var(--well);
  font-size:16px;font-weight:800;letter-spacing:.02em;color:var(--ink-dim);
  transition:color .15s,background .15s,border-color .15s;
}
.msk-hivis:hover{color:var(--ink);border-color:var(--phosphor)}
.msk-hivis[aria-pressed="true"]{
  background:var(--phosphor);border-color:var(--phosphor);color:var(--on-hue);
}

/* tinta e filete no contraste máximo de cada tema (medido ≥9:1 sobre
   panel, panel-2 e well nos dois temas) */
body.hivis{
  --ink:#ffffff;--ink-dim:#dfe4e8;--ink-faint:#c2c9cf;
  --line:#454e56;--line-2:#5a646d;
}
:root[data-theme="light"] body.hivis{
  --ink:#000000;--ink-dim:#1f242a;--ink-faint:#333a41;
  --line:#8b8271;--line-2:#6b6353;
}
body.hivis :focus-visible{outline:3px solid var(--phosphor);outline-offset:2px}

/* cabeçalho e componentes compartilhados */
body.hivis .brand b{font-size:16px}
body.hivis .brand span{font-size:12px}
body.hivis .msk-chip{font-size:13px;border-width:2px}
body.hivis .msk-badge{font-size:10.5px}
body.hivis .msk-sel-box{border-width:2px}
body.hivis .msk-sel-box h2{font-size:19px}
body.hivis .msk-sel-hint{font-size:13.5px}
body.hivis .msk-pcard{border-width:2px;min-height:66px}
body.hivis .msk-pcard .msk-pmeta b{font-size:17px}
body.hivis .msk-pcard .msk-pmeta small{font-size:13px}
body.hivis .msk-add{font-size:13px;border-width:2px}

/* controles de página (percepção, afinador, aulagame usam as mesmas classes) */
body.hivis .seg{border-width:2px}
body.hivis .seg button{font-size:13px;border-right-width:2px}
body.hivis .seg button[aria-pressed="true"]{color:var(--on-hue);background:var(--phosphor)}
body.hivis .btn{font-size:15px;border-width:3px;min-height:56px}
body.hivis .hint{font-size:15px;color:var(--ink-dim)}
body.hivis .prompt{font-size:clamp(18px,5.2vw,23px);border-width:3px;color:var(--ink-dim)}
body.hivis .result{font-size:16.5px;border-width:3px}
body.hivis .status{font-size:13px}
body.hivis .ivgrid button{min-height:64px;border-width:3px;color:var(--ink-dim)}
body.hivis .ivgrid button b{font-size:19px}
body.hivis .ivgrid button small{font-size:11.5px}
body.hivis #voiceOut{font-size:16px}

/* A+ no MURAL (index) */
body.hivis .msec{border-width:2px}
body.hivis .msec > h2{font-size:13px;color:var(--ink-dim)}
body.hivis .me-id b{font-size:21px}
body.hivis .me-id small{font-size:13px}
body.hivis .me-trocar{font-size:12.5px;border-width:2px}
body.hivis .me-stat{border-width:2px}
body.hivis .me-stat span{font-size:12px}
body.hivis .me-stat b{font-size:21px}
body.hivis .oitem .ometa b{font-size:16px}
body.hivis .oitem .ometa small{font-size:13.5px}
body.hivis .ovazio{font-size:14.5px}
body.hivis .avcard{border-width:2px}
body.hivis .avhead b{font-size:15px}
body.hivis .avhead time{font-size:12.5px}
body.hivis .avtxt{font-size:15.5px}
body.hivis .avform textarea{font-size:16px;border-width:2px}
body.hivis .avform .avsend{font-size:12.5px;border-width:2px}

/* A+ na PERCEPÇÃO */
body.hivis .tabs{border-width:2px}
body.hivis .tabs [role=tab]{font-size:13.5px;min-height:54px;border-right-width:2px}
/* rótulo maior precisa de coluna maior: em 92px "FUNDAMENTAL" invadia o controle */
body.hivis .config .field > span{font-size:12px;width:118px;color:var(--ink-dim)}
body.hivis .score{font-size:13.5px}
body.hivis .foot{font-size:12.5px}

/* A+ no AFINADOR — letras do círculo e leitura central maiores
   (é o pedido do professor: no celular o mostrador ficava pequeno) */
body.hivis .note-btn{font-size:clamp(17px,5.2vmin,25px);font-weight:800}
@supports (font-size:1cqw){
  body.hivis .note-btn{font-size:clamp(17px,5.9cqw,26px)}
}
body.hivis #noteName{font-size:clamp(58px,21vmin,96px);font-weight:800}
body.hivis #noteOct{font-size:clamp(17px,4.6vmin,23px)}
body.hivis #solfege{font-size:14px;color:var(--ink-dim)}
body.hivis #cents{font-size:clamp(20px,5.6vmin,27px)}
body.hivis #okTag{font-size:13px}
body.hivis #freq{font-size:14.5px}
body.hivis #target{font-size:13px;color:var(--ink-dim)}
body.hivis .a4ctl button,body.hivis .a4ctl output{font-size:14px}
body.hivis .timbre button{font-size:13px}

/* ---------- AVATAR (círculo com inicial, matiz derivado do nome) ----------
   --av-h  matiz (JS)   --av-ink  tinta legível sobre o matiz (JS mede
   a luminância e escolhe preto ou branco: >=4.5:1 em qualquer hue) */
.msk-av{
  display:inline-grid;place-items:center;flex:none;
  width:var(--av-size,36px);height:var(--av-size,36px);border-radius:50%;
  background:hsl(var(--av-h,150) var(--hue-s) var(--hue-l));
  color:var(--av-ink,var(--on-hue));
  font-family:var(--font-ui);
  font-size:calc(var(--av-size,36px) * .44);font-weight:800;line-height:1;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}

/* ---------- chip do perfil ativo (cabeçalho das 4 páginas) ---------- */
.msk-chip{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  min-height:44px;padding:5px 12px 5px 6px;border-radius:999px;
  border:1px solid var(--line);background:var(--well);
  color:var(--ink);font-size:12px;font-weight:600;
  max-width:min(52vw,220px);
  transition:border-color .15s,background .15s;
}
.msk-chip[hidden]{display:none}
.msk-chip:hover{border-color:var(--line-2)}
.msk-chip .msk-av{--av-size:28px}
.msk-chip .msk-cname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msk-badge{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:3px 6px;border-radius:6px;
  background:rgba(var(--phos-rgb),.14);color:var(--phosphor);
  border:1px solid rgba(var(--phos-rgb),.35);
}

/* ---------- SPLASH de entrada (anel cromático + carregamento) ----------
   z-index 100: acima de tudo, inclusive da tab bar. Sem JS o splash
   nunca aparece (a classe .msk-entrada é posta por script). */
#mskSplash{display:none}
:root.msk-entrada #mskSplash{
  display:flex;position:fixed;inset:0;z-index:100;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:
    radial-gradient(900px 600px at 50% -10%, var(--glow-1) 0%, transparent 60%),
    var(--bg);
  text-align:center;color:var(--ink);font-family:var(--font-ui);cursor:pointer;
  padding:24px;
}
#mskSplash svg{width:116px;height:116px}
#mskSplash b{font-size:19px;font-weight:800;letter-spacing:.3em;text-transform:uppercase}
#mskSplash b em{font-style:normal;color:var(--phosphor)}
#mskSplash > span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.msk-load{display:flex;flex-direction:column;align-items:center;gap:9px;width:min(240px,70vw)}
.msk-load-track{
  width:100%;height:4px;border-radius:99px;overflow:hidden;
  background:var(--well);border:1px solid var(--line);
}
.msk-load-bar{
  display:block;height:100%;width:8%;border-radius:99px;
  background:var(--phosphor);transition:width .25s ease-out;
}
.msk-load-txt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
@media (prefers-reduced-motion:no-preference){
  :root.msk-entrada #mskSplash{animation:mskFade .3s ease-out}
  #mskSplash .spring{animation:mskSpin 10s linear infinite;transform-origin:32px 32px}
  @keyframes mskFade{from{opacity:0}to{opacity:1}}
  @keyframes mskSpin{to{transform:rotate(360deg)}}
}
:root[data-theme="light"] #mskSplash svg.spring rect{filter:saturate(1.15) brightness(.62)}

/* ---------- SELEÇÃO "Quem está tocando?" ----------
   z-index 15: ABAIXO da tab bar (20) — a barra continua navegável. */
#mskSel{
  position:fixed;inset:0;z-index:15;overflow-y:auto;
  background:
    radial-gradient(1100px 700px at 50% -10%, var(--glow-1) 0%, transparent 60%),
    var(--bg);
  padding:calc(24px + env(safe-area-inset-top,0px)) 12px calc(var(--tabbar-h) + 24px);
  display:flex;align-items:flex-start;justify-content:center;
}
#mskSel[hidden]{display:none}
.msk-sel-box{
  width:min(94vw,560px);
  border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(178deg,var(--panel) 0%,var(--panel-2) 70%);
  box-shadow:0 32px 90px rgba(0,0,0,calc(.6 * var(--shadow-k)));
  padding:clamp(16px,3.4vw,26px);
}
.msk-sel-box h2{
  font-size:17px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.msk-sel-box h2:focus-visible{outline:2px solid var(--phosphor);outline-offset:4px}
.msk-sel-hint{margin-top:8px;font-size:12px;line-height:1.5;color:var(--ink-dim)}
.msk-sel-hint b{color:var(--ink)}
.msk-plist{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.msk-pcard{
  display:flex;align-items:center;gap:12px;width:100%;min-height:60px;
  padding:10px 14px;border-radius:14px;text-align:left;
  border:1px solid var(--line);background:var(--well);color:var(--ink);
  transition:border-color .15s,background .15s;
}
.msk-pcard:hover{border-color:var(--line-2);background:var(--hover-fill,var(--well))}
.msk-pcard .msk-av{--av-size:42px}
.msk-pcard .msk-pmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.msk-pcard .msk-pmeta b{font-size:15px;font-weight:700;line-height:1.2}
.msk-pcard .msk-pmeta small{font-size:11px;color:var(--ink-dim)}
.msk-pcard.msk-resume{
  border-color:rgba(var(--phos-rgb),.5);
  background:rgba(var(--phos-rgb),.07);
}
.msk-pcard .msk-cont{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--phosphor);font-weight:700;
}
.msk-add{
  margin-top:14px;min-height:44px;width:100%;padding:12px;border-radius:12px;
  border:1px dashed var(--line-2);background:none;color:var(--ink-dim);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.msk-add:hover{color:var(--ink);border-color:var(--phosphor)}
.msk-addform{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.msk-addform[hidden]{display:none}   /* display:flex venceria o [hidden] do navegador */
.msk-addform input{
  flex:1 1 160px;min-height:44px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--well);color:var(--ink);font-size:14px;
}
.msk-addform button{
  min-height:44px;padding:10px 16px;border-radius:12px;
  border:1px solid rgba(var(--phos-rgb),.45);background:var(--well);color:var(--phosphor);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.msk-err{margin-top:10px;font-size:12.5px;color:var(--err-ink)}
.msk-err[hidden]{display:none}

/* ---------- MURAL ---------- */
.mural{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.msec{
  border-radius:16px;border:1px solid var(--line);background:var(--panel-2);
  padding:16px;
}
.msec > h2{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:12px;
}

/* (a) cartão do meu perfil */
.me{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.me .msk-av{--av-size:64px}
.me-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 100px}
.me-id b{font-size:19px;font-weight:800;line-height:1.15;color:var(--ink)}
.me-id small{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.me-trocar{
  flex:0 0 auto;margin-left:auto;
  min-height:44px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--well);color:var(--ink-dim);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.me-trocar:hover{color:var(--ink);border-color:var(--line-2)}
.me-stats{display:flex;gap:10px;flex-wrap:wrap;width:100%;margin-top:4px}
.me-stat{
  flex:1 1 92px;min-width:92px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--well);
}
.me-stat span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.me-stat b{
  display:block;margin-top:3px;font-family:var(--font-mono);
  font-size:19px;font-weight:700;color:var(--ink);
}
.me-stat b small{
  font-family:var(--font-ui);font-size:12px;font-weight:600;
  color:var(--ink-dim);margin-left:5px;letter-spacing:.04em;
}

/* (b) quem está online */
.olist{display:flex;flex-direction:column;gap:10px}
.oitem{display:flex;align-items:center;gap:11px;min-height:48px}
.oitem .msk-av{--av-size:34px}
.oitem .ometa{display:flex;flex-direction:column;gap:1px;min-width:0}
.oitem .ometa b{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.oitem .ometa small{font-size:11.5px;color:var(--ink-dim);line-height:1.35}
.odot{
  width:9px;height:9px;border-radius:50%;flex:none;margin-left:auto;
  background:var(--phosphor);box-shadow:0 0 0 3px rgba(var(--phos-rgb),.16);
}
@media (prefers-reduced-motion:no-preference){
  .odot{animation:mskPulse 1.9s ease-in-out infinite}
  @keyframes mskPulse{
    0%,100%{box-shadow:0 0 0 2px rgba(var(--phos-rgb),.10)}
    50%    {box-shadow:0 0 0 6px rgba(var(--phos-rgb),.20)}
  }
}
.ovazio{font-size:12.5px;line-height:1.5;color:var(--ink-dim)}
.ooff{
  margin-top:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}
.ooff[hidden]{display:none}

/* (c) avisos do professor */
.avlist{display:flex;flex-direction:column;gap:12px}
.avcard{
  display:flex;gap:11px;padding:12px;border-radius:12px;
  border:1px solid var(--line);background:var(--well);
}
.avcard .msk-av{--av-size:34px}
.avbody{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.avhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.avhead b{font-size:13px;font-weight:700;color:var(--ink)}
.avhead time{font-size:11px;color:var(--ink-faint)}
.avtxt{font-size:13.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.avdel{
  align-self:flex-start;min-height:44px;min-width:44px;padding:8px 10px;border-radius:10px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  border:1px solid transparent;
}
.avdel:hover{color:var(--err-ink);border-color:var(--line)}
.avform{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.avform[hidden]{display:none}        /* idem: só o professor vê o campo de aviso */
.avform textarea{
  width:100%;min-height:74px;padding:11px 12px;border-radius:12px;resize:vertical;
  border:1px solid var(--line);background:var(--well);color:var(--ink);
  font-family:var(--font-ui);font-size:14px;line-height:1.5;
}
.avform .avsend{
  align-self:flex-end;min-height:44px;padding:11px 20px;border-radius:12px;
  border:1px solid rgba(var(--phos-rgb),.45);background:var(--well);color:var(--phosphor);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.avform .avsend:hover{border-color:rgba(var(--phos-rgb),.8)}
.avform .avsend:disabled{opacity:.5;cursor:default}