/* Kage Games — the home page, the shop, the legal pages (on top of Bootstrap 5.3) */

:root { --kage-red: #d7261e; --kage-gold: #ffc93c; --kage-night: #0b1020; }

/* the hero: RetroStar's cover painting, the title over it */
.kage-hero {
    position: relative; overflow: hidden; border-radius: 1.25rem;
    background: var(--kage-night) center / cover no-repeat;
    min-height: 32rem; color: #fff;
    display: flex; align-items: flex-end;
}
.kage-hero::after {               /* (a dark fade, so the text reads) */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,8,20,.05) 25%, rgba(5,8,20,.88) 85%);
}
.kage-hero .kage-hero-body { position: relative; z-index: 1; padding: 2.5rem; max-width: 46rem; }
.kage-hero h1 { font-weight: 800; letter-spacing: .02em; font-size: clamp(2.4rem, 6vw, 4rem); }
.kage-hero .kage-kicker { color: var(--kage-gold); text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }

.kage-section { padding: 3.5rem 0 1rem; }
.kage-section h2 { font-weight: 800; font-size: 1.9rem; }   /* (the game page's headings: a little larger than the site's) */

.kage-feature { height: 100%; border: 0; border-radius: 1rem; background: #f4f6fb; }
.kage-feature i { font-size: 1.8rem; color: var(--kage-red); }

.kage-screen { width: 100%; border-radius: .75rem; image-rendering: pixelated; background: #000; }
.kage-art { width: 100%; border-radius: 1rem; }
.kage-wide { width: 100%; border-radius: 1rem; display: block; }

.kage-price { font-size: 2.6rem; font-weight: 800; }
.kage-band { background: var(--kage-night); color: #fff; border-radius: 1.25rem; padding: 2.5rem; }
.kage-band a:not(.btn) { color: var(--kage-gold); }

.kage-legal { max-width: 48rem; }
.kage-footer-links a { color: inherit; text-decoration: none; margin-right: 1rem; }
.kage-footer-links a:hover { text-decoration: underline; }

/* the game page's buy section — its own look whatever the site's styles say
   about Bootstrap's tabs (.tab-content / .tab-pane) or .btn-secondary */
.kage-plats, .kage-plats .kage-plat { background: transparent !important; border: 0 !important;
                                      padding: 0 !important; box-shadow: none !important; }
.kage-soon, .kage-soon:disabled { background: #e2e5ec !important; color: #6c7280 !important;
                                  border: 0 !important; opacity: 1 !important; }

/* the header's menu (#mainNav — style.css's own look overridden here, to match
   the pages): one dark ink, no boxes; red on hover; the current page red with
   a red bar under it */
#mainNav .navbar-nav .nav-link {
    color: #2b3040 !important; background: transparent !important; border-radius: 0;
    font-weight: 600; letter-spacing: .02em; padding: .5rem 1rem !important; margin: 0 .2rem;
    position: relative; transition: color .15s ease;
}
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link:focus-visible { color: var(--kage-red) !important; }
#mainNav .navbar-nav .nav-link.active { color: var(--kage-red) !important; }
#mainNav .navbar-nav .nav-link.active::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .2rem;
    height: 3px; border-radius: 2px; background: var(--kage-red);
}
@media (max-width: 767.98px) {                 /* (the phone's menu, stacked: the bar to the left) */
    #mainNav .navbar-nav .nav-link.active::after { left: 0; right: auto; top: .55rem; bottom: .55rem; width: 3px; height: auto; }
}