/* Ear MasterWing — linguagem visual LG, isolada do tema. */
#ear-masterwing,
#ear-masterwing *,
#ear-masterwing *::before,
#ear-masterwing *::after { box-sizing:border-box; }

@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;
}

#ear-masterwing {
  --ink:#222222;
  --muted:#6f7479;
  --line:#d9e1e7;
  --line-strong:#2f2f2f;
  --panel:#f7f9fb;
  --surface:#ffffff;
  --score:#f1f6f9;
  --teal:#50b2b5;
  --teal-dark:#287f83;
  --teal-soft:rgba(80,178,181,.16);
  --amber:#f6a400;
  --amber-soft:rgba(246,164,0,.14);
  --danger:#d85252;
  --success:#278a68;
  --shadow:0 14px 34px rgba(15,23,42,.08);
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:18px 14px 34px;
  color:var(--ink);
  font-family:"IBM Plex Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
}

#ear-masterwing button,#ear-masterwing input { font:inherit; }
#ear-masterwing svg,#ear-masterwing img,#ear-masterwing canvas { max-width:100%;height:auto;display:block; }

#ear-masterwing .sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#ear-masterwing .em-toolbar {
  width:100%;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:12px 14px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

/* Contrato canónico LG SVG Library. */
#ear-masterwing .tb-btn {
  --btn-size:54px;
  --icon-size:24px;
  --icon-inset:27.907%;
  position:relative;
  width:var(--btn-size);
  height:var(--btn-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  color:#222;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#f1f1f1 75%);
  border:1px solid var(--line-strong);
  border-radius:9.302%;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12);
  cursor:pointer;
  appearance:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}

#ear-masterwing .tb-btn:hover { transform:translateY(-2px);background:radial-gradient(circle at 35% 30%,#fff 0%,#f3f3f3 75%);box-shadow:inset 0 1px 2px rgba(0,0,0,.15),0 6px 10px rgba(0,0,0,.16); }
#ear-masterwing .tb-btn:active { transform:translateY(1px);box-shadow:inset 0 4px 7px rgba(0,0,0,.32); }
#ear-masterwing .tb-btn.active { border-color:#111;box-shadow:inset 0 2px 4px rgba(0,0,0,.22),0 0 0 3px var(--teal-soft); }
#ear-masterwing button:focus-visible,#ear-masterwing input:focus-visible { outline:3px solid rgba(80,178,181,.35);outline-offset:2px; }

#ear-masterwing .tb-icon { width:var(--icon-size,24px);height:var(--icon-size,24px);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; }
#ear-masterwing .tb-btn > .tb-icon { position:absolute;inset:var(--icon-inset,27.907%);width:auto;height:auto; }
#ear-masterwing .tb-icon svg { width:100%;height:100%;overflow:visible; }
#ear-masterwing [data-lg-svg]:empty { visibility:hidden; }
#ear-masterwing .em-layout {
  width:min(1120px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;
  align-items:start;
  margin:0 auto;
}

#ear-masterwing .em-main-column {
  min-width:0;
  display:grid;
  gap:20px;
  align-content:start;
}

#ear-masterwing .card { position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow); }
#ear-masterwing .panel { display:grid;gap:16px;padding:20px; }

#ear-masterwing .em-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px 10px 16px;
  background:linear-gradient(90deg,rgba(80,178,181,.12),rgba(255,255,255,.78));
  border-left:5px solid var(--amber);
  border-radius:10px;
}

#ear-masterwing .em-card-head h2,#ear-masterwing .answers-block h2,#ear-masterwing .settings-head h2 { margin:0;color:var(--ink);font-size:clamp(1.04rem,2vw,1.25rem);font-weight:800;letter-spacing:.01em; }
#ear-masterwing .mini-hud { display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:wrap; }
#ear-masterwing .status-chip { min-width:108px;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 10px rgba(15,23,42,.05); }
#ear-masterwing .status-chip.score-chip { border-bottom:3px solid var(--teal); }
#ear-masterwing .status-chip.mini-errors { border-bottom:3px solid var(--amber); }
#ear-masterwing .status-label { color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase; }
#ear-masterwing .status-value { color:var(--ink);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums; }
#ear-masterwing .score-chip.pulse { animation:em-pulse .55s ease; }
#ear-masterwing .num.bump { animation:em-bump .45s ease; }
@keyframes em-pulse { 50% { transform:scale(1.06); } }
@keyframes em-bump { 30% { transform:translateY(-2px); } }

