/* Oficia REBT · By Bioclima Formación — estilo común de los juegos.
   © Dr. Sergio Buedo Martínez · Bioclima Formación. Todos los derechos reservados. */
:root{
  --fondo:#0b1220; --fondo2:#111a2e; --tarjeta:#16223b; --borde:#26365a;
  --texto:#e8eefc; --suave:#9fb0d0; --acento:#ffb020; --acento2:#38bdf8;
  --bien:#22c55e; --mal:#ef4444; --aviso:#f59e0b;
  --fase-marron:#8b5a2b; --fase-negro:#1b1b1b; --fase-gris:#8a8f98; --neutro:#2563eb; --tierra:#16a34a; --defecto:#e11d8f;
  --radio:14px; --sombra:0 10px 30px rgba(0,0,0,.35);
  --letra:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--letra);font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
a{color:var(--acento2)}
button{font:inherit;cursor:pointer;min-height:44px;border-radius:10px;border:1px solid var(--borde);background:var(--tarjeta);color:var(--texto);padding:.55rem 1rem;transition:transform .08s,background .2s,border-color .2s}
button:hover{border-color:var(--acento2)}
button:active{transform:scale(.97)}
button.prin{background:linear-gradient(180deg,#ffc247,#f59e0b);color:#1a1205;border:0;font-weight:700}
button.prin:hover{filter:brightness(1.06)}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--acento2);outline-offset:2px}

/* Barra superior con la marca */
.of-barra{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:rgba(11,18,32,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.of-marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--texto)}
.of-marca img{height:30px;width:auto;border-radius:6px;background:#fff;padding:2px 6px}
.of-marca b{font-size:1rem;letter-spacing:.02em}
.of-marca small{display:block;font-size:.72rem;color:var(--suave);line-height:1.1}
.of-barra .of-titulo{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-xp{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--suave)}
.of-xp .nivel{background:var(--acento);color:#1a1205;font-weight:800;border-radius:999px;padding:.1rem .55rem}
.of-xp .tubo{width:90px;height:8px;border-radius:99px;background:#22314f;overflow:hidden}
.of-xp .tubo i{display:block;height:100%;background:linear-gradient(90deg,var(--acento2),var(--acento));width:0;transition:width .5s}
.of-volver{min-height:44px;padding:.4rem .8rem}
.of-sonido{min-width:44px;padding:.4rem}

/* Contenedor y tarjetas */
.of-pagina{max-width:1180px;margin:0 auto;padding:1rem}
.of-tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:1rem;box-shadow:var(--sombra)}
.of-pie{max-width:1180px;margin:2rem auto 1rem;padding:0 1rem;color:var(--suave);font-size:.78rem;text-align:center}
.of-pie img{height:22px;vertical-align:middle;margin:0 .3rem;background:#fff;border-radius:4px;padding:1px 4px}

/* Avisos, chispas y confeti */
.of-aviso{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(30px);opacity:0;z-index:99;background:#0f1a30;border:1px solid var(--borde);border-left:5px solid var(--acento2);padding:.7rem 1rem;border-radius:12px;box-shadow:var(--sombra);max-width:min(560px,92vw);transition:all .25s}
.of-aviso.ver{opacity:1;transform:translateX(-50%) translateY(0)}
.of-aviso.bien{border-left-color:var(--bien)} .of-aviso.mal{border-left-color:var(--mal)}
.of-xpflota{position:fixed;z-index:98;pointer-events:none;font-weight:800;color:var(--acento);text-shadow:0 2px 8px rgba(0,0,0,.6);animation:of-sube 1s ease-out forwards}
@keyframes of-sube{to{transform:translateY(-60px);opacity:0}}
.of-confeti{position:fixed;inset:0;pointer-events:none;z-index:97}
.of-sacude{animation:of-sacude .35s}
@keyframes of-sacude{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* Explicación tras cada jugada */
.of-expl{border-radius:12px;padding:.8rem 1rem;margin:.6rem 0;background:#0f1a30;border:1px solid var(--borde)}
.of-expl.bien{border-color:rgba(34,197,94,.6)} .of-expl.mal{border-color:rgba(239,68,68,.6)}
.of-expl .norma{display:inline-block;margin-top:.35rem;font-size:.8rem;color:var(--acento2)}

/* Pantalla de resultado */
.of-final{text-align:center}
.of-final .estrellas{font-size:2.4rem;letter-spacing:.3rem;color:var(--acento)}
.of-final .nota{font-size:3rem;font-weight:800}

.of-xp .nivel,.of-xp span{white-space:nowrap}
.of-volver{white-space:nowrap}
@media (max-width:640px){
  .of-marca small,.of-xp .tubo,.of-barra .of-titulo{display:none}
  .of-marca{flex:1}
  .of-xp{font-size:.78rem;gap:.35rem}
  .of-pagina{padding:.75rem}
  .of-barra{gap:.5rem;padding:.4rem .6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}