/* Nivel en el perfil. El widget es una tecla (mismo borde inferior que los botones) con el número del nivel en un cuadrado
   del color del perfil; la ventana repite ese número y lista lo que viene. Los colores salen de data-accent. */

/* widget de la cabecera: una chapa chica al lado del nombre, como el sello de verificado */
#pf-name { display: contents; }
.lv-chip { display: inline-flex; align-items: baseline; gap: .35em; margin-left: .1rem; padding: .2rem .6rem; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 3px; box-shadow: none; color: var(--ink); font: 600 .74rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .12s, border-color .12s; }
.lv-chip i { font-style: normal; font-weight: 500; opacity: .75; }
.lv-chip b { font-weight: 600; }
.lv-chip:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); border-color: var(--ink); }
.lv-chip:active { transform: none; box-shadow: none; }
.lv-chip[hidden] { display: none; }
.lv-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.lv-key { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; background: var(--accent); border-radius: 4px; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); color: var(--on-accent); font: 500 1.55rem/1 var(--mono); letter-spacing: -.04em; }
.lv-key[data-digits="3"] { font-size: 1.2rem; }
.lv-key[data-digits="4"] { font-size: .95rem; }

/* ventana */
dialog.wide.narrow { width: min(96vw, 600px); }
.lvd { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lvd-head { display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 1.4rem 1rem 1.9rem; }
.lv-key.xl { flex: none; width: 4.6rem; height: 4.6rem; border-radius: 5px; box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000); font-size: 2.3rem; }
.lv-key.xl[data-digits="3"] { font-size: 1.8rem; }
.lv-key.xl[data-digits="4"] { font-size: 1.4rem; }
.lvd-who { flex: 1; min-width: 0; }
.lvd-who h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.03em; overflow-wrap: anywhere; }
.lvd-who .note { min-height: 0; margin: .15rem 0 0; font: .78rem var(--mono); }
.lvd-head .ghost { align-self: flex-start; }

.lvd-meter { padding: 0 1.9rem 1.2rem; }
.lvd-ends { display: flex; justify-content: space-between; margin-bottom: .4rem; color: var(--muted); font: .72rem var(--mono); }
.lvd-track { height: 8px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%), var(--bg-deep); border: 1px solid var(--line); }
.lvd-track i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .5s ease-out; }
.lvd-meter .note { min-height: 0; margin: .6rem 0 0; font-size: .85rem; }

.lvd-boost { margin: 0 1.9rem 1.2rem; padding: .6rem .85rem; border: 1px dashed var(--ink); border-radius: var(--r); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .85rem; line-height: 1.5; }
.lvd-boost[hidden] { display: none; }
.lvd-boost b { color: var(--ink); font-weight: 600; }

.lvd-body { flex: 1; min-height: 0; padding: .2rem 1.9rem 1.6rem; overflow: auto; border-top: 1px solid var(--line); }
.lvd-shelf h3 { display: flex; align-items: baseline; gap: .7rem; margin: 1.4rem 0 .7rem; }
.lvd-shelf h3::before { content: ""; flex: none; align-self: center; width: .45rem; height: .45rem; background: var(--accent); }
.lvd-shelf h3 small { color: var(--muted); font: .72rem var(--mono); letter-spacing: 0; text-transform: none; }
.lvd-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.lvd-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .55rem .8rem .55rem .55rem; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r); }
.lvd-row .lv-key.sm { grid-area: auto; width: 2.1rem; height: 2.1rem; border-radius: 3px; box-shadow: none; font-size: 1rem; }
.lvd-row .lv-key.sm[data-digits="3"] { font-size: .82rem; }
.lvd-row .lv-key.sm[data-digits="4"] { font-size: .66rem; }
.lvd-name { display: grid; min-width: 0; }
.lvd-name b { font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.lvd-name small, .lvd-xp small { color: var(--muted); font: .7rem/1.4 var(--mono); }
.lvd-xp { display: grid; justify-items: end; text-align: right; }
.lvd-xp b { font: 500 .85rem var(--mono); }
.lvd-row.now { border-color: var(--accent); }
.lvd-row.now .lvd-name small { color: var(--ink); }
.lvd-row.next .lv-key.sm, .lvd-row.done .lv-key.sm { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.lvd-row.done .lv-key.sm { border-color: var(--ink); color: var(--ink); }
.lvd-row.next:not(.now) .lvd-name b { color: var(--muted); }

/* en el inicio */
.lv-boost { margin: .6rem 0 0; padding-left: .6rem; border-left: 2px solid var(--accent); color: var(--muted); font: .72rem/1.5 var(--mono); }
.lv-boost[hidden] { display: none; }

@media (max-width: 560px) {
  .lvd-head { padding: 1.1rem 1rem .8rem 1.2rem; gap: .8rem; }
  .lv-key.xl { width: 3.8rem; height: 3.8rem; font-size: 1.9rem; }
  .lvd-meter { padding-inline: 1.2rem; }
  .lvd-boost { margin-inline: 1.2rem; }
  .lvd-body { padding-inline: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-key, .lvd-track i { transition: none; }
}

.lvd-hint { margin: .6rem 0 0; font: .74rem var(--mono); color: var(--muted); }

/* premios del camino para reclamar */
.lvd-msg { margin: 0 0 .6rem; padding: .45rem .7rem; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: .85rem; line-height: 1.5; }
.lvd-msg.bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); }