/* MICRONIMO site theme - the MicroWars title screen brought to the
   company pages: DistantGalaxy #FFE81F headings, Teko body text,
   #7DE8FF accents, black space throughout. Applies only to the Razor
   pages (via _Layout); the static .htm/.html files never load it. */

/* Fonts - same faces the game title screen uses. */
@font-face {
    font-family: 'DistantGalaxy';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url(../fonts/SFDistantGalaxy.ttf) format('truetype');
}

@font-face {
    font-family: 'StarJedi';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url(../fonts/Starjedi.ttf) format('truetype');
}

@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/teko-300-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/teko-300-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Page base: black space, Teko text, yellow scrollbar like the game. */
html.mw-site {
    scrollbar-color: #FFE81F rgba(255, 232, 31, 0.12);
    background: #000;
}

html.mw-site body {
    /* The game's sky EVERYWHERE: the same cubemap face as the hero,
       fixed so it holds still while the pages scroll over it, dimmed
       under a dark wash so panels and copy stay readable. */
    background: linear-gradient(rgba(0, 0, 5, 0.62), rgba(0, 0, 5, 0.62)),
        #000 url('../images/space-hero.jpg') center / cover no-repeat fixed;
    color: #E3F9FF;
    font-family: 'Teko', sans-serif;
    font-weight: 300;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;   /* site.css reserves 60px for the old footer. */
    /* The full-bleed hero measures 100vw, which includes the vertical
       scrollbar's width - without this the page grows a sideways
       yellow scrollbar. */
    overflow-x: hidden;
}

html.mw-site main {
    flex: 1 0 auto;
}

html.mw-site h1,
html.mw-site h2,
html.mw-site h3 {
    font-family: 'DistantGalaxy', 'StarJedi', 'Teko', sans-serif;
    color: #FFE81F;
    letter-spacing: 0.04em;
    text-shadow: 0 0 14px rgba(255, 232, 31, 0.35);
}

html.mw-site a {
    color: #7DE8FF;
    text-decoration: none;
}

html.mw-site a:hover {
    color: #FFE81F;
    text-shadow: 0 0 10px rgba(255, 232, 31, 0.6);
}

/* Navbar: translucent black over space, MICRONIMO wordmark. */
html.mw-site .navbar {
    background: rgba(0, 0, 5, 0.82) !important;
    border-bottom: 1px solid rgba(255, 232, 31, 0.35) !important;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.8);
}

html.mw-site .navbar-brand {
    font-family: 'DistantGalaxy', 'StarJedi', sans-serif;
    color: #FFE81F !important;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    text-shadow: 0 0 12px rgba(255, 232, 31, 0.5);
}

html.mw-site .navbar .nav-link {
    font-family: 'Teko', sans-serif;
    color: #E3F9FF !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 1.1rem;
    border-radius: 8px;
    padding: 0.25rem 0.7rem;
    transition: background 0.15s, color 0.15s;
}

html.mw-site .navbar .nav-link.active {
    color: #FFE81F !important;
    text-shadow: 0 0 10px rgba(255, 232, 31, 0.7);
}

/* Menu rollover in REVERSE: a rounded yellow box, black lettering. */
html.mw-site .navbar .nav-link:hover {
    background: #FFE81F;
    color: #000 !important;
    text-shadow: none;
}

html.mw-site .navbar-toggler {
    border-color: rgba(255, 232, 31, 0.5);
}

html.mw-site .navbar-toggler-icon {
    filter: invert(1);
}

/* THE HERO: the game's own sky (cubemap face) under the company
   title. A vignette keeps the wordmark legible over bright stars. */
.mw-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #000 url('../images/space-hero.jpg') center / cover no-repeat;
    /* Full-bleed, and pulled up under the fixed navbar so the game
       sky runs behind the translucent bar. */
    margin: -4.5rem calc(50% - 50vw) 0;
    padding: 6rem 1rem 4rem;
}

.mw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 5, 0.25) 0%, rgba(0, 0, 5, 0.72) 100%);
}

.mw-hero > * {
    position: relative;
}

