/* Recta numérica · motor Recta */
.rc {
  --rc-noche: #1B2A5C;
  --rc-noche-2: #121c40;
  --rc-oro: #F5C542;
  --rc-crema: #fff8e8;
  --rc-tinta: #2b2140;
  --rc-mal: #ff7a6b;
  --rc-bien: #7be0a1;
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  background: radial-gradient(120% 80% at 50% 0%, #26397a 0%, var(--rc-noche-2) 70%); color: #fff;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rc * { box-sizing: border-box; }
.rc button { font-family: inherit; }
.rc [hidden] { display: none !important; }
.rc button:focus-visible, .rc .rc-ficha:focus-visible { outline: 3px solid var(--rc-oro); outline-offset: 2px; }

/* Arriba */
.rc-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--rc-noche); border-bottom: 1px solid rgba(245,197,66,.25); min-height: 76px; z-index: 3; }
.rc-casa { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; cursor: pointer; }
.rc-lumi { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(245,197,66,.55)); }
.rc-lumi.rebota { animation: rc-rebote .6s ease; }
.rc-globo { flex: 1; min-width: 0; background: var(--rc-crema); color: var(--rc-tinta); border-radius: 18px; padding: 6px 12px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.rc-globo-txt { font-weight: 800; font-size: clamp(16px, 4.4vw, 24px); line-height: 1.15; }
.rc-globo-sub { font-size: clamp(13px, 1.6vw, 16px); font-weight: 600; opacity: .7; line-height: 1.2; }
.rc-globo-sub:empty { display: none; }
.rc-redondo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; }
.rc-contador { flex: 0 0 auto; font-weight: 800; color: var(--rc-oro); min-width: 34px; text-align: center; font-size: 15px; }
@media (max-width: 420px) { .rc-lumi { display: none; } .rc-redondo { width: 44px; height: 44px; } }

