:root{
  /* ===== COLOR ===== */
  --brand:#12B3B6;
  --brand-dark:#0E8E90;
  --bg:#f7f8fa;
  --panel:#ffffff;
  --ink:#0e1720;
  --muted:#5b6570;
  --line:#e1e5ea;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --hit:#16a34a;
  --miss:#dc2626;
  --text:var(--ink);
  --border:var(--line);
  --accent:var(--brand);
  --accent-2:var(--brand-dark);
  --accent2:var(--brand-dark);
  --ring:#e6fbfb;
  --radius:16px;

/* ===== STAFF  ===== */
--note-scale:2.3;
--staff-unit:14;
--acc-size:calc(58px * var(--note-scale));
--acc-dbl-size:calc(50px * var(--note-scale));
--clef-size:160px;
--acc-gap:16;
--staff-bias-x:0;
--arp-step-x:122px;
--staff-fixed:1050px;
--staff-height:620;
--staff-pad:16px;
--clef-inset:36;
	
/* ===== TYPE SCALE ===== */
--fs-0: clamp(14px, 0.95vw, 15px);
--fs-1: clamp(15px, 1.05vw, 17px);
--fs-2: clamp(18px, 1.25vw, 20px);
--fs-3: clamp(20px, 1.6vw, 24px);

--fs-base: var(--fs-1);
	
	}

/* Noto Music local */
@font-face{
  font-family:"Noto Music Local";
  src:url("https://linoguerreiro.com/wp-content/uploads/2025/10/NotoMusic-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html, body{width:100%;max-width:100vw;overflow-x:hidden;margin:0;padding:0}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);

  font-size:var(--fs-base);
  line-height:1.45;
}

button{
  color: var(--text);
  font: inherit;
}

svg,img,video,canvas{max-width:100%;height:auto;display:block}

/* WRAP centrado */
.wrap{
  max-width:1200px;
  margin:auto;
  padding:1.2rem;
  display:grid;
  gap:1rem;
}

/* Cards */
.card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}

.panel{
	padding:1rem;
	display:grid;
	gap:.75rem;
}

/* Utilities */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}

/* =========================
   LAYOUT (CORRIGIDO)
========================= */

.layout{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap:1rem;

  align-items:stretch;
}

/* coluna esquerda */
.area-staff-top{
  grid-column:1;

  min-height:clamp(480px, 65vh, 720px);
}

/* coluna direita (respostas) */
.answers-block{
  grid-column:2;
  border-left:1px dashed var(--border);
  padding-left:12px;

  max-height:70vh;
  overflow:auto;
}

/* =========================
   TOOLTIP / MODAL CENTRAL
========================= */

.area-set{
  position:fixed;
  inset:0;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:1.25rem;

  /* overlay + blur (upgrade) */
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(6px);

  /* estado inicial escondido */
  opacity:0;
  pointer-events:none;
}

/* conteúdo do painel */
.area-set .panel{
  width:min(42rem, 94vw);
  max-height:85vh;

  overflow:auto;

  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);

  /* animação mais rica */
  transform:translateY(.6rem) scale(.96);
}

/* visível */
.area-set.is-visible{
  opacity:1;
  pointer-events:auto;
}

/* animação */
.area-set,
.area-set .panel{
  transition:all .25s ease;
}

.area-set.is-visible .panel{
  transform:translateY(0) scale(1);
}

/* =========================
   STAFF CENTRADO
========================= */

.area-staff-top{
  grid-column:1;
  width:100%;
  max-width:56rem;
  margin:0 auto;
}

/* Toggle PT/EN */
.toggle{
  display:inline-flex;
  justify-content:center;
  align-items:center;

  margin:0 auto;
  width:auto;
  max-width:160px;

  gap:.4rem;
  border:2px solid var(--accent);
  border-radius:999px;
  overflow:hidden;
}
.toggle button{
  border:0;
  background:#fff;
  padding:.5rem .9rem;
  font-weight:800;
  font-size:var(--fs-0);
  cursor:pointer;
}
.toggle button[data-on]{background:var(--accent)}

/* Pills */
.opt{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;

  max-width:360px;
  margin:0 auto;
}

.pill{
  appearance:none;
  border:2px solid var(--accent);
  background:#fff;
  color:#111;
  font-weight:800;
  font-size:var(--fs-0);
  padding:.5rem .9rem;
  border-radius:12px;
  cursor:pointer;
  transition:.15s;

  min-width:110px;
  text-align:center;
}

.pill:hover{transform:translateY(-1px)}
.pill[aria-selected="true"]{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 8px 16px rgba(245,200,76,.25), inset 0 0 0 2px rgba(245,200,76,.35);
}

/* Submenu */
.custom-wrap{display:grid;place-items:center}
.custom-inner{
  width:min(680px,100%);
  background:#fffef9;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:grid;
  gap:10px;
}
.custom-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Checkboxes */
.checks-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem .9rem;
  justify-content:center;
}

.checks-grid label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:var(--fs-2);
  cursor:pointer;
}

.checks-grid input[type="checkbox"]{
  transform: scale(1.4);
  accent-color: var(--accent);
  cursor:pointer;
}

/* MINI HUD */
.mini-hud{
  display:grid;
  gap:8px;
  margin-top:6px;
  justify-items:center;
}

.mini-row{
  display:flex;
  justify-content:center;
  align-items:center;
}

.score-chip{
  font-weight:900;
  font-size:var(--fs-2);
  border:2px solid var(--accent);
  background:var(--ring);
  border-radius:999px;
  padding:.5rem .9rem;
}

.score-chip.pulse{animation:pulse 550ms ease}
.num.bump{animation:bump .45s ease}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

@keyframes bump{
  0%{transform:translateY(0)}
  30%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}

.mini-errors{
  display:inline-flex;
  justify-content:center;
  align-items:center;

  margin:0 auto;
  width:auto;
  max-width:220px;

  text-align:center;
}

/* Botões */
.btn{
  border:2px solid var(--border);
  background:#fff;
  padding:.5rem .75rem;
  border-radius:12px;
  font-weight:800;
	font-size:var(--fs-0);
  cursor:pointer
}
.btn.sm{padding:.4rem .6rem;}
.btn.big{
  padding:.6rem 1rem;
  font-size:var(--fs-1);
}
.btn.primary{border-color:var(--accent);background:var(--accent)}
.btn:hover{filter:brightness(0.98)}

/* Toolbar */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.6rem .75rem;
  background:#fffefc;
}
.right-tools .tool-right{margin-left:auto}

.vol{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;

  width:100%;
  max-width:420px;
  margin:0 auto;
}

.vol input[type="range"]{
  width:100%;
  max-width:320px;
}

.btn-play{
  display:block;
  margin:0 auto;
  width:100%;
  max-width:320px;
}

/* Pauta */
#staffCard{display:flex;justify-content:center;align-items:center}

.staff-wrap{
  padding:var(--staff-pad);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.staff-wrap.tight{
  padding-top:.75rem;
padding-bottom:.6rem;
}

.staff{display:block;max-width:100%}

.staff svg{
  width:min(var(--staff-fixed),100%);
  height:auto;
  margin-inline:auto;
  overflow:visible;
  pointer-events:none
}

.staff .staff-line{stroke:#222;stroke-width:1.25}
.staff .notehead{fill:#111;stroke:#111;stroke-width:.7}

.staff .acc{
  font-size:var(--acc-size);
  dominant-baseline:middle;
  text-anchor:end;
  font-family:"Noto Music Local","Noto Music","Bravura","Petaluma","Segoe UI Symbol","Apple Symbols",serif
}

.staff .acc.acc-dbl{font-size:var(--acc-dbl-size)}

.staff .clef{
  font-size:var(--clef-size);
  text-anchor:middle;
  dominant-baseline:middle;
  font-family:"Noto Music Local","Noto Music","Bravura","Petaluma","Segoe UI Symbol","Apple Symbols",serif
}

/* Feedback */
#staffCard.correct{
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(18,179,182,.12),0 6px 18px rgba(18,179,182,.18)
}

#staffCard.wrong{
  background:#ffefef;
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.10),0 6px 18px rgba(220,38,38,.16)
}

#staffCaption{
  display:block;
  text-align:center;
  font-weight:800;
 margin:.25rem 0 .4rem;
}

#staffCaption.ok{color:#15803d}
#staffCaption.bad{color:#b91c1c}

#staffCaption strong{
  display:block;
  margin-top:4px;
  font-size:1.05em;
  color:var(--accent-2)
}

.answers{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  align-items:start;
}

.ans{
  border:2px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  font-weight:800;
  font-size:var(--fs-0);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:#fff;
  transition:.12s;
  min-height:38px;
  line-height:1.1;
}

/* HOVER */
.ans:hover{
  box-shadow: inset 0 0 0 2px var(--accent-2);
}

/* CORRETO */
.ans.correct{
  background:#e7f8ef;
  box-shadow:
    inset 0 0 0 2px var(--accent-2),
    0 0 0 3px rgba(18,179,182,.14),
    0 0 24px rgba(18,179,182,.28);
}

/* ERRADO */
.ans.wrong{
  background:#ffefef;
  box-shadow:
    inset 0 0 0 2px #dc2626,
    0 0 0 3px rgba(220,38,38,.12),
    0 0 18px rgba(220,38,38,.22);
}

.ans.is-tritone{
  grid-column:1 / -1;
}

/* Gameover */
.gameover{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.96);
  border-radius:var(--radius);
  border:2px solid var(--border);
  display:none;
  place-items:center;
  padding:24px
}

.gameover .box{
  display:grid;
  gap:10px;
  text-align:center
}


/* =========================
   DOCK + TOOLTIP STATE
========================= */

/* botão ✎ */
.dock-btn{
  position:fixed;
  top:24px;
  left:24px;
  z-index:1100;

  width:40px;
  height:40px;
  border-radius:50%;

  border:2px solid var(--accent);
  background:var(--accent);
  color:#111;

  font-size:var(--fs-2);
  font-weight:900;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* performance hint (não altera layout) */
.area-set{
  will-change:opacity, transform;
}

/* estados */
.area-set.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px) scale(.98);
}

.area-set.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

/* animação (só aplicada quando há estado) */
.area-set.is-hidden,
.area-set.is-visible{
  transition:opacity .25s ease, transform .25s ease;
}

/* =========================
   MOBILE
========================= */

@media (max-width:900px){
  .layout{
    grid-template-columns:1fr;
  }

  .answers-block{
    grid-column:auto;
    border-left:none;
    padding-left:0;
  }
}