/*
 *    MIT License
 *
 *    Copyright (c) 2023 Christopher Amorosi
 *
 *    Permission is hereby granted, free of charge, to any person obtaining a copy
 *    of this software and associated documentation files (the "Software"), to deal
 *    in the Software without restriction, including without limitation the rights
 *    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *    copies of the Software, and to permit persons to whom the Software is
 *    furnished to do so, subject to the following conditions:
 *
 *    The above copyright notice and this permission notice shall be included in all
 *    copies or substantial portions of the Software.
 *
 *    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 *    SOFTWARE.
 */


/* ============================================================
 *   Base
 *   ============================================================ */

::-webkit-scrollbar {
    display: none;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    color: #78a4d4;
    font-family: Arial, Helvetica, sans-serif;
    background: #0d1724;
    background-image: repeating-linear-gradient(
            to bottom,
            black,
            black 2px,
            #0c0c10 2px,
            #0c0c10 4px
    );

    display: flex;
    flex-direction: column;
}


/* ============================================================
 *   Header and top navigation
 *   ============================================================ */

header {
    margin: 1em;
}

header nav ol {
    list-style-type: none;

    display: flex;
    justify-content: center;

    padding-left: 0;
    margin: 5px;

    gap: 0.25em;
}

header nav ol li {
    flex-grow: 1;
    flex-basis: 18%;
}

header nav ol li a {
    display: block;
}

.middlegov {
    flex-basis: 28%;
}


/* ============================================================
 *   Main / reading area
 *   ============================================================ */

main {
    width: min(66%, 900px);

    height: calc(100vh - 120px);

    margin: auto;

    overflow-y: auto;
    overflow-x: hidden;

    flex: 1 1 auto;
    min-height: 0;
}


/* ============================================================
 *   Article
 *   ============================================================ */

article {
    margin: 1em;
    display: block;
}


/* ============================================================
 *   Headings
 *   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

    text-align: center;
    text-transform: uppercase;

    color: #688cc4;
}


/* ============================================================
 *   Links
 *   ============================================================ */

a {
    color: #b8c060;
    font-weight: bold;
}


/* ============================================================
 *   Basic entry wrapper
 *   ============================================================ */

.blurb-container {
    margin: 1em;

    display: flex;
    flex-wrap: wrap;
}


/* ============================================================
 *   Blurb sections
 *   ============================================================ */

.blurb-symbol,
.blurb-quote,
.blurb-info {
    display: flex;
    flex-direction: column;
}

.blurb-symbol,
.blurb-info {
    flex: 1 1 20ch;
}

.blurb-quote {
    flex: 2 1 40ch;
}


/* ============================================================
 *   Generic flex column styling
 *   ============================================================ */

.column {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
}


/* ============================================================
 *   Symbol styling
 *   ============================================================ */

.symbol {
    object-fit: contain;
    opacity: 70%;
}


/* ============================================================
 *   Quote styling
 *   ============================================================ */

.quote-wrapper {
    flex-grow: 1;
}

.text,
.author,
.work,
.note {
    margin: 0;

    white-space: pre-wrap;
}

.text {
    margin-left: 2px;
}

.author,
.work,
.note {
    margin-left: 2em;
}

.author::before {
    content: '\2014';
}

.work::before {
    content: '\201C';
}

.work::after {
    content: '\201D';
}


/* ============================================================
 *   Info styling
 *   ============================================================ */

.blurb-info p {
    flex-grow: 1;
}

.text-center {
    text-align: center;
}

.all-caps {
    text-transform: uppercase;
}


.side,
.center {
    display: flex;
    flex-flow: column;
}

.side {
    flex: 1 1 20ch;
}

.center {
    flex: 2 1 40ch;
}


p.about {
    width: 100%;

    padding: 1em 1em 1em 3em;
    margin-left: 1em;
}


.portrait {
    object-fit: contain;
}

.stinger {
    color: #353d73;
    text-align: center;
    font-style: italic;
}


footer {
    flex-shrink: 0;
}

.border-outer {
    border: 1px solid #314e2c;
    border-radius: 5px;

    margin: 0 0 4px;
    padding: 2px;
}

.border-inner {
    background-image: repeating-linear-gradient(
            to bottom,
            #0d1724,
            #0d1724 2px,
            #000000 2px,
            #000000 4px
    );

    border: 1px solid #233b22;
    border-radius: 5px;

    margin: 2px;
}

.border-governor {
    border: 1px solid #e88808;
    border-radius: 5px;

    margin: 4px;
    padding: 2px;
}


/* ============================================================
 *   Layout helpers
 *   ============================================================ */

.fill {
    flex-basis: auto;
}