#ear-masterwing .vol { display:flex;align-items:center;justify-content:center;gap:12px;width:min(440px,100%);margin:0 auto; }
#ear-masterwing .vol label { display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase; }
#ear-masterwing .vol .volume-icon { --icon-size:24px;color:var(--ink); }
#ear-masterwing .vol input[type="range"] { width:100%;accent-color:var(--teal-dark); }

#ear-masterwing .staff-wrap { min-height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px;background:var(--score);border:1px solid var(--line);border-radius:14px; }
#ear-masterwing .staff { width:100%;display:flex;align-items:center;justify-content:center; }
#ear-masterwing #staffInterval { max-width:100%; }
#ear-masterwing .staff svg { max-width:100%;height:auto;margin-inline:auto;overflow:visible;pointer-events:none; }
#ear-masterwing .staff-feedback { min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:0;padding:10px 14px;text-align:center;background:#fff;border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:10px;box-shadow:0 5px 14px rgba(15,23,42,.06);font-size:15px;font-weight:780; }
#ear-masterwing #staffCaption.ok { color:var(--success);border-left-color:var(--success);background:#f2fbf7; }
#ear-masterwing #staffCaption.bad { color:var(--danger);border-left-color:var(--amber);background:var(--amber-soft); }
#ear-masterwing #staffCaption strong { display:block;margin-top:3px;color:var(--ink); }
#ear-masterwing .audio-info { padding:10px 12px;color:var(--danger);background:#fff4f4;border:1px solid #f0c4c4;border-radius:9px;font-weight:700;text-align:center; }
#ear-masterwing #staffCard.correct { border-color:rgba(39,138,104,.55);box-shadow:0 0 0 3px rgba(39,138,104,.10),var(--shadow); }
#ear-masterwing #staffCard.wrong { border-color:rgba(216,82,82,.55);box-shadow:0 0 0 3px rgba(216,82,82,.10),var(--shadow); }

#ear-masterwing .answers-block { padding:18px; }
#ear-masterwing .answers-block h2 { margin-bottom:14px;padding:8px 12px;background:linear-gradient(90deg,rgba(246,164,0,.13),rgba(255,255,255,.7));border-left:5px solid var(--teal);border-radius:9px;text-align:center; }
#ear-masterwing .answers { display:grid;grid-template-columns:1fr;gap:8px; }
#ear-masterwing .ans { min-height:42px;display:flex;align-items:center;justify-content:center;padding:8px 10px;color:var(--ink);background:#fff;border:1px solid #aab3ba;border-radius:9px;box-shadow:0 2px 6px rgba(15,23,42,.05);font-size:13px;font-weight:780;text-align:center;cursor:pointer;appearance:none;transition:transform .1s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease; }
#ear-masterwing .ans:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 6px 11px rgba(15,23,42,.12);border-color:var(--teal); }
#ear-masterwing .ans.correct { color:var(--success);background:#edf9f3;border-color:var(--success);box-shadow:0 0 0 3px rgba(39,138,104,.10); }
#ear-masterwing .ans.wrong { color:var(--danger);background:#fff1f1;border-color:var(--danger);box-shadow:0 0 0 3px rgba(216,82,82,.09); }
#ear-masterwing .ans.is-tritone { border-left:4px solid var(--amber); }
#ear-masterwing .ans:disabled { cursor:not-allowed;opacity:.6;transform:none; }

#ear-masterwing .area-set {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(21,30,36,.44);
  backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