.mw-hero-title {
    font-family: 'DistantGalaxy', 'StarJedi', sans-serif;
    color: #FFE81F;
    font-size: clamp(3rem, 11vw, 8.5rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-shadow: 0 0 28px rgba(255, 232, 31, 0.45);
    margin: 0;
}

.mw-hero-tagline {
    font-family: 'Teko', sans-serif;
    color: #E3F9FF;
    font-size: clamp(1.2rem, 3vw, 2rem);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-top: 0.6rem;
}

/* Buttons: the title screen's yellow-bordered panels. */
.mw-button {
    display: inline-block;
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #FFE81F;
    border: 2px solid #FFE81F;
    background: rgba(0, 0, 5, 0.55);
    padding: 0.55rem 2.4rem 0.35rem;
    margin-top: 2.2rem;
    transition: background 0.2s, box-shadow 0.2s;
}

/* Hover like the game's title-screen buttons: the yellow stays
   lettering and border, the inside only GLOWS - never a solid fill. */
.mw-button:hover {
    color: #FFE81F;
    background: rgba(255, 232, 31, 0.16);
    box-shadow: 0 0 26px rgba(255, 232, 31, 0.55),
        inset 0 0 16px rgba(255, 232, 31, 0.25);
    text-shadow: 0 0 12px rgba(255, 232, 31, 0.85);
}

/* Panels: guiBox-style translucent instrument boxes. */
.mw-panel {
    background: rgba(0, 0, 5, 0.55);
    border: 2px solid rgba(255, 232, 31, 0.65);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6), inset 0 0 24px rgba(125, 232, 255, 0.05);
    padding: 1.4rem 1.6rem 1.1rem;
    /* No forced height: a column stacking TWO panels must let each
       hug its content (height:100% stretched the first panel to the
       full column and shoved the second out under the footer).
       Columns with a single panel use Bootstrap's h-100 instead. */
}

.mw-panel h2,
.mw-panel h3 {
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
}

.mw-panel .mw-accent {
    color: #7DE8FF;
    text-shadow: 0 0 10px rgba(125, 232, 255, 0.55);
}

/* Section headings between panel rows. */
.mw-section-title {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    margin: 3rem 0 1.2rem;
    text-align: center;
}

/* Lore/civilization list styling for THE MICRO GALAXY. */
.mw-lore-entry {
    border-left: 3px solid #7DE8FF;
    padding-left: 1rem;
    margin-bottom: 1.4rem;
}

.mw-lore-entry .mw-lore-name {
    font-family: 'DistantGalaxy', 'Teko', sans-serif;
    color: #FFE81F;
    font-size: 1.3rem;
}

/* Dev log entries: BUILD-numbered, straight from the changelog culture. */
.mw-log-entry {
    border-bottom: 1px solid rgba(255, 232, 31, 0.25);
    padding: 0.9rem 0 0.7rem;
}

.mw-log-entry .mw-log-build {
    font-family: 'Teko', sans-serif;
    color: #FFE81F;
    letter-spacing: 0.2em;
    font-size: 1.15rem;
}

/* GAMEPLAY CAROUSEL: stock Bootstrap carousel dressed for the Micro
   Galaxy - yellow-framed panel, cyan indicator dots, Teko captions. */
.mw-carousel {
    border: 2px solid rgba(255, 232, 31, 0.65);
    background: rgba(0, 0, 5, 0.55);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
    padding: 0.6rem;
}

.mw-carousel .carousel-item img {
    width: 100%;
    display: block;
}

.mw-carousel .carousel-caption {
    background: rgba(0, 0, 5, 0.72);
    border: 1px solid rgba(255, 232, 31, 0.5);
    padding: 0.15rem 1rem 0.05rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1.2rem;
    font-family: 'Teko', sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FFE81F;
    white-space: nowrap;
}

.mw-carousel .carousel-indicators [data-bs-target] {
    background-color: #7DE8FF;
    height: 4px;
}

.mw-carousel .carousel-indicators .active {
    background-color: #FFE81F;
}

.mw-carousel .carousel-control-prev-icon,
.mw-carousel .carousel-control-next-icon {
    /* Bootstrap's white chevrons turned title-yellow. */
    filter: invert(84%) sepia(62%) saturate(1300%) hue-rotate(357deg)
        brightness(104%);
}

/* A single gameplay still inside a teaser panel. */
.mw-still {
    width: 100%;
    display: block;
    border: 1px solid rgba(255, 232, 31, 0.5);
    margin-bottom: 0.8rem;
}

/* Footer. */
html.mw-site .footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 232, 31, 0.35) !important;
    background: rgba(0, 0, 5, 0.82);
    color: rgba(227, 249, 255, 0.65) !important;
    font-family: 'Teko', sans-serif;
    letter-spacing: 0.12em;
    padding: 0.8rem 0;
    position: static;
    white-space: normal;
    line-height: 1.6;
}