.center {
    display: flex;
    flex-direction: column;
}


/* ============================================================
 *   Generic buttons
 *   ============================================================ */


.button {
    background: repeating-linear-gradient(
            to bottom,
            #1c5063,
            #1c5063 2px,
            #675bb5 2px,
            #675bb5 4px
    );

    font-size: larger;
    font-weight: bold;

    text-align: center;
    text-transform: uppercase;

    color: #b0d4f8;

    box-shadow: 0 0 5px rgba(120, 164, 212, 0.5);
    border: 2px solid transparent;
    border-radius: 3px;

    margin: 2px;

    cursor: pointer;
}


/* Hover */

.button:hover {
    background: repeating-linear-gradient(
            to bottom,
            #688cc4,
            #688cc4 2px,
            #78a4d4 2px,
            #78a4d4 4px
    );

    color: #0d1724;

    border: 2px solid #b0d4f8;

    box-shadow: 0 0 5px rgba(120, 164, 212, 0.5);
}


.button.active {
    background: repeating-linear-gradient(
            to bottom,
            #688cc4,
            #688cc4 2px,
            #78a4d4 2px,
            #78a4d4 4px
    );

    color: #0d1724;

    border: 2px solid #b0d4f8;

    box-shadow: 0 0 5px rgba(120, 164, 212, 0.5);
}


/* ============================================================
 *   Orange governor buttons
 *   ============================================================ */

.button.governor {
    background: repeating-linear-gradient(
            to bottom,
            #6c3417,
            #6c3417 2px,
            #552b15 2px,
            #552b15 4px
    );

    color: #e46818;

    border: 2px solid #88451c;
}

.button.governor:hover,
.button.governor.active {
    background: repeating-linear-gradient(
            to bottom,
            #eb5c00,
            #eb5c00 2px,
            #e47818 2px,
            #e47818 4px
    );

    color: black;
}

.button.governor:active {
    border: 2px solid #dcac34;
}


/* ============================================================
 *   Red governor toggle
 *   ============================================================ */

.button.govtoggle {
    background: repeating-linear-gradient(
            to bottom,
            #880c0c,
            #880c0c 2px,
            #44200c 2px,
            #44200c 4px
    );

    color: #e84014;

    border: 2px solid #b01414;
}

.button.govtoggle:hover {
    background: repeating-linear-gradient(
            to bottom,
            #d41818,
            #d41818 2px,
            #e84014 2px,
            #e84014 4px
    );

    color: black;

    border: 2px solid #880c0c;
}

.button.govtoggle:active {
    border: 2px solid #e47818;
}

.button.govtoggle.active {
    background: repeating-linear-gradient(
            to bottom,
            #d41818,
            #d41818 2px,
            #e84014 2px,
            #e84014 4px
    );

    color: black;

    border: 2px solid #e47818;
}


/* ============================================================
 *   Orange menu / commlink buttons
 *   ============================================================ */

.button.menu {
    background: repeating-linear-gradient(
            to bottom,
            #393212,
            #393212 2px,
            #331307 2px,
            #331307 4px
    );

    color: #e46818;

    border: 2px solid transparent;
}

.button.menu:hover,
.button.menu.active {
    background: repeating-linear-gradient(
            to bottom,
            #a1560f,
            #a1560f 2px,
            #88451c 2px,
            #88451c 4px
    );

    color: black;
}

.button.menu:active {
    background: repeating-linear-gradient(
            to bottom,
            #e88808,
            #e88808 2px,
            #eb5c00 2px,
            #eb5c00 4px
    );
}


/* ============================================================
 *   SMAC text colors
 *   ============================================================ */

.datalinks {
    color: #749c38;
}

.highlight {
    color: #b8c060;
    font-weight: bold;
}

.explore {
    color: #588c2c;
}

.discover {
    color: #adc4c0;
}

.build {
    color: #e8d48c;
}

.conquer {
    color: #da8677;
}

.menu {
    color: #b0d4f8;
}

.baseheading {
    color: #353d73;
}

.techheading {
    color: #688cc4;
}

.label {
    color: #4464a0;
}

.value {
    color: #78a4d4;
}

.eco {
    color: #588c2c;
}

.queue {
    color: #3b6f80;
}

.nutrients {
    color: #749c38;
}

.minerals {
    color: #90b8e4;
}

.energy {
    color: #e09c1c;
}

.economy {
    color: #e8d48c;
}

.labs {
    color: #d8e0eb;
}

.psych {
    color: #74c0a0;
}


/* ============================================================
 *   Faction text colors
 *   ============================================================ */

.gaians {
    color: #10e400;
}

.hive {
    color: #0061ff;
}

.university {
    color: #d8e0f4;
}

