/* © 2026 Josué García García — Apps cromàtiques d'instrument (iPlay)
   Complement de /assets/trompeta-cromatica.css: diagrames de claus, vara del trombó,
   4 pistons, selector d'instrument i d'idioma. */
:root { --logo-url: url('/img/apps-icon/icon-192.png'); }

/* ── Capçalera: idioma ─────────────────────────────── */
.ic-head-right { display: flex; align-items: center; gap: 12px; }
.ic-lang { display: flex; gap: 2px; background: rgba(10,15,28,.85); border: 1px solid rgba(252,163,17,.5); border-radius: 20px; padding: 3px; font-family: var(--display); letter-spacing: .12em; }
.ic-lang button { border: 0; border-radius: 16px; padding: .25rem .6rem; cursor: pointer; font: inherit; font-size: .8rem; background: transparent; color: var(--text); }
.ic-lang button.on { background: var(--gold); color: #000; }

/* ── Selector d'instrument (saxos, tubes…) ─────────── */
.ic-variants { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 6px; max-width: 760px; position: relative; z-index: 2; }
.ic-var { background: rgba(10,20,40,.7); color: var(--text); border: 1.5px solid var(--gold-border); border-radius: 999px; padding: 9px 18px; font-family: var(--body); font-weight: 600; font-size: .95rem; cursor: pointer; transition: all .18s; }
.ic-var small { color: var(--gold); font-weight: 700; margin-left: 4px; }
.ic-var:hover { border-color: var(--gold); }
.ic-var.active { background: var(--gold); color: #000; border-color: var(--gold-light); box-shadow: 0 0 22px rgba(252,163,17,.45); }
.ic-var.active small { color: #000; }

/* ── 4 pistons ─────────────────────────────────────── */
.valves-display.ic-nv4 { gap: 12px; }
.valves-display.ic-nv4 .valve-item { min-width: 64px; }
.valves-display.ic-nv4 .valve-circle { width: 66px; height: 66px; font-size: 30px; }
.run-big-valves.ic-nv4 .run-big-v { width: 70px; height: 70px; font-size: 32px; }
.fc-valves-input.ic-nv4 { gap: 10px; }
.fc-valves-input.ic-nv4 .fc-valve-item { min-width: 64px; }
.fc-valves-input.ic-nv4 .fc-valve-btn { width: 66px; height: 66px; }
.sopa-valves-display.ic-nv4 { gap: 10px; }
.sopa-valves-display.ic-nv4 .sopa-valve-vis { width: 52px; height: 52px; font-size: 24px; }
.tn-ans-valves.ic-nv4 .run-big-v { width: 46px; height: 46px; font-size: 20px; }
@media (max-width: 520px) {
  .valves-display.ic-nv4 .valve-circle, .fc-valves-input.ic-nv4 .fc-valve-btn { width: 56px; height: 56px; font-size: 26px; }
  .valves-display.ic-nv4 .valve-item, .fc-valves-input.ic-nv4 .fc-valve-item { min-width: 56px; }
  .run-big-valves.ic-nv4 .run-big-v { width: 56px; height: 56px; font-size: 26px; }
}

/* ── Diagrama de claus (fusta) ─────────────────────── */
.ic-diag-wrap { display: flex; justify-content: center; }
.ic-diag { display: block; height: auto; overflow: visible; }
.ic-diag .ic-spine { stroke: rgba(252,163,17,.12); stroke-width: 6; stroke-linecap: round; }
.ic-diag .ic-sep { stroke: rgba(252,163,17,.35); stroke-width: 1; stroke-dasharray: 3 3; }
.ick { fill: var(--oxford-deep); stroke: rgba(252,163,17,.55); stroke-width: 1.3; transition: fill .15s, stroke .15s; }
.ick.on { fill: var(--gold); stroke: var(--gold-light); filter: drop-shadow(0 0 3px rgba(252,163,17,.8)); }
.ick.correct { fill: var(--green); stroke: #7fe0b0; }
.ick.wrong { fill: var(--red); stroke: #ff9c7a; }
.ick.missed { fill: rgba(252,163,17,.12); stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: 3 2; animation: icPulse 1s ease-in-out infinite; }
@keyframes icPulse { 50% { stroke-opacity: .35; } }
.ick-i { cursor: pointer; }
.ick-i:hover:not(.on):not(.correct):not(.wrong) { fill: var(--oxford-light); stroke: var(--gold); }
.ickt { font-family: var(--body); font-weight: 700; fill: rgba(229,229,229,.7); pointer-events: none; user-select: none; }
.ickt.on { fill: #000; }
.ic-diag.ic-panel { width: 150px !important; min-width: 0; }
.ic-diag.ic-run { width: 150px !important; min-width: 0; }
.ic-diag.ic-quiz { width: 112px !important; min-width: 0; }
.ic-diag.ic-mini { width: 54px !important; min-width: 0; }
.ic-diag.ic-sopa { width: 128px !important; min-width: 0; }
.ic-diag.ic-answer { width: 96px !important; min-width: 0; }
.ic-diag.ic-input { width: 190px !important; min-width: 0; max-width: 100%; }
.ic-diag.ic-mini .ickt { display: none; }
.ic-k-input { touch-action: manipulation; }
.ic-db-fing { display: flex; justify-content: center; margin: 4px 0 2px; }
.ic-fing-text { text-align: center; font-family: var(--body); font-size: .9rem; color: var(--text); line-height: 1.4; max-width: 300px; margin: 0 auto 6px; }
.ic-fing-text b { color: var(--gold-light); font-weight: 600; display: block; }
.ic-fing-text small { display: block; color: var(--text-dim); font-size: .78rem; margin-top: 3px; }
.ic-run-fing { display: flex; justify-content: center; align-items: center; }
.quiz-valves-show.ic-quiz-fing { justify-content: center; }
.ic-sopa-fing { display: flex; justify-content: center; margin: 4px 0 8px; }
.ic-combo-wood { font-size: .7em; letter-spacing: .1em; }
.ic-cs-diag { width: 54px; }
.ic-ref-alt { font-size: 10px; color: var(--text-dim); text-align: center; margin-top: 4px; letter-spacing: .05em; }
.ic-ref-wood .ref-card-bottom { align-items: flex-end; }

/* Flashcards / toca: la columna de resposta necessita més aire amb el dibuix */
.ic-fcw-wood .fcw-fingering-section, .ic-fcw-wood #tnValvesPanel { min-width: 210px; }

/* ── Trombó: vara ──────────────────────────────────── */
.ic-slide-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.ic-slide { width: 100%; max-width: 320px; height: auto; }
.ic-slide.ic-quiz { max-width: 220px; }
.ic-slide.ic-sopa, .ic-slide.ic-answer { max-width: 230px; }
.ic-slide-in { fill: rgba(252,163,17,.25); stroke: var(--gold-dark); stroke-width: 1; }
.ic-slide-brace { fill: var(--gold); }
.ic-slide-track { stroke: rgba(252,163,17,.3); stroke-width: 2; }
.ic-slide-dot { fill: var(--oxford-deep); stroke: rgba(252,163,17,.4); stroke-width: 1.5; }
.ic-slide-dot.on { fill: var(--gold); stroke: var(--gold-light); filter: drop-shadow(0 0 5px rgba(252,163,17,.9)); }
.ic-slide-num { font-family: var(--display); font-size: 13px; fill: var(--text-dim); }
.ic-slide-num.on { fill: #000; font-size: 15px; }
.ic-pos-big { font-family: var(--display); font-size: 44px; color: var(--gold); line-height: 1; letter-spacing: .03em; }
.ic-pos-big small { font-size: .38em; color: var(--text-dim); margin-left: 4px; letter-spacing: .15em; }
.ic-k-quiz .ic-pos-big, .ic-k-sopa .ic-pos-big, .ic-k-answer .ic-pos-big { font-size: 30px; }
.ic-pos-mini { font-family: var(--display); font-size: 22px; color: var(--gold); line-height: 1; }
.ic-pos-mini small { font-size: .55em; }
.ic-pos-seq { font-family: var(--display); font-size: 13px; color: var(--gold); margin-top: 2px; }
.ic-pos-input { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 330px; margin: 0 auto 10px; }
.fc-valve-btn.ic-pos { width: 54px; height: 54px; }
.fc-valve-btn.ic-pos .fcv-num { font-size: 26px; }
@media (max-width: 520px) { .fc-valve-btn.ic-pos { width: 46px; height: 46px; } }

/* ── Teclat amb finestra mòbil (greu ↔ agut) ───────── */
.ic-kb { display: flex; align-items: stretch; gap: 8px; padding: 0 10px; }
.ic-kb .keyboard-wrap { flex: 1; min-width: 0; }
.ic-kb-nav { flex: 0 0 auto; width: 54px; margin: 14px 0 18px; border-radius: 10px; border: 1.5px solid var(--gold-border); background: var(--oxford-deep); color: var(--gold); font-size: 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--body); transition: all .15s; }
.ic-kb-nav small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.ic-kb-nav:hover:not(:disabled) { border-color: var(--gold); background: var(--oxford-light); }
.ic-kb-nav:disabled { opacity: .3; cursor: default; }
.ic-kb-range { text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: 0 0 10px; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   ORDINADOR: cada joc cap sencer a la pantalla, sense scroll
   ══════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .app-header { position: relative; }
  .main-nav { top: 0; padding: 4px 0; }
  .section { scroll-margin-top: 58px; margin-bottom: 26px; padding-top: 6px; }
  .hero { padding: 20px 24px 12px; }
  .section-head { margin-bottom: 8px; }
  .section-title { font-size: 30px; }
  .instructions { padding: 7px 12px; margin-bottom: 10px; }
  .instructions-text { font-size: 13px; line-height: 1.45; }
  .instructions-icon { font-size: 18px; }
  .score-bar { margin-top: 10px; padding: 7px 14px; gap: 12px; }
  .score-num { font-size: 22px; }
  .flashcard-actions { margin-top: 10px; }
  .fc-btn { padding-top: 9px; padding-bottom: 9px; }

  /* Panell */
  .dashboard-top { padding: 12px 20px 6px; }
  .db-panel { gap: 7px; }
  .note-name-big { font-size: 74px; }
  .staff-container { min-height: 0; padding: 6px 10px; }
  .staff-container .staff-svg { max-height: 130px; }
  .play-big-btn { padding: 11px 30px; font-size: 17px; }
  .key-natural { height: 104px; }
  .key-sharp { height: 66px; }
  .keyboard-wrap { padding: 10px 12px 12px; }
  .ic-kb-nav { margin: 10px 0 12px; }
  .ic-diag.ic-panel { height: 262px; width: auto !important; }
  .valves-display { margin: 2px 0; }
  .valve-circle { width: 70px; height: 70px; font-size: 32px; }

  /* Quiz */
  .quiz-question { padding: 12px 16px; margin-bottom: 10px; }
  .quiz-prompt { margin-bottom: 8px; }
  .quiz-staff-box, .quiz-fingering-box { min-height: 0; padding: 8px; }
  .quiz-staff-box .staff-svg { max-height: 150px; }
  .ic-diag.ic-quiz { height: 214px; width: auto !important; }
  .quiz-opt { padding: 11px 8px; }

  /* Escala */
  .run-controls { padding: 8px 12px; margin-bottom: 10px; gap: 12px; }
  .run-big-display { padding: 12px 16px; margin-bottom: 10px; }
  .run-big-name { font-size: 104px; }
  .run-big-staff { min-height: 0; padding: 6px; }
  .run-big-staff svg { max-height: 165px; }
  .ic-diag.ic-run { height: 236px; width: auto !important; }
  .run-big-v { width: 72px; height: 72px; font-size: 32px; }
  .run-progress-label { margin-top: 8px; font-size: 1.1rem; }
  .run-sequence { padding: 8px; }
  .seq-note { padding: 6px; min-width: 60px; gap: 3px; }

  /* Flashcards i «Toca la nota» */
  .flashcard-wide { padding: 12px 18px; min-height: 0; gap: 12px; }
  .fcw-section { gap: 8px; padding: 4px; }
  .fcw-staff { min-height: 0; padding: 8px; }
  .fcw-staff .staff-svg { max-height: 150px; }
  .ic-diag.ic-input { height: 300px; width: auto !important; }
  .ic-diag.ic-answer { height: 150px; width: auto !important; }
  .fc-valve-btn { width: 70px; height: 70px; }
  .fc-note-btn { padding-top: 9px; padding-bottom: 9px; }
  .tn-name { font-size: 50px; }
  .tn-heard { font-size: 46px; min-height: 46px; }
  .tn-answer { min-height: 0; gap: 6px; }
  .tn-ans-name { font-size: 40px; }
  .tn-controls { row-gap: 8px; }
  .tn-mode-btn { padding-top: 7px; padding-bottom: 7px; }

  /* Sopa */
  .sopa-layout { padding: 14px 18px; gap: 18px; }
  .sopa-fingering { padding: 14px; gap: 8px; }
  .ic-diag.ic-sopa { height: 214px; width: auto !important; }
  .sopa-cell { padding: 6px 4px 5px; }
  .sopa-grid { gap: 6px; }

  /* Toca: tots els controls en una sola línia */
  .tn-controls { flex-wrap: nowrap; gap: 10px; }
  .tn-controls .tn-modes { flex-wrap: nowrap; }
  .tn-controls .tn-mode-btn { font-size: 13px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
  .tn-controls .tempo-control { gap: 6px; }
  .tn-controls .tempo-control select { max-width: 190px; }
  .tn-controls .fc-autoadvance { white-space: nowrap; margin-left: auto; }
  #toca .ic-diag.ic-input { height: 270px; }
  /* Sopa més compacta */
  .sopa-feedback { padding: 7px 12px; min-height: 2.2rem; font-size: 1.1rem; }
  .sopa-fp-combo { font-size: 1.6rem; }
  .sopa-hint { font-size: 12px; }
  .sopa-actions { margin-top: 8px; }
  .sopa-cheatsheet { margin-top: 10px; }

  /* Botons i marcador a la mateixa línia (flashcards i toca) */
  #flashcards, #toca { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; }
  #flashcards > *, #toca > * { grid-column: 1 / -1; }
  #flashcards > .flashcard-actions, #toca > .flashcard-actions { grid-column: 1; justify-content: flex-start; margin-top: 10px; }
  #flashcards > .score-bar, #toca > .score-bar { grid-column: 2; margin-top: 10px; padding: 5px 12px; }
  #flashcards > .score-bar .score-reset, #toca > .score-bar .score-reset { padding: 6px 12px; }
  #toca .fcw-staff .staff-svg { max-height: 128px; }
  #toca .tn-name { font-size: 42px; }
  .ic-diag.ic-sopa { height: 186px; }
  .sopa-cell { padding: 4px 3px; }

  #sopa { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
  #sopa > * { grid-column: 1 / -1; }
  #sopa > .score-bar { grid-column: 1; padding: 5px 12px; }
  #sopa > .sopa-cheatsheet { grid-column: 2; margin-top: 10px; }
}