#ear-masterwing .area-set.is-visible { visibility:visible;opacity:1;pointer-events:auto; }
#ear-masterwing .area-set.is-hidden { visibility:hidden;opacity:0;pointer-events:none; }
#ear-masterwing .settings-panel { width:min(700px,100%);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.25);transform:translateY(8px) scale(.98);transition:transform .18s ease; }
#ear-masterwing .area-set.is-visible .settings-panel { transform:translateY(0) scale(1); }
#ear-masterwing .settings-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;background:linear-gradient(90deg,rgba(80,178,181,.12),rgba(255,255,255,.78));border-left:5px solid var(--amber);border-radius:10px; }
#ear-masterwing .opt { display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap; }
#ear-masterwing .pill,#ear-masterwing .text-action { min-height:42px;padding:8px 13px;color:var(--ink);background:#fff;border:1px solid #aab3ba;border-radius:9px;font-size:13px;font-weight:780;cursor:pointer;appearance:none;transition:transform .1s ease,box-shadow .12s ease,border-color .12s ease; }
#ear-masterwing .pill:hover,#ear-masterwing .text-action:hover { transform:translateY(-2px);box-shadow:0 6px 11px rgba(15,23,42,.11);border-color:var(--teal); }
#ear-masterwing .pill[aria-selected="true"] { background:var(--teal-soft);border-color:var(--teal-dark);box-shadow:0 0 0 3px rgba(80,178,181,.10); }
#ear-masterwing .custom-wrap { display:grid; }
#ear-masterwing .custom-inner { display:grid;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px; }
#ear-masterwing .settings-copy { margin:0;color:var(--muted);font-size:14px;text-align:center; }
#ear-masterwing .custom-actions { display:flex;justify-content:center;gap:8px;flex-wrap:wrap; }
#ear-masterwing .checks-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
#ear-masterwing .checks-grid label { display:flex;align-items:center;gap:8px;min-width:0;padding:8px 9px;background:var(--soft,#f1f6f9);border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:700;cursor:pointer; }
#ear-masterwing .checks-grid input[type="checkbox"] { flex:0 0 auto;width:17px;height:17px;accent-color:var(--teal-dark);cursor:pointer; }

#ear-masterwing .gameover { position:fixed;inset:0;z-index:10000;display:none;place-items:center;padding:20px;background:rgba(21,30,36,.44);backdrop-filter:blur(3px); }
#ear-masterwing .gameover .box { width:min(440px,100%);display:grid;gap:16px;padding:24px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.25); }
#ear-masterwing .gameover h2 { margin:0;padding:12px 14px;background:var(--amber-soft);border-left:5px solid var(--amber);border-radius:10px;font-size:clamp(1.25rem,4vw,1.6rem); }
#ear-masterwing .final-score { display:grid;gap:5px;color:var(--muted);font-weight:700; }
#ear-masterwing .final-score strong { color:var(--ink);font-size:2rem;font-variant-numeric:tabular-nums; }
#ear-masterwing .primary-action { min-height:46px;justify-self:center;padding:10px 22px;color:#fff;background:var(--teal-dark);border:1px solid #1f6669;border-radius:10px;box-shadow:0 6px 14px rgba(40,127,131,.22);font-size:14px;font-weight:800;cursor:pointer; }

@media (max-width:900px) {
  #ear-masterwing { padding:12px 14px 28px; }
  #ear-masterwing .em-toolbar { min-height:78px;margin:0;padding:12px; }
  #ear-masterwing .em-layout { grid-template-columns:1fr;gap:16px; }
  #ear-masterwing .em-main-column { gap:16px; }
  #ear-masterwing .panel { padding:14px; }
  #ear-masterwing .em-card-head { align-items:stretch;flex-direction:column; }
  #ear-masterwing .em-card-head h2 { text-align:center; }
  #ear-masterwing .mini-hud { width:100%; }
  #ear-masterwing .status-chip { flex:1 1 120px; }
  #ear-masterwing .staff-wrap { min-height:220px;padding:10px; }
  #ear-masterwing .answers-block { padding:14px; }
  #ear-masterwing .answers { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #ear-masterwing .area-set { padding:12px; }
  #ear-masterwing .settings-panel { max-height:92vh;padding:14px; }
  #ear-masterwing .checks-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:420px) {
  #ear-masterwing .answers { grid-template-columns:1fr; }
  #ear-masterwing .checks-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  #ear-masterwing *,#ear-masterwing *::before,#ear-masterwing *::after { animation-duration:.01ms!important;transition-duration:.01ms!important; }
}