.morgan {
    color: #ffff00;
}

.spartans {
    color: #89a6a6;
}

.believers {
    color: #e09c1c;
}

.peacekeepers {
    color: #a4b0e8;
}


/* ============================================================
 *   Roman reader
 *   ============================================================ */

.novel-content {
    padding: 1.5em 2em;
}

.novel-content p {
    max-width: 70ch;

    margin-left: auto;
    margin-right: auto;

    line-height: 1.7;
}

.novel-content ul,
.novel-content ol {
    max-width: 70ch;

    margin-left: auto;
    margin-right: auto;
}

.novel-content h1 {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

.novel-content h2,
.novel-content h3 {
    margin-top: 2em;
}


/* ============================================================
 *   Roman images
 *   ============================================================ */

.novel-content img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
 *   Blockquotes
 *   ============================================================ */

.novel-content blockquote {
    border-left: 2px solid #314e2c;

    padding-left: 1em;

    color: #adc4c0;

    font-style: italic;
}


/* ============================================================
 *   Chapter navigation
 *   ============================================================ */

.reading-nav {
    display: flex;

    gap: 1em;

    justify-content: space-between;

    margin: 1em;
}

.reading-nav a {
    flex: 1 1 0;
}

.reading-nav .next {
    text-align: right;
}


/* ============================================================
 *   Mobile
 *   ============================================================ */

@media (max-width: 550px) {

    /* --------------------------------------------------------
     *       Header
     *       -------------------------------------------------------- */
    header {
        margin: 0.5em;
    }

    header nav ol {
        flex-direction: column;

        margin: 2px;
        gap: 2px;
    }


    /* --------------------------------------------------------
     *       Main
     *       -------------------------------------------------------- */
    main {
        width: 100%;

        height: calc(100vh - 100px);

        margin: 0;

        overflow-y: auto;
        overflow-x: hidden;
    }


    /* --------------------------------------------------------
     *       Article
     *       -------------------------------------------------------- */
    article {
        margin: 0;
    }


    /* --------------------------------------------------------
     *       Borders
     *       -------------------------------------------------------- */
    .border-outer {
        border-radius: 0;

        margin: 0;
        padding: 1px;
    }

    .border-inner {
        border-radius: 2px;

        margin: 1px;
    }


    /* --------------------------------------------------------
     *       Roman content
     *       -------------------------------------------------------- */
    .novel-content {
        padding: 0.75em 0.6em;
    }

    .novel-content p {
        max-width: none;

        margin-left: 0;
        margin-right: 0;

        line-height: 1.6;
    }

    .novel-content ul,
    .novel-content ol {
        max-width: none;

        margin-left: 1.2em;
        margin-right: 0.5em;
    }


    /* --------------------------------------------------------
     *       Headings
     *       -------------------------------------------------------- */
    .novel-content h1 {
        font-size: 1.5em;

        margin-top: 0.5em;
        margin-bottom: 1.2em;
    }

    .novel-content h2 {
        font-size: 1.25em;
    }


    /* --------------------------------------------------------
     *       Images
     *       -------------------------------------------------------- */
    .portrait {
        max-width: 100%;
    }

    .novel-content img {
        max-width: 100%;
        height: auto;
    }


    /* --------------------------------------------------------
     *       Chapter navigation
     *       -------------------------------------------------------- */
    .reading-nav {
        margin: 0.5em 0.25em;

        gap: 0.5em;
    }


    margin: 0;

    min-width: 6em;
}

/* ============================================================
 *  Seitenwerkzeuge
 *  Audio + Scrollbuttons
 *  ============================================================ */

.utility-controls {
    position: fixed;

    right: 1em;
    bottom: 1em;

    z-index: 1000;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 0.5em;

    max-width: calc(100vw - 2em);
}


/* ============================================================
 *  Audio-Player
 *  ============================================================ */

.audio-player {
    display: flex;
    flex: 0 1 auto;

    align-items: center;
    gap: 0.5em;

    min-width: 0;

    padding: 4px 6px;

    border: 1px solid #314e2c;
    border-radius: 4px;

    background: repeating-linear-gradient(
            to bottom,
            #0d1724,
            #0d1724 2px,
            #000000 2px,
            #000000 4px
    );

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}


.audio-button {
    flex: 0 0 auto;

    margin: 0;
    min-width: 6em;
}


/* ============================================================
 *  Audio-Status
 *  ============================================================ */

.audio-status {
    display: flex;
    flex: 0 0 auto;

    align-items: center;
    gap: 0.3em;

    color: #4464a0;

    font-size: 0.7em;
    font-weight: bold;

    letter-spacing: 0.08em;
}


#audio-status-indicator {
    color: #353d73;
}


