/* v7 · "Tu día se arma": anillo 3D que se llena al registrar. Prefijo l3 para no chocar. */
.ngs-live3d { overflow: clip; }
.l3-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.l3-copy { display: grid; gap: 20px; }
.l3-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.l3-chip {
  --c: var(--orange);
  appearance: none; border: 1.5px solid rgba(16,21,35,.14); background: #fff; color: var(--ink);
  min-height: 46px; padding: 0 18px 0 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; font: 800 .95rem/1 inherit; font-family: inherit;
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.l3-chip i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.l3-chip[data-l3-act="water"] { --c: var(--cyan); }
.l3-chip[data-l3-act="move"] { --c: var(--green); }
.l3-chip:hover { transform: translateY(-2px); }
.l3-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.l3-chip[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.l3-reset { background: transparent; border-style: dashed; color: var(--muted); }
.l3-coach {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  padding: 14px 18px 14px 14px; border-radius: 22px; background: rgba(255,255,255,.9); border: 1px solid #dce7f3; min-height: 96px;
}
.l3-coach img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; background: #f1e9ff; }
.l3-coach p { font-weight: 650; line-height: 1.4; color: var(--ink); transition: opacity .3s; }
.l3-coach p.is-swap { opacity: 0; }
.l3-note { font-size: .82rem; color: var(--muted); }
.l3-stage { position: relative; aspect-ratio: 1 / .92; min-height: 340px; }
.l3-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.l3-score { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.l3-score strong { font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: 1; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.l3-score span { font-weight: 700; color: var(--muted); font-size: .95rem; }
.l3-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: .85rem; font-weight: 750; }
.l3-legend li { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.85); border-radius: 999px; padding: 6px 12px; }
.l3-legend i { width: 10px; height: 10px; border-radius: 50%; }
.l3-legend b { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .l3-grid { grid-template-columns: 1fr; }
  .l3-copy { display: contents; }
  .l3-copy > h2 { order: 1; } .l3-copy > .ngs-lead { order: 2; } .l3-stage { order: 3; } .l3-copy > .l3-chips { order: 4; } .l3-copy > .l3-coach { order: 5; } .l3-copy > .l3-note { order: 6; }
  .l3-grid { gap: 20px; }
  .l3-stage { aspect-ratio: auto; min-height: 0; display: grid; gap: 12px; }
  .l3-stage canvas { position: relative; height: auto; aspect-ratio: 1 / .9; }
  .l3-score { inset: 0 0 auto 0; height: calc(min(100vw - 48px, 560px) * .9); }
  .l3-score span { font-size: .78rem; max-width: 9ch; margin: 2px auto 0; line-height: 1.15; }
  .l3-legend { position: static; }
}
html.live-on .ngs-live3d { background: rgba(255,255,255,.34); }
.l3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.l3-ask { border-style: solid; background: #fff; font-weight: 700; }
.l3-ask[aria-pressed="true"] { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, #fff); }
.l3-ask i { display: none; }

.l3-label { font-weight: 800; font-size: .95rem; color: var(--ink); margin: 2px 0 -8px; }
.l3-link { appearance: none; background: none; border: 0; padding: 0 0 0 6px; font: inherit; font-weight: 700; color: var(--orange-dark, #b45105); text-decoration: underline; cursor: pointer; }
.l3-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }