/* ═══════════════════════════════════════════════════════════════
   FUN BIBLE ONLINE — GAMES
   Its own world: a lit cathedral window wall, not the parchment
   scroll. Deliberately a different register from the rest of the
   site — the only thread kept is the nav handle and the gold accent.
   No image files; every panel is inline SVG.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --gl-void:#0b0a12;        /* the dark between windows */
  --gl-stone:#171523;
  --gl-lead:#07060c;
  --gl-gold:#e8c16a;
  --gl-gold-lo:#c79433;
  --gl-text:#efe6d2;
  --gl-mute:#a89c85;
  --gl-nav-w:288px;
  --gl-rod-w:46px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(120% 70% at 50% -10%, #1b1830 0%, transparent 60%),
    var(--gl-void);
  color:var(--gl-text);
  font-family:"Crimson Pro",Georgia,serif;
  min-height:100vh;
}

/* ── page header ─────────────────────────────────────────────── */
.pg{max-width:1180px!important;margin:0 auto;padding:34px 22px 80px}
.ghdr{margin:0 0 40px;text-align:center}
.gback{
  display:inline-block;float:left;font-family:"Crimson Pro",serif;font-size:.9rem;
  color:var(--gl-mute);text-decoration:none;padding:.4rem .8rem;border-radius:99px;
  border:1px solid rgba(232,193,106,.28);
}
.gback:hover{color:var(--gl-gold);border-color:var(--gl-gold)}
.ghdr h1{
  font-family:Cinzel,serif;font-weight:700;
  font-size:clamp(1.8rem,4.4vw,2.6rem);margin:0 0 .3rem;
  color:var(--gl-gold)!important;-webkit-text-fill-color:var(--gl-gold)!important;
  letter-spacing:.01em;
  text-shadow:0 0 26px rgba(232,193,106,.28);
}
.gtag{margin:0;color:var(--gl-mute)!important;font-style:italic;font-size:1rem}

/* ── categories ──────────────────────────────────────────────── */
.gcat{margin:0 0 46px}
.gcat h2{
  font-family:Cinzel,serif;font-weight:600;font-size:1.18rem;
  margin:0 0 .1rem;color:var(--gl-text)!important;-webkit-text-fill-color:var(--gl-text)!important;
  padding-bottom:.45rem;border-bottom:1px solid rgba(232,193,106,.22);
}
.gcat-sub{margin:.45rem 0 1.1rem;font-size:.88rem;color:var(--gl-mute)!important;font-style:italic}
.ggrid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
}

/* ── a game card is a lit window ─────────────────────────────── */
a.gcard{text-decoration:none;color:inherit}
.gcard{
  position:relative;display:block;padding:0;margin:0;cursor:pointer;
  aspect-ratio:4/3;border-radius:10px 10px 4px 4px;overflow:hidden;
  border:1px solid rgba(232,193,106,.30);
  background:var(--gl-stone);
  box-shadow:0 12px 30px -12px #000, inset 0 1px 0 rgba(255,228,170,.14);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align:left;font:inherit;color:inherit;
}
.gcard--hero{grid-column:span 2}
@media (max-width:560px){ .gcard--hero{grid-column:span 1} }

.gcard svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gcard:hover,.gcard:focus-visible{
  transform:translateY(-4px);
  border-color:var(--gl-gold);
  /* light through the window */
  box-shadow:0 20px 40px -14px #000, 0 0 30px -6px rgba(232,193,106,.35);
  outline:none;
}
.gcard:hover svg{filter:saturate(1.25) brightness(1.12)}
.gcard svg{transition:filter .22s ease}

.gmeta{
  position:absolute;left:0;right:0;bottom:0;display:block;
  padding:44px 14px 13px;
  background:linear-gradient(0deg,rgba(5,4,9,.95) 0%,rgba(5,4,9,.80) 42%,transparent 100%);
}
.gic{display:block;font-size:1.4rem;line-height:1;margin-bottom:5px;filter:drop-shadow(0 2px 5px #000)}
.gti{
  display:block;font-family:Cinzel,serif;font-weight:700;font-size:1rem;
  color:#fff4dc!important;-webkit-text-fill-color:#fff4dc!important;
  text-shadow:0 2px 7px #000;line-height:1.2;
}
.gsb{
  display:block;font-size:.8rem;color:#e4d8be!important;margin-top:3px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.badge{
  position:absolute;top:9px;right:9px;z-index:2;
  font-family:"Crimson Pro",serif;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .52rem;border-radius:3px;
  color:#150f04;background:linear-gradient(160deg,var(--gl-gold),var(--gl-gold-lo));
  box-shadow:0 2px 7px rgba(0,0,0,.65);
}

/* ── nav handle: the one thread back to the rest of the site ── */
#scroll-handle{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:60;width:30px;height:74px;padding:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border:1px solid rgba(232,193,106,.45);border-left:0;border-radius:0 9px 9px 0;
  background:linear-gradient(90deg,#2a2438,#191527 70%,#110e1c);
  box-shadow:3px 0 14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,228,170,.16);
  transition:left .5s cubic-bezier(.22,.61,.36,1), background .2s;
}
#scroll-handle span{display:block;width:14px;height:2px;border-radius:2px;background:var(--gl-gold)}
#scroll-handle:hover{background:linear-gradient(90deg,#352d47,#221d33 70%,#171227)}
body.nav-open #scroll-handle{left:var(--gl-nav-w)}

/* nav slides over rather than pushing — this page has no scroll to roll */
#sidenav{
  position:fixed!important;left:0;top:0;bottom:0;   /* style.css isn't loaded on this page */
  width:var(--gl-nav-w)!important;
  background:linear-gradient(158deg,#221d33 0%,#191527 52%,#110e1c 100%)!important;
  border-right:1px solid rgba(232,193,106,.3)!important;border-left:0!important;
  color:var(--gl-text)!important;
  transform:translateX(calc(-1 * var(--gl-nav-w)))!important;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)!important;
  z-index:50!important;display:flex!important;flex-direction:column!important;padding:0!important;
}
#sidenav.open{transform:translateX(0)!important}
#sidenav .snitems{flex:1 1 auto;overflow-y:auto;min-height:0}
#sidenav .sni{color:var(--gl-text)!important;border-bottom:1px solid rgba(232,193,106,.16)!important}
#sidenav .sni:hover,#sidenav .sni.active{background:rgba(232,193,106,.10)!important;color:#fff4dc!important}
#sidenav .sn-title,#sidenav .sn-cross{color:var(--gl-gold)!important}
#nav-overlay{display:none;position:fixed;inset:0}
body.nav-open #nav-overlay{display:block;position:fixed;inset:0;z-index:45;background:rgba(5,4,9,.5);backdrop-filter:none!important}

