/* Three Lemurs Game Studio section: the site's dark look with warm, playful
   accents (Titan One titles, rounded cards, orange/lime highlights). */
.games {
  --g-orange: #f6a45c;
  --g-lime: #aff13b;
  --g-card: rgba(255, 255, 255, 0.05);
  --g-line: rgba(255, 255, 255, 0.1);
}
.games .game-title { font-family: "Titan One", "Fredoka", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.5px; }
.games-kicker { color: var(--g-lime); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 0.85rem; }
.games-link { color: var(--g-orange); font-weight: 600; text-decoration: none; }
.games-link:hover { color: #ffc28a; }

/* Studio home */
.games-hero { padding-top: 9rem !important; background: radial-gradient(ellipse at 20% 0%, rgba(175, 241, 59, 0.12), transparent 60%); }
.game-card { border-radius: 28px; overflow: hidden; background: var(--g-card); border: 1px solid var(--g-line); transition: transform 0.2s, border-color 0.2s; }
.game-card:hover { transform: translateY(-6px); border-color: var(--g-orange); }
.game-card__art { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center 40%; }
.game-card__icon { position: absolute; left: 20px; bottom: -32px; width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.game-card__body { padding: 44px 24px 24px; }

/* Game page */
.game-hero { position: relative; padding-top: 6rem; overflow: hidden; }
.game-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero) center 35% / cover no-repeat; opacity: 0.28; filter: saturate(1.2); }
.game-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0.3), #0a0a0c 95%); }
.game-hero .container { position: relative; z-index: 1; }
.game-icon { width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.hero-mascot { max-height: 420px; filter: drop-shadow(0 20px 40px rgba(246, 164, 92, 0.35)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(-2deg); } }
.store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--g-line); color: #fff; font-weight: 600; font-size: 0.95rem; }
.store-btn i { font-size: 1.3rem; }
/* Screenshot carousel: no scrollbar, arrows, dots and soft edge fades. */
.shots-wrap { position: relative; }
.shots { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px; }
.shots::-webkit-scrollbar { display: none; }
.shots-wrap::before, .shots-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; z-index: 1; transition: opacity .25s; }
.shots-wrap::before { left: 0; background: linear-gradient(90deg, rgb(28, 31, 35), transparent); }
.shots-wrap::after { right: 0; background: linear-gradient(270deg, rgb(28, 31, 35), transparent); }
.shots-wrap.at-start::before, .shots-wrap.at-end::after, .shots-wrap.no-scroll::before, .shots-wrap.no-scroll::after { opacity: 0; }
.shots-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--g-line); background: rgba(20, 22, 26, 0.85); color: #fff; font-size: 1.3rem; display: grid; place-items: center; backdrop-filter: blur(6px); transition: opacity .25s, background .2s; cursor: pointer; }
.shots-nav:hover { background: rgba(40, 44, 52, 0.95); }
.shots-nav--prev { left: -8px; }
.shots-nav--next { right: -8px; }
.shots-wrap.at-start .shots-nav--prev, .shots-wrap.at-end .shots-nav--next, .shots-wrap.no-scroll .shots-nav { opacity: 0; pointer-events: none; }
.shots-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.shots-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.25); transition: width .25s, background .25s; cursor: pointer; }
.shots-dots button.on { width: 26px; background: var(--g-lime, #aff13b); }
@media (max-width: 575px) { .shots-nav { display: none; } }
.shot { flex: 0 0 auto; width: min(240px, 62vw); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 24px; border: 1px solid var(--g-line); scroll-snap-align: start; }
.feature-card { padding: 26px; border-radius: 24px; background: var(--g-card); border: 1px solid var(--g-line); }
.feature-card__icon { font-size: 2rem; color: var(--g-orange); }
.how-card { padding: 36px; border-radius: 28px; background: linear-gradient(135deg, rgba(246, 164, 92, 0.16), rgba(175, 241, 59, 0.08)); border: 1px solid var(--g-line); }
.steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.steps li { display: flex; align-items: center; gap: 16px; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; }
.step-num { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--g-orange); color: #2b1a10; font-family: "Titan One", sans-serif; }

/* Legal / support documents */
.doc { padding-top: 5rem; }
.doc h3 { color: #fff; font-size: 1.2rem; margin-top: 2rem; }
.doc p, .doc li { color: rgba(255, 255, 255, 0.75); line-height: 1.7; }
.doc a { color: var(--g-orange); }

/* Sticky header (app.js adds .navbar-sticky-init on scroll): give it a backdrop. */
.games.navbar-sticky-init .navbar-overlay { background: rgba(12, 12, 14, 0.9); backdrop-filter: blur(10px); }
@media (max-width: 991px) { .hero-mascot { max-height: 230px; } .game-hero { padding-top: 4rem; } }
.game-card .game-title { color: #fff; }

/* Upcoming games on the studio home: no detail page, a status badge instead. */
.game-card--soon:hover { transform: none; border-color: var(--g-line); }
.game-card__badge { position: absolute; top: 16px; right: 16px; padding: 5px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1a1208; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.game-card__badge--dev { background: var(--g-orange); }
.game-card__badge--concept { background: rgba(255, 255, 255, 0.85); }
/* Status badge next to a game's name on its page (e.g. "In development"). */
.game-badge-inline { position: static; display: inline-block; margin: 0 0 12px; }