/* Medio: la recta */
.rc-medio { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 4px; }
.rc-contexto { margin: 0 12px 6px; font-size: clamp(15px, 2vw, 19px); text-align: center; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); }
.rc-lienzo { width: 100%; max-width: 980px; margin: 0 auto; height: clamp(170px, 38vh, 320px); }
.rc-svg { display: block; width: 100%; height: 100%; touch-action: none; overflow: visible; cursor: pointer; }
.rc-eje { stroke: var(--rc-crema); stroke-width: 4; stroke-linecap: round; }
.rc-punta { fill: none; stroke: var(--rc-crema); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.rc-raya { stroke: rgba(255,248,232,.65); stroke-width: 2; }
.rc-raya.fuerte { stroke: var(--rc-crema); stroke-width: 3; }
.rc-num { fill: var(--rc-crema); font-size: var(--rc-fs, 15px); font-weight: 800; text-anchor: middle; }
.rc-marca circle { fill: var(--rc-noche-2); stroke: var(--rc-oro); stroke-width: 3; }
.rc-marca-num { fill: var(--rc-oro); font-size: calc(var(--rc-fs, 15px) + 1px); font-weight: 800; text-anchor: middle; }
.rc-marca-num.grande { font-size: calc(var(--rc-fs, 15px) + 7px); }
.rc-marca.cmp circle { fill: var(--rc-oro); }
.rc-flecha { fill: var(--rc-oro); filter: drop-shadow(0 0 6px rgba(245,197,66,.8)); animation: rc-flota 1.6s ease-in-out infinite; }
.rc-banda { fill: rgba(245,197,66,.22); stroke: rgba(245,197,66,.6); stroke-dasharray: 4 4; }
.rc-arco { fill: none; stroke: var(--rc-oro); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: rc-arco .5s ease forwards; }

/* La ficha (la luz que se arrastra) */
.rc-ficha { cursor: grab; }
.rc-ficha .rc-toque { fill: transparent; }
.rc-ficha .rc-luz { fill: var(--rc-oro); filter: drop-shadow(0 0 10px rgba(245,197,66,.9)); transition: r .15s; }
.rc-ficha .rc-brillo { fill: #fff; opacity: .8; }
.rc-ficha.agarrada .rc-luz { r: 18; }
.rc-ficha.muelle { animation: rc-flota 1.8s ease-in-out infinite; }
.rc-ficha.muelle .rc-luz { opacity: .9; }
.rc-muelle-txt { fill: rgba(255,248,232,.75); font-size: 13px; font-weight: 700; }
.rc-palo { stroke: var(--rc-oro); stroke-width: 3; }
.rc-fantasma circle { stroke-width: 3; }
.rc-fantasma.mal circle { fill: rgba(255,122,107,.25); stroke: var(--rc-mal); }
.rc-fantasma.mal .rc-palo { stroke: var(--rc-mal); }
.rc-fantasma.mal .rc-marca-num { fill: var(--rc-mal); }
.rc-fantasma.mal.apaga { opacity: .35; transition: opacity .4s; }
.rc-fantasma.va circle { fill: rgba(245,197,66,.25); stroke: var(--rc-oro); stroke-dasharray: 5 4; animation: rc-late 1s ease-in-out infinite; }
.rc-fantasma.bien circle { fill: var(--rc-oro); stroke: #fff; }
.rc-celebra { animation: rc-salta .5s ease; }

/* Abajo */
.rc-abajo { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rc-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.rc-op { min-height: 60px; border-radius: 18px; border: 0; background: var(--rc-crema); color: var(--rc-tinta); font-size: 24px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.rc-op:active { translate: 0 3px; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.rc-op.mal { background: var(--rc-mal); animation: rc-niega .4s; }
.rc-op.bien { background: var(--rc-bien); }
.rc-op.es { outline: 4px solid var(--rc-oro); animation: rc-late 1s ease-in-out infinite; }
.rc-acciones { display: flex; gap: 10px; width: 100%; max-width: 520px; }
.rc-boton { flex: 1; min-height: 56px; border-radius: 18px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 19px; font-weight: 800; cursor: pointer; }
.rc-boton.oro { background: var(--rc-oro); border-color: var(--rc-oro); color: var(--rc-tinta); box-shadow: 0 5px 0 #b88a00; }
.rc-boton:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* Fin */
.rc-fin { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(18,28,64,.88); padding: 16px; }
.rc-fin-caja { width: 100%; max-width: 420px; text-align: center; background: var(--rc-noche); border: 1px solid rgba(245,197,66,.4); border-radius: 26px; padding: 18px 16px; }
.rc-fin-lumi { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(245,197,66,.7)); }
.rc-fin h2 { margin: 4px 0; color: var(--rc-oro); font-size: 28px; }
.rc-fin p { margin: 0 0 8px; opacity: .85; }
.rc-estrellas { font-size: 40px; letter-spacing: 6px; color: rgba(255,255,255,.2); }
.rc-estrellas .on { color: var(--rc-oro); text-shadow: 0 0 12px rgba(245,197,66,.7); }
.rc-datos { display: flex; justify-content: center; gap: 18px; margin: 8px 0 14px; }
.rc-datos div { display: flex; flex-direction: column; }
.rc-datos b { font-size: 22px; }
.rc-datos span { font-size: 13px; opacity: .7; }
.rc-fin-botones { display: flex; gap: 10px; }

@keyframes rc-rebote { 0%,100% { translate: 0 0; } 40% { translate: 0 -8px; } }
@keyframes rc-flota { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes rc-late { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes rc-salta { 0% { translate: 0 0; } 40% { translate: 0 -10px; } 100% { translate: 0 0; } }
@keyframes rc-arco { to { stroke-dashoffset: 0; } }
@keyframes rc-niega { 0%,100% { translate: 0 0; } 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@media (prefers-reduced-motion: reduce) { .rc *, .rc *::before { animation: none !important; transition: none !important; } .rc-arco { stroke-dashoffset: 0; } }

/* Pantallas grandes: todo centrado, sin estirar la recta de punta a punta */
@media (min-width: 900px) { .rc-top { padding-inline: max(10px, calc((100% - 980px) / 2)); } .rc-op { font-size: 28px; min-height: 68px; } }