/* ESTILOS BASE (APLICADOS A TODOS LOS JUEGOS) */
.foga-app * { box-sizing:border-box; }

.foga-app {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e8edf3;
}

.foga-input { background-color: #000 !important; }
.foga-app { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background-color: rgba(39, 46, 67, 1) !important; }
.foga-screen { width:min(1050px,100%); display:none; }
.foga-screen.active { display:block; }
.foga-card { background:linear-gradient(145deg,#121720,#0e1219); border:1px solid #28303c; border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.38); }
.foga-start { padding:54px; text-align:center; }
.foga-logo { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 10px; /* Espacio entre FORENSIC y el span */
  line-height: 1; 
  font-weight: 900; 
  letter-spacing: .16em; 
  font-size: 34px; 
  color: #e8edf3; 
  margin: 0 0 15px 0; /* Margen inferior para separarlo del kicker */
}
.foga-logo span { 
  color: #54e38e; 
}
.foga-kicker { color:#fff; letter-spacing:.2em; text-transform:uppercase; font-size:12px; margin-top:8px; }
.foga-start p { max-width:620px; margin:24px auto 34px; color:#aab4c1; line-height:1.65; }

.foga-btn { border:1px solid #334050; background:#1b222d; color:#e8edf3; padding:13px 20px; border-radius:11px; cursor:pointer; font-weight:800; transition:.15s transform,.15s background,.15s border-color; user-select:none; }
.foga-btn:hover { transform:translateY(-2px); background:#232c39; border-color:#46566a; }
.foga-btn.primary { background:#54e38e; color:#07120c; border-color:#339b5e; } /* Borde más oscuro que el fondo */
.foga-btn.primary:hover { background:#71eea4; border-color:#54e38e; }

.foga-high { margin-top:26px; color:#fff; font-size:14px; }
.foga-high b { color:#ffd166; }
.foga-login-box { display:flex; gap:12px; justify-content:center; margin:20px auto; max-width:450px; flex-wrap:wrap; }
.foga-login-box input { flex:1; min-width:180px; background:#0d1015; border:1px solid #28303c; color:#e8edf3; padding:12px; border-radius:8px; font-family:inherit; outline:none; }
.foga-login-box input:focus { border-color:#54e38e; }
.foga-ranking-box { margin-top:35px; text-align:left; max-width:500px; margin-left:auto; margin-right:auto; background:#0a0d12; border:1px solid #28303c; border-radius:10px; padding:15px; max-height:220px; overflow-y:auto; }
.foga-ranking-box h3 { text-align:center; color:#fff; font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 15px 0; }
.rank-item { display:grid; grid-template-columns:30px 1fr auto; gap:10px; padding:8px 0; border-bottom:1px solid #1a1f28; font-size:13px; align-items:center; }
.rank-item:last-child { border-bottom:none; }
.rank-item .pos { color:#fff; font-weight:bold; text-align:right; }
.rank-item .usr { color:#54e38e; font-weight:bold; }
.rank-item .web { color:#fff; font-size:11px; display:block; margin-top:2px; }
.rank-item .stats { display:flex; gap:8px; font-size:12px; justify-content:flex-end; }
.rank-item .stats span { padding:2px 6px; border-radius:4px; background:#1a1f28; }
.stat-c { color:#54e38e; } .stat-w { color:#ff5f67; } .stat-t { color:#67b7ff; }

.foga-hud { display:grid; grid-template-columns:1fr repeat(4,auto); gap:10px; align-items:center; margin-bottom:12px; }
.foga-brand { font-weight:900; letter-spacing:.12em; font-size: 18px; color: #ffffff; } /* Color base blanco, sobrescrito abajo */
.foga-stat { background:#11151d; border:1px solid #28303c; border-radius:10px; padding:9px 13px; font-size:12px; color:#fff; cursor: default; }
.foga-stat b { display:block; color:#e8edf3; font-size:17px; }

.foga-timer { min-width:78px; text-align:center; }
.foga-game { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.foga-panel { background:#11151d; border:1px solid #28303c; border-radius:16px; overflow:hidden; }
.foga-panel-head { padding:11px 14px; border-bottom:1px solid #28303c; background:#151a23; display:flex; justify-content:space-between; color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.foga-preview { padding:22px; min-height:240px; background:#f3f5f7; color:#17202b; position:relative; }
.foga-code { padding:16px; background:#0a0d12; min-height:240px; overflow:auto; }
.foga-browser { border:1px solid #ccd2d9; border-radius:10px; background:white; overflow:hidden; height:100%; }
.foga-browserbar { height:28px; background:#e6e9ed; border-bottom:1px solid #d2d7dd; display:flex; align-items:center; gap:6px; padding:0 9px; }
.foga-dot { width:7px; height:7px; border-radius:50%; background:#aeb6c0; }
.foga-webpage { padding:25px; min-height:285px; }
.foga-webpage h1 { margin:0 0 12px; font-size:27px; color: #7c7c7c; }
.foga-webpage p { line-height:1.5; color:#ffffff; font-weight: 400; }
.hero-img { height:95px; border-radius:10px; background:linear-gradient(135deg,#dfe6ed,#b9c6d3); display:flex; align-items:center; justify-content:center; color:#778594; font-weight:800; margin:18px 0; }
.fake-btn { display:inline-block; background:#202a35; color:#fff; padding:10px 15px; border-radius:7px; font-size:13px; }

.tag { color:#6fb7ff; } .attr { color:#ffd166; } .str { color:#8be9a8; }
.foga-pre { margin:0; background: #000; color:#d8e0e9; font:13px/1.65 "SFMono-Regular",Consolas,monospace; white-space:pre-wrap; }
.foga-question { grid-column:1/-1; padding:14px; margin-top: 10px; }
.foga-question h2 { font-size:18px; margin-top: 0 !important; margin-bottom: 0 !important; color: aqua; text-align: center; }
.foga-options { display:grid; gap:9px; }
.foga-option { width:100%; text-align:left; background:#171d26; border:1px solid #2d3744; color:#dce4ec; border-radius:10px; padding:13px; cursor:pointer; transition:.12s; user-select:none; font-family:inherit; }
.foga-option:hover { border-color:#52647a; background:#1d2530; }
.foga-option:disabled { cursor:default; }
.foga-option.correct { border-color:#54e38e; background:rgba(84,227,142,.12); }
.foga-option.wrong { border-color:#ff5f67; background:rgba(255,95,103,.12); }
.foga-feedback { min-height:22px; margin-top:10px; font-size:13px; color:#fff; }
.foga-feedback.good { color:#54e38e; } .foga-feedback.bad { color:#ff5f67; }
.shake { animation.foga-shake .28s linear; }
@keyframes.foga-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }


/* =========================================
   ESTILOS PERSONALIZADOS POR JUEGO
   ========================================= */

/* 1. FORENSIC HTML (Naranja / Rojo - Estilo HTML5) */
#foga-app-html .foga-logo span { color: #e44d26 !important; }
#foga-app-html .foga-brand { color: #f16529; }
#foga-app-html .foga-btn.primary { background: #e44d26; border-color: #b33a1b; color: #ffffff; }
#foga-app-html .foga-btn.primary:hover { background: #f16529; border-color: #e44d26; }
#foga-app-html .foga-option.correct { border-color: #e44d26; background: rgba(228, 77, 38, 0.15); color: #ffab91; }

/* 2. FORENSIC CSS (Azul Eléctrico - Estilo CSS3) */
#foga-app-css .foga-logo span { color: #2965f1 !important; }
#foga-app-css .foga-brand { color: #3973f5; }
#foga-app-css .foga-btn.primary { background: #2965f1; border-color: #1c47b3; color: #ffffff; }
#foga-app-css .foga-btn.primary:hover { background: #3973f5; border-color: #2965f1; }
#foga-app-css .foga-option.correct { border-color: #2965f1; background: rgba(41, 101, 241, 0.15); color: #93b4ff; }

/* 3. FORENSIC PHP (Morado / Púrpura - Estilo PHP) */
#foga-app-php .foga-logo span { color: #8993c9 !important; }
#foga-app-php .foga-brand { color: #a3a7d4; }
#foga-app-php .foga-btn.primary { background: #777bb4; border-color: #54547e; color: #ffffff; }
#foga-app-php .foga-btn.primary:hover { background: #8489c2; border-color: #777bb4; }
#foga-app-php .foga-option.correct { border-color: #777bb4; background: rgba(119, 123, 180, 0.15); color: #c2c5e8; }

/* 4. FORENSIC SEO (Verde Esmeralda - Crecimiento / Tráfico) */
#foga-app-seo .foga-logo span { color: #00ba88 !important; }
#foga-app-seo .foga-brand { color: #00cf94; }
#foga-app-seo .foga-btn.primary { background: #00ba88; border-color: #008059; color: #ffffff; }
#foga-app-seo .foga-btn.primary:hover { background: #00cf94; border-color: #00ba88; }
#foga-app-seo .foga-option.correct { border-color: #00ba88; background: rgba(0, 186, 136, 0.15); color: #2ee8b6; }

/* 5. FORENSIC WORDPRESS (Azul WP - Estilo WordPress) */
#foga-app-wp .foga-logo span { color: #21759b !important; }
#foga-app-wp .foga-brand { color: #135e96; }
#foga-app-wp .foga-btn.primary { background: #21759b; border-color: #14526b; color: #ffffff; }
#foga-app-wp .foga-btn.primary:hover { background: #135e96; border-color: #21759b; }
#foga-app-wp .foga-option.correct { border-color: #21759b; background: rgba(33, 117, 155, 0.15); color: #72aee6; }
/* Estilos para los textos integrados en la pantalla */
.foga-page-intro, .foga-cta {
  max-width: 700px;
  margin: 20px auto;
  padding: 0 20px;
  text-align: center;
  line-height: 1.6;
  color: #aab4c1;
}
.foga-page-intro h2, .foga-cta h2 {
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 15px;
}
.foga-page-intro strong, .foga-cta strong { color: #ffffff; }
@media(max-width:760px){
  .foga-app{ padding:10px; align-items:flex-start; } .foga-start{ padding:42px 22px; }
  .foga-hud{ grid-template-columns: repeat(2, 1fr); } .foga-brand{ grid-column:1/-1; }
  .foga-game{ grid-template-columns:1fr; } .foga-question{ grid-column:auto; } .foga-options{ grid-template-columns:1fr; }
  .foga-preview,.foga-code{ min-height:280px; } .foga-webpage{ padding:18px; }
}
.foga-image {
    transition: transform .2s ease-in-out, opacity 1s ease-in-out;
    background-position: center center;
    overflow: hidden;
    background-repeat: no-repeat;
    
    width: 100%;
    max-width: 600px;               
    aspect-ratio: 600 / 338;        
    margin: 0 auto;                 
    
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    -webkit-transform-origin: center bottom !important;
    -ms-transform-origin: center bottom!important;
    -moz-transform-origin: center bottom!important;
    -o-transform-origin: center bottom!important;
    transform-origin: center bottom !important;
    
    position: relative;
}