/* Juegos de las misiones · Sistemas Operativos Lab 6°
   Mismo estilo que los juegos de Revolucion Informatica 9° y Conectados 7°.
   No toca /assets/styles.css */
.jg{--azul:#12345b;--azul2:#1b4e86;--teal:#17a2a2;--verde:#3fae6a;--rojo:#d9534f;--ambar:#e8a13a;--morado:#7a5ab5;--oro:#f2b705;
    max-width:600px;margin:14px auto 0;padding:0 4px 30px;position:relative}
.jg *{box-sizing:border-box}

/* ---- marcador ---- */
.jg-marcador{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:linear-gradient(135deg,#0d2542,#1b4e86);color:#fff;border-radius:14px;padding:10px 12px;margin-bottom:10px}
.jg-vidas{font-size:1.3rem;letter-spacing:3px;line-height:1;color:#ff6b81}
.jg-vidas .off{opacity:.22}
.jg-vidas.late{animation:late .5s ease}
@keyframes late{0%,100%{transform:scale(1)}40%{transform:scale(1.35)}}
.jg-dato{text-align:center;font-size:.6rem;letter-spacing:.12em;opacity:.78}
.jg-dato b{display:block;font-size:1.15rem;letter-spacing:0;opacity:1}
.jg-fuego{color:var(--ambar)}
.jg-son{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:9px;width:36px;height:36px;
  font-size:1.05rem;cursor:pointer;flex:0 0 36px;line-height:1}
.jg-son:active{transform:scale(.92)}
.jg-son.mudo{opacity:.5}

/* ---- avance ---- */
.jg-avance{display:flex;gap:5px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.jg-avance span{width:16px;height:16px;border-radius:50%;background:#dde5ec;border:1px solid #c3d0db;transition:transform .2s}
.jg-avance span.bien{background:var(--verde);border-color:#2f8d53}
.jg-avance span.mal{background:var(--rojo);border-color:#b23c39}
.jg-avance span.ahora{transform:scale(1.4);box-shadow:0 0 0 2px var(--azul2)}

/* ---- VILLAIA ---- */
.jg-villaia{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px;min-height:96px}
.jg-villaia svg{width:80px;height:80px;flex:0 0 80px;animation:jgFlota 3s ease-in-out infinite}
@keyframes jgFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.jg-globo{background:#fff;border:2px solid var(--teal);border-radius:14px 14px 14px 2px;
  padding:10px 13px;font-size:.92rem;line-height:1.4;flex:1;color:#22323f;animation:jgEntra .25s ease}
@keyframes jgEntra{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.jg-globo b{color:var(--azul)}

/* ---- tiempo ---- */
.jg-tiempo{height:10px;background:#dde5ec;border-radius:99px;overflow:hidden;margin-bottom:12px}
.jg-tiempo i{display:block;height:100%;width:100%;background:var(--verde);transition:width .1s linear}
.jg-tiempo.poco i{background:var(--ambar)}
.jg-tiempo.nada i{background:var(--rojo);animation:jgPalpita .4s infinite}
@keyframes jgPalpita{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- tarjeta ---- */
.jg-pista{text-align:center;font-size:.68rem;letter-spacing:.14em;color:#7c8b98;margin:0 0 6px}
.jg-tarjeta{background:#fff;border:1px solid #d2dde6;border-left:7px solid var(--teal);border-radius:14px;
  padding:20px 18px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-size:1.06rem;line-height:1.5;color:#22323f;box-shadow:0 10px 26px rgba(13,37,66,.13);animation:jgLlega .3s ease}
.jg-tarjeta .jg-emoji{font-size:2.3rem;line-height:1;margin-bottom:8px}
.jg-tarjeta.archivo{font-family:Consolas,"Courier New",monospace;font-size:1.15rem;font-weight:700;color:#12345b}
@keyframes jgLlega{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.jg-tarjeta.vuela{animation:jgVuela .5s ease forwards}
@keyframes jgVuela{to{opacity:0;transform:translateY(120px) scale(.5)}}
.jg-tarjeta.tiembla{animation:jgTiembla .4s}
@keyframes jgTiembla{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}

/* ---- canastas (botones de colores) ---- */
.jg-canastas{display:grid;gap:9px;margin-top:16px}
.jg-canastas.n2{grid-template-columns:1fr 1fr}
.jg-canastas.n3{grid-template-columns:1fr 1fr 1fr}
.jg-canastas.n4{grid-template-columns:1fr 1fr 1fr 1fr}
.jg-canastas button{border:0;border-radius:14px;padding:15px 5px 12px;color:#fff;cursor:pointer;
  font-weight:800;font-size:.82rem;letter-spacing:.03em;line-height:1.2;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.jg-canastas button:active{transform:translateY(3px);box-shadow:none}
.jg-canastas button:disabled{opacity:.45;box-shadow:none;cursor:default}
.jg-canastas button.correcta{opacity:1;outline:3px solid #22323f;outline-offset:2px}
.jg-canastas .cuenta{display:block;font-size:1.35rem;margin-top:5px;font-weight:800}
.jg-canastas button.recibe{animation:jgRecibe .45s ease}
@keyframes jgRecibe{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}}

/* ---- opciones (una respuesta entre varias) ---- */
.jg-opciones{display:grid;gap:9px;margin-top:16px}
.jg-opciones button{display:flex;align-items:center;gap:10px;text-align:left;border:2px solid #cfdbe5;background:#fff;color:#22323f;
  border-radius:13px;padding:13px 14px;font-size:.96rem;line-height:1.35;cursor:pointer;box-shadow:0 3px 0 #cfdbe5}
.jg-opciones button .letra{flex:0 0 30px;height:30px;border-radius:50%;background:var(--azul2);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:.85rem}
.jg-opciones button:hover:not(:disabled){border-color:var(--teal)}
.jg-opciones button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.jg-opciones button:disabled{cursor:default;opacity:.55}
.jg-opciones button.bien{opacity:1;border-color:var(--verde);background:#eaf7ef;box-shadow:0 3px 0 #9fd6b3}
.jg-opciones button.bien .letra{background:var(--verde)}
.jg-opciones button.mal{opacity:1;border-color:var(--rojo);background:#fdecec;box-shadow:0 3px 0 #efb1af}
.jg-opciones button.mal .letra{background:var(--rojo)}

/* ---- efectos ---- */
.jg-flash{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;z-index:50}
.jg-flash.ok{background:radial-gradient(circle,rgba(63,174,106,.05),rgba(63,174,106,.36));opacity:1}
.jg-flash.mal{background:radial-gradient(circle,rgba(217,83,79,.05),rgba(217,83,79,.36));opacity:1}
.jg-suma{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-size:2rem;font-weight:800;
  color:var(--verde);text-shadow:0 2px 6px rgba(0,0,0,.2);pointer-events:none;animation:jgSube 1s ease forwards;z-index:40}
@keyframes jgSube{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
.jg-papel{position:fixed;top:-14px;width:9px;height:14px;z-index:45;pointer-events:none;animation:jgCae linear forwards}
@keyframes jgCae{to{transform:translateY(105vh) rotate(760deg);opacity:.15}}

/* ---- portada ---- */
.jg-inicio{background:linear-gradient(160deg,#0d2542,#1b4e86);color:#fff;border-radius:18px;padding:26px 20px;text-align:center;position:relative}
.jg-inicio .jg-son{position:absolute;top:14px;right:14px}
.jg-inicio h3{margin:10px 0 6px;font-size:1.32rem;color:#fff}
.jg-inicio p{font-size:.9rem;line-height:1.5;opacity:.93;margin:0 auto 8px;max-width:400px;color:#fff}
.jg-etiquetas{display:flex;justify-content:center;gap:8px;margin:14px 0 4px;flex-wrap:wrap}
.jg-etiquetas span{border-radius:9px;padding:7px 12px;font-size:.72rem;font-weight:800;letter-spacing:.05em;color:#fff}
.jg-reglas{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:14px 0 18px;font-size:.7rem;letter-spacing:.06em}
.jg-reglas div b{display:block;font-size:1.3rem;letter-spacing:0}
.jg-nota{font-size:.84rem;background:rgba(255,255,255,.14);border-radius:10px;padding:10px 12px}
.jg-jugar{background:var(--ambar);color:#22303a;border:0;border-radius:13px;padding:16px 34px;
  font-size:1.02rem;font-weight:800;letter-spacing:.05em;cursor:pointer;box-shadow:0 4px 0 #b97c22}
.jg-jugar:active{transform:translateY(3px);box-shadow:none}

/* ---- final ---- */
.jg-fin{background:#fff;border:1px solid #d2dde6;border-radius:16px;padding:24px 18px;text-align:center;animation:jgLlega .35s ease}
.jg-fin h2{margin:8px 0 4px;color:var(--azul)}
.jg-medalla{font-size:3.2rem;line-height:1;animation:jgGira .8s ease}
@keyframes jgGira{from{transform:rotate(-25deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
.jg-puntos{font-size:2.9rem;font-weight:800;color:var(--teal);line-height:1}
.jg-estrellas{font-size:1.5rem;color:var(--oro);letter-spacing:4px;margin:6px 0}
.jg-estrellas .off{opacity:.22}
.jg-sub{font-size:.86rem;color:#7c8b98;margin:2px 0 14px}
.jg-aviso{background:#fff6e6;border:1px solid #f0d08a;border-radius:11px;padding:10px 12px;font-size:.84rem;color:#7a5a12;margin:0 0 14px}
.jg-acc{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.jg-acc a,.jg-acc button{border:0;border-radius:11px;padding:13px 18px;font-weight:700;font-size:.86rem;cursor:pointer;text-decoration:none;display:inline-block}
.jg-otra{background:#e6edf3;color:#12345b}
.jg-volver{background:var(--azul);color:#fff}
.jg-repaso{text-align:left;margin:10px 0 0;font-size:.84rem;color:#4a5d6c;line-height:1.55;padding-left:18px}
.jg-repaso li{margin-bottom:7px}

@media(max-width:520px){
  .jg{margin-top:18px}
  .jg-canastas.n4{grid-template-columns:1fr 1fr}
  .jg-canastas.n3{grid-template-columns:1fr 1fr 1fr}
  .jg-marcador{padding:8px 9px;gap:5px}
  .jg-vidas{font-size:1rem;letter-spacing:1px;white-space:nowrap}
  .jg-dato{font-size:.52rem;letter-spacing:.06em}
  .jg-dato b{font-size:1rem}
  .jg-son{width:32px;height:32px;flex:0 0 32px;font-size:.95rem}
}
@media(max-width:380px){
  .jg-villaia svg{width:62px;height:62px;flex:0 0 62px}
  .jg-canastas button{font-size:.72rem;padding:13px 3px 10px}
  .jg-tarjeta{font-size:.96rem;padding:16px 12px}
}
@media(prefers-reduced-motion:reduce){
  .jg *,.jg-papel{animation:none!important;transition:none!important}
}