/* ===================================================
   Sohail Academy — Shared Theme Tokens
   NOTE: --primary / --accent / --shadow are assumed
   here to match the Numora game's dark palette.
   If your main site already defines these globally,
   delete this :root block and let the site's own
   tokens cascade in instead.
=================================================== */
:root{
  --primary: #150E2B;
  --primary-2: #1F1640;
  --accent: #FFC93C;
  --ink: #F3EFFF;
  --ink-dim: #B8ADE0;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

body{
  background: radial-gradient(ellipse at top, #241A48 0%, var(--primary) 60%);
  color: var(--ink);
  font-family: 'Nunito', -apple-system, sans-serif;
  min-height: 100vh;
}

a{ text-decoration:none; }

/* ===========================
   Breadcrumb
=========================== */
.breadcrumb-bar{
  background: transparent;
  padding: 14px 0;
}
.breadcrumb-bar .container{
  display:flex; align-items:center; gap:8px;
  font-size: .9rem; font-weight:700; color: var(--ink-dim);
}
.breadcrumb-bar a{ color: var(--ink-dim); transition:.2s; }
.breadcrumb-bar a:hover{ color: var(--accent); }
.breadcrumb-bar .current{ color: var(--accent); }

/* ===========================
   Hero
=========================== */
.game-hero{
  text-align:center;
  padding: 36px 20px 28px;
}
.game-hero .eyebrow{
  font-size:2.6rem; line-height:1;
}
.game-hero h1{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 10px 0 6px;
  background: linear-gradient(90deg, #FF6B4A, #FFC93C, #2DD4BF, #FF4D8D);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.game-hero p{
  color: var(--ink-dim);
  font-weight:600;
  max-width: 480px;
  margin: 0 auto 20px;
}
.hero-play-btn{
  display:inline-block;
  padding: 13px 34px;
  border-radius: 50px;
  background: var(--accent);
  color: var(--primary);
  font-weight:800;
  font-size:1.05rem;
  box-shadow: var(--shadow);
  border:none;
  cursor:pointer;
  transition:.25s;
}
.hero-play-btn:hover{
  transform: translateY(-2px);
  background:#ffffff;
}

/* ===========================
   Game Section
=========================== */
.game-section{ padding: 10px 0 60px; }

.game-controls{
  display:flex; justify-content:center; gap:10px;
  flex-wrap:wrap;
  margin-bottom: 22px;
}
.ctrl-btn{
  background: var(--primary-2);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ink);
  font-weight:700;
  font-size:.85rem;
  padding: 10px 18px;
  border-radius: 14px;
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:.2s;
}
.ctrl-btn:hover{ background: rgba(255,255,255,.06); border-color: var(--accent); }
.ctrl-btn:active{ transform: scale(.95); }

.game-wrapper{
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  background: var(--primary-2);
  border-radius: 28px;
  padding: 10px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);
}

.game-frame{
  width:100%;
  height: 780px;
  max-height: 82vh;
  border:none;
  border-radius: 20px;
  display:block;
  background: var(--primary);
}

/* Pause overlay — sits above the iframe when Pause is clicked.
   The game itself keeps running behind it (its own timer only
   advances on the play screen), this simply blocks interaction
   and gives a calm "paused" moment. */
.pause-overlay{
  position:absolute; inset:10px;
  border-radius:20px;
  background: rgba(9,6,20,.82);
  backdrop-filter: blur(3px);
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
  z-index: 5;
}
.pause-overlay.active{ display:flex; }
.pause-overlay .pause-label{
  font-family:'Fredoka', sans-serif;
  font-size:1.4rem; font-weight:700; color: var(--ink);
}
.pause-overlay .resume-btn{
  padding: 11px 28px; border-radius:50px; border:none;
  background: var(--accent); color: var(--primary);
  font-weight:800; cursor:pointer;
}

/* ===========================
   Related Games
=========================== */
.related-games{ padding: 20px 0 70px; }
.related-games h3{
  font-family:'Fredoka', sans-serif;
  text-align:center;
  color: var(--ink);
  margin-bottom: 22px;
  font-size: 1.4rem;
}
.related-empty{
  text-align:center;
  color: var(--ink-dim);
  font-weight:600;
  font-size:.9rem;
}

/* ===========================
   Footer (placeholder — replace
   with your homepage's exact footer)
=========================== */
.site-footer{
  background:#0B0818;
  padding: 30px 0;
  text-align:center;
  color: var(--ink-dim);
  font-size:.85rem;
  border-top: 1px solid rgba(255,255,255,.06);
}