:root{
  --bg:#070a14;
  --panel:#0b1224;
  --panel2:#0a1833;
  --line:rgba(255,255,255,.10);
  --text:#e9f2ff;
  --muted:rgba(233,242,255,.72);
  --accent:#6aa9ff;
  --accent2:#7c5cff;
  --good:#2bd576;
  --warn:#ffcc3a;
  --bad:#ff4d6d;
  --shadow: 0 18px 54px rgba(0,0,0,.52);
  --r:20px;
}

body{
  background: var(--bg);
  color: var(--text);
}

.bg-ambient{
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 540px at 12% -10%, rgba(106,169,255,.22), transparent 60%),
    radial-gradient(820px 520px at 110% 0%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(760px 520px at 60% 110%, rgba(43,213,118,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 22%),
    var(--bg);
}

.gh-navbar{
  position: sticky;
  top: 10px;
  z-index: 10;
  margin: 10px 12px 0;
}

.gh-nav-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gh-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}
.gh-brand b{display:block; font-size: 14px; letter-spacing:.2px}
.gh-brand small{display:block; font-size: 12px; color: var(--muted); margin-top: 2px}

.gh-logo{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06)),
    linear-gradient(135deg, rgba(106,169,255,.75), rgba(124,92,255,.65));
}

.gh-nav-actions{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ===== Mobile nav ===== */
.gh-nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gh-nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(233,242,255,.85);
}

.gh-mobile-nav{
  display:none;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(148,163,184,.12);
  background: linear-gradient(180deg, rgba(9, 16, 32, .65), rgba(9, 16, 32, .35));
}
.gh-mobile-nav .gh-mobile-links{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}
.gh-mobile-nav .gh-link{
  font-size: 14px;
}

@media(max-width: 780px){
  .gh-nav-actions{ display:none; }
  .gh-nav-toggle{ display:flex; }
  .gh-mobile-nav{ display:block; }
  body.gh-nav-open .gh-mobile-nav{ display:block; }
}

/* When closed on mobile */
@media(max-width: 780px){
  body:not(.gh-nav-open) .gh-mobile-nav{ display:none; }
}

.gh-link{
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.gh-link:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}

.gh-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: var(--text);
  text-decoration: none;
  font-weight: 850;
  font-size: 12px;
  transition: .14s transform, .14s border-color, .14s opacity;
}
.gh-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
}
.gh-btn.primary{
  border-color: rgba(106,169,255,.55);
  background: linear-gradient(135deg, rgba(106,169,255,.32), rgba(124,92,255,.22));
}

.gh-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 12px;
}
.gh-chip small{color: var(--muted); font-weight: 900; letter-spacing:.5px}
.dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(43,213,118,.12);
}

.gh-card{
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gh-card .gh-card-hd{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.16), transparent);
}
.gh-card .gh-card-hd h1,
.gh-card .gh-card-hd h2,
.gh-card .gh-card-hd h3{margin:0;font-size: 14px}
.gh-card .gh-card-hd p{margin:4px 0 0; font-size: 12px; color: var(--muted)}
.gh-card .gh-card-bd{padding: 14px 16px}

.gh-footer{
  margin-top: 28px;
  padding: 16px 0 24px;
  color: var(--muted);
}
.gh-footer-inner{
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.gh-footer b{color: var(--text)}
.muted{color: var(--muted) !important}

.gh-kpi{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
@media(max-width: 720px){
  .gh-kpi{grid-template-columns:1fr}
}
.gh-kpi .box{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}
.gh-kpi .box b{display:block; font-size: 18px}
.gh-kpi .box span{display:block; margin-top: 2px; font-size: 11px; color: var(--muted)}

.gh-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.gh-badge.good{border-color: rgba(43,213,118,.35)}
.gh-badge.bad{border-color: rgba(255,77,109,.35)}
.gh-badge.warn{border-color: rgba(255,204,58,.35)}

.gh-item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.gh-item b{display:block; font-size: 13px}
.gh-item small{display:block; margin-top:4px; color: var(--muted); line-height:1.35}
.gh-mini{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:center;
}

.gh-iconbtn{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--text);
}
.gh-iconbtn:hover{border-color: rgba(255,255,255,.22)}

.gh-hr{
  height: 1px;
  background: var(--line);
  margin: 12px 0;
}

/* =====================
   Juegos / Motores
   ===================== */
.gh-game{
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  overflow:hidden;
}
.gh-game-hd{
  padding: 12px 14px;
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.gh-game-hd b{display:block}
.gh-game-hd small{display:block; margin-top:4px; color: var(--muted)}
.gh-game-bd{padding: 14px}

.gh-hotspot-wrap{display:grid; grid-template-columns: 1.4fr .6fr; gap: 12px}
.gh-hotspot-scene{
  position:relative;
  width: 100%;
  min-height: 360px;
  border-radius: 16px;
  border:1px solid var(--line);
  background-size: cover;
  background-position:center;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.gh-hotspot{
  position:absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 0 6px rgba(124,92,255,.10);
}
.gh-hotspot:hover{box-shadow: 0 0 0 9px rgba(124,92,255,.18)}
.gh-hotspot.good{border-color: rgba(43,213,118,.9); box-shadow: 0 0 0 10px rgba(43,213,118,.12)}
.gh-hotspot.bad{border-color: rgba(255,77,109,.9); box-shadow: 0 0 0 10px rgba(255,77,109,.10)}
.gh-game-side{display:flex; flex-direction: column}

.gh-quiz-opts{display:grid; gap:10px}
.gh-quiz-opt{
  text-align:left;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.gh-quiz-opt:hover{border-color: rgba(255,255,255,.22)}
.gh-quiz-opt.good{border-color: rgba(43,213,118,.45)}
.gh-quiz-opt.bad{border-color: rgba(255,77,109,.45)}

.gh-decision-opts{display:grid; gap:10px}

.gh-seq-list{list-style:none; padding:0; margin: 10px 0 0}
.gh-seq-item{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  margin-bottom:10px;
  cursor: grab;
  user-select:none;
}
.gh-seq-item.drag{opacity:.6}

.gh-root-grid{display:grid; gap:10px; margin-top:10px}
.gh-root-opt{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.gh-root-opt input{margin-top: 4px}
.gh-root-opt b{display:block; font-size: 13px}
.gh-root-opt small{display:block; color: var(--muted); margin-top:4px; line-height:1.3}

@media (max-width: 992px){
  .gh-hotspot-wrap{grid-template-columns: 1fr}
  .gh-hotspot-scene{min-height: 320px}
}