#audio-status-indicator.audio-online {
    color: #10e400;

    text-shadow: 0 0 4px rgba(16, 228, 0, 0.7);
}


/* ============================================================
 *  Lautstärke
 *  ============================================================ */

.audio-volume {
    flex: 0 0 auto;

    color: #4464a0;

    font-size: 0.7em;
    font-weight: bold;
}


.audio-volume-slider {
    flex: 0 0 auto;

    width: 70px;

    accent-color: #688cc4;
}


/* ============================================================
 *  Scrollbuttons
 *  ============================================================ */

.scroll-controls {
    display: flex;
    flex: 0 0 auto;

    flex-direction: column;

    gap: 0.25em;
}


.scroll-button {
    flex: 0 0 auto;

    width: 5em;
    min-width: 5em;

    margin: 0;
}


/* ============================================================
 *  Kleine Bildschirme
 *  ============================================================ */

@media (max-width: 550px) {

    .utility-controls {
        position: static;

        width: calc(100% - 1em);
        max-width: none;

        box-sizing: border-box;

        margin: 0.5em;

        display: flex;

        flex-direction: row;
        align-items: stretch;

        gap: 0.5em;
    }


    /* Audio nimmt den verfügbaren Platz ein */
    .audio-player {
        flex: 1 1 auto;

        min-width: 0;

        justify-content: center;
    }


    /* Status auf kleinen Bildschirmen ausblenden */
    .audio-status {
        display: none;
    }


    /* Lautstärkeregler etwas kleiner */
    .audio-volume-slider {
        width: 60px;
    }


    /* Scrollbuttons bleiben rechts */
    .scroll-controls {

        width: 5em;
    }


    .scroll-button {
        width: 100%;
        min-width: 0;
    }

}

/* ============================================================
 *   Mobile navigation toggle
 *   ============================================================ */

/*
 * Desktop:
 * Der Menübutton wird nicht benötigt.
 */

.mobile-menu-toggle {
    display: none;
}


/* ============================================================
 *   Mobile
 *   ============================================================ */

@media (max-width: 550px) {

    /*
     * Menübutton anzeigen
     */
    .mobile-menu-toggle {
        display: block;

        width: 100%;

        margin: 0 0 0.5em;

        box-sizing: border-box;
    }


    /*
     * Navigation standardmäßig verstecken
     */
    .site-navigation {
        display: none;
    }


    /*
     * Navigation nach dem Öffnen anzeigen
     */
    .site-navigation.mobile-menu-open {
        display: block;
    }


    /*
     * Navigation weiterhin untereinander
     */
    .site-navigation nav ol {
        flex-direction: column;

        margin: 2px;
        gap: 2px;
    }


    /*
     * Buttons über die gesamte Breite
     */
    .site-navigation nav ol li {
        flex: 1 1 auto;
    }


    .site-navigation nav ol li a {
        width: 100%;
        box-sizing: border-box;
    }

}

/* ============================================================
 *   Countdown
 *   ============================================================ */

#countdown {
display: block;

width: 100%;

box-sizing: border-box;

margin: 2em 0;

padding: 0.75em;

border: 1px solid #314e2c;
border-radius: 4px;

background-image: repeating-linear-gradient(
    to bottom,
    #0d1724,
    #0d1724 2px,
    #000000 2px,
    #000000 4px
);

color: #78a4d4;

font-family:
"Courier New",
Courier,
monospace;

font-size: 1.1em;
font-weight: bold;

text-align: center;

white-space: nowrap;

overflow: hidden;

text-shadow:
0 0 4px rgba(120, 164, 212, 0.5);

box-shadow:
0 0 8px rgba(0, 0, 0, 0.6);
}


/* ============================================================
 *   Mobile
 *   ============================================================ */

@media (max-width: 550px) {

    #countdown {
    margin: 1em 0;
    padding: 0.6em 0.25em;
    font-size: 0.8em;
    }

}

/* ============================================================
 *   Mobiler aktueller Chapter-Button
 *   ============================================================ */

.mobile-current-chapter {
    display: none;
}


/* ============================================================
 *   Mobile
 *   ============================================================ */

@media (max-width: 550px) {

    /*
     * Aktuelles Kapitel anzeigen,
     * solange das Menü geschlossen ist.
     */
    .mobile-current-chapter {
        display: block;

        width: 100%;

        box-sizing: border-box;

        margin: 0 0 0.5em;

        text-align: center;
    }


    /*
     * Aktuelles Kapitel ausblenden,
     * sobald das Menü geöffnet ist.
     */
    .site-navigation.mobile-menu-open ~ .mobile-current-chapter {
        display: none;
    }

}

img.image-center {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2em auto;
}