/* ── the game overlay ───────────────────────────────────────── */
#gov .overlay-box,#gov .overlay-box--game{
  background:#f7edd6 !important;
  border:1px solid rgba(184,137,42,.45)!important;
  color:#2a1d0d !important;
}
#g-ti{color:#2a1d0d !important;font-family:Cinzel,serif}
#g-bd,.g-bd-wrap{color:#2a1d0d;font-family:"Crimson Pro",Georgia,serif}
.gcard{
  background-size:cover;
  background-position:center top;
}
.gcard.svg-on svg{display:block}
.gcard.shot svg{display:none}
.gcard[href="farm/"]{background-image:url("images/games/farm.jpg")}
.gcard[onclick*="'hang'"]{background-image:url("images/games/hang.jpg")}
.gcard[onclick*="'crossword'"]{background-image:url("images/games/crossword.jpg")}
.gcard[onclick*="'wordsearch'"]{background-image:url("images/games/wordsearch.jpg")}
.gcard[onclick*="'verse'"]{background-image:url("images/games/verse.jpg")}
.gcard[onclick*="'quiz'"]{background-image:url("images/games/quiz.jpg")}
.gcard[onclick*="'true'"]{background-image:url("images/games/true.jpg")}
.gcard[onclick*="'memory'"]{background-image:url("images/games/memory.jpg")}
.gcard[onclick*="'marble'"]{background-image:url("images/games/marble.jpg")}
.gcard[onclick*="'sliding'"]{background-image:url("images/games/sliding.jpg")}
.gcard[onclick*="'minesweeper'"]{background-image:url("images/games/minesweeper.jpg")}
.gcard[onclick*="'art'"]{background-image:url("images/games/art.jpg")}
.gcard[onclick*="'sketch'"]{background-image:url("images/games/sketch.jpg")}
.gcard[href="farm/"] svg,
.gcard[onclick*="'hang'"] svg,
.gcard[onclick*="'crossword'"] svg,
.gcard[onclick*="'wordsearch'"] svg,
.gcard[onclick*="'verse'"] svg,
.gcard[onclick*="'quiz'"] svg,
.gcard[onclick*="'true'"] svg,
.gcard[onclick*="'memory'"] svg,
.gcard[onclick*="'marble'"] svg,
.gcard[onclick*="'sliding'"] svg,
.gcard[onclick*="'minesweeper'"] svg,
.gcard[onclick*="'art'"] svg,
.gcard[onclick*="'sketch'"] svg{display:none}
#g-ti{color:var(--gl-gold)!important;font-family:Cinzel,serif}

@media (prefers-reduced-motion:reduce){
  .gcard,.gcard svg,#scroll-handle,#sidenav{transition:none!important}
  .gcard:hover{transform:none}
}

/* ── overlays: style.css isn't loaded here, so they need their own
      positioning or they open invisibly in the flow ── */
.overlay{
  position:fixed;inset:0;z-index:80;
  display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,4,9,.82);
}
.overlay.open,.overlay[style*="flex"]{display:flex}
.overlay-box{
  position:relative;width:min(940px,96vw);max-height:92vh;overflow:auto;
  border-radius:12px;padding:18px 20px;
  background:#f7edd6;
  color:#2a1d0d;
  border:1px solid rgba(184,137,42,.45);
  box-shadow:0 30px 70px -20px #000;
  font-family:"Crimson Pro",Georgia,serif;
}
.overlay-box--game{width:min(1020px,97vw)}
.overlay-hdr,.ov-hdr{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.overlay .ovcls,.overlay .closebtn,.overlay [onclick*="closeOv"]{
  margin-left:auto;cursor:pointer;background:transparent;
  border:1px solid rgba(232,193,106,.4);color:var(--gl-gold);
  border-radius:8px;width:34px;height:34px;font-size:1rem;line-height:1;
}