/* ══════════════════════════════════════
   INTRO / HOME SCREEN
══════════════════════════════════════ */

/* HOME — fills screen, config scrolls below */
#intro-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 4vh 1.2rem;
  gap: 1.5rem;
  background-image: url('../../assets/note.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* leaderboard panel on home — shrinks to widest row */
#lb-intro {
  width: fit-content;
  max-width: none;
  gap: 13px;
  padding: 13px;
  align-items: flex-start;
}




/* ── LEADERBOARD ROWS ── */
.lb-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 26px;
  width: 100%;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.lb-rank  { color: var(--plus2); }
.lb-name  { color: #fff; }
.lb-score { color: var(--plus2); }

.lb-loading, .lb-empty {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 1rem 1.2rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.new-entry { background: rgba(255,255,94,0.07); }

/* ── CONFIG PANEL ── */
#config-panel {
  padding-bottom: 4rem;
  gap: 0.75rem;
}

/* ── SLIDERS ── */
.sr {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 0.6rem;
  width: 100%;          /* stretch inside panel's align-items:center */
  align-self: stretch;
}

.sr-label {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--plus2);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
}

.sr-val { color: var(--plus2); font-weight: 700; }

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,94,0.25);
  outline: none;
  cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--plus2);
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--plus2);
  cursor: pointer;
  border: none;
}

/* ── TOGGLE ROWS — shares .btn base, override layout ── */
.ptoggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 13px;
  gap: 13px;
  cursor: pointer;
}

.ptoggle-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bg2);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* OFF: container bg becomes --plus1, text stays same */
.ptoggle-row.off {
  background: var(--plus1);
}

.ptoggle-row.off .ptoggle-label {
  color: var(--bg2);
}

/* ── TOGGLE SWITCH ── */
.toggle-sw { display: flex; align-items: center; cursor: pointer; }
.toggle-sw input { display: none; }

.toggle-track {
  width: 46px;
  height: 34px;  /* 7 + 20 + 7 */
  background: var(--bg2);    /* ON: blue track */
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
}

.ptoggle-row.off .toggle-track { background: var(--plus1); }  /* OFF: dark purple track */

.toggle-thumb {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 20px;
  height: 20px;
  background: var(--plus2);  /* ON: yellow knob */
  transition: transform 0.15s;
}

/* OFF knob → dark blue so it reads against the plus1 track */
.ptoggle-row.off .toggle-thumb { background: var(--bg2); }

/* ON = knob 7px from right: (46 - 20 - 7) - 7 = 12px translate */
.toggle-sw input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(12px);
}

/* ── INTRO ACTIONS (JOGAR + skip) ── */
.intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  gap: 0.5rem;
}

#skip-ob-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.6rem 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── ONBOARDING ── */
.ob-icon {
  font-size: 2.5rem;
}

.ob-question {
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 1.35;
}

.ob-note-count {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--plus2);
  text-align: center;
  line-height: 1;
}

.ob-adj-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.ob-adj-row .ob-adj {
  flex: 1;
  width: auto;
  padding: 0.8rem 0;
  font-size: 1.1rem;
}

#ob-piano {
  width: 100%;
}