/* =========================================================
   site.css — splash.php and dashboard.php layout styles
   ========================================================= */

/* ---- Fixed header bar ---- */

#siteHeader {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    background: rgb(25, 25, 25);
    border-bottom: 2px solid rgb(64, 255, 156);
    height: 52px;
    box-sizing: border-box;
}

#siteHeaderInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.2rem;
    height: 100%;
}

#siteLogo a {
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    color: rgb(243, 255, 242);
    text-decoration: none;
    font-size: 1.1em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#siteLogo a:hover { color: rgb(64, 255, 156); }

/* Override main.css float: right on #authArea */
#siteHeader #authArea {
    float: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#siteHeader #welcomeMsg {
    color: rgb(64, 245, 255);
    font-family: monospace;
    font-size: 0.9em;
    text-decoration: none;
}
#siteHeader #welcomeMsg:hover { color: rgb(64, 255, 156); }

#dashboardLink,
#floatingDashBtn {
    background: rgb(23, 88, 92);         /* Deep ocean — dark at rest */
    border: 1px solid rgb(64, 245, 255); /* Bright sky */
    color: rgb(91, 140, 115);            /* Night vision sage — muted at rest */
}
#floatingDashBtn {
    font-family: monospace;
    font-size: 0.85em;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 2px;
}
#dashboardLink:hover,
#floatingDashBtn:hover {
    background: rgb(41, 159, 166);   /* Ocean — lights up on hover */
    color: rgb(243, 255, 242);       /* Dull white */
    border-color: rgb(64, 245, 255);
}

#loginBtn,
#floatingLoginBtn {
    background: rgb(23, 88, 92);       /* Deep ocean */
    border: 1px solid rgb(64, 245, 255); /* Bright sky */
    color: rgb(64, 245, 255);            /* Bright sky */
    font-family: monospace;
    font-size: 0.85em;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 2px;
}
#loginBtn:hover,
#floatingLoginBtn:hover {
    background: rgb(41, 159, 166);     /* Ocean */
    color: rgb(166, 255, 209);         /* Night vision mint */
    border-color: rgb(166, 255, 209);
}

/* Non-splash site pages: push content below fixed header, solid background */
body.sitePage:not(.splash) {
    padding-top: 62px;
    background: rgb(20, 20, 20);
}

/* History page: flush against header — !important wins any specificity race */
body.sitePage.history {
    padding-top: 52px !important;
}

/* All site pages */
body.sitePage {
    color: rgb(182, 191, 182);
    font-family: 'Oxanium', monospace;
}

/* Splash page: hero starts at viewport top, animated grid shows through */
body.splash {
    padding-top: 0;
}

/* ---- Shared section wrapper ---- */

.siteSection {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---- Splash page sections ---- */

.splashSection {
    margin-bottom: 3em;
}

.splashSection h2 {
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    color: rgb(64, 255, 156);
    border-bottom: 1px solid rgb(64, 255, 156);
    padding-bottom: 0.3em;
    margin-bottom: 0.8em;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.splashSection p {
    color: rgb(182, 191, 182);
    line-height: 1.6;
    margin: 0.5em 0;
}

.splashSection a {
    color: rgb(77, 255, 64);
    text-decoration: none;
}
.splashSection a:hover { color: rgb(64, 245, 255); }

/* Character grid */

.characterGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    margin-top: 1em;
}

.characterCard {
    background: rgb(30, 30, 30);
    border: 1px solid rgb(91, 140, 115);
    border-radius: 3px;
    padding: 1em 1.1em;
}
.characterCard:hover { border-color: rgb(64, 255, 156); }

.characterCard h3 {
    color: rgb(64, 255, 156);
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    font-size: 0.95em;
    text-transform: uppercase;
    margin: 0 0 0.5em 0;
    letter-spacing: 0.05em;
}

.characterCard p {
    color: rgb(182, 191, 182);
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0.3em 0;
}

.characterCard .abilityLabel {
    color: rgb(91, 140, 115);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.6em;
    display: block;
}

/* Open Beta section */

.betaBtn {
    display: inline-block;
    background: rgb(64, 255, 156);
    color: rgb(20, 20, 20);
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: 2px;
    text-decoration: none;
    margin-bottom: 1em;
    cursor: default;
    pointer-events: none;
}

/* ---- Dashboard sections ---- */

.dashSection {
    background: rgb(25, 25, 25);
    border: 1px solid rgb(64, 255, 156);
    border-radius: 3px;
    padding: 1.2em 1.5em;
    margin-bottom: 1.5em;
}

.dashSection > h2 {
    color: rgb(64, 255, 156);
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgb(91, 140, 115);
    padding-bottom: 0.4em;
    margin: 0 0 1em 0;
}

.dashSubSection {
    margin-bottom: 1.4em;
}
.dashSubSection:last-child { margin-bottom: 0; }

.dashSubSection h3 {
    color: rgb(91, 140, 115);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.6em 0;
}

.dashSubSection hr {
    border: none;
    border-top: 1px solid rgb(50, 50, 50);
    margin: 1.2em 0;
}

/* Stat rows */

.statRow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4em;
}
.statLabel {
    color: rgb(91, 140, 115);
    font-size: 0.9em;
}
.statValue {
    color: rgb(64, 245, 255);
    font-weight: bold;
    font-size: 1em;
}

/* Inline forms */

.dashFormRow {
    margin-bottom: 0.8em;
}
.dashFormRow label {
    display: block;
    color: rgb(91, 140, 115);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.dashFormRow input[type=text],
.dashFormRow input[type=password] {
    background: rgb(40, 40, 40);
    border: 1px solid rgb(64, 255, 156);
    color: rgb(64, 255, 156);
    font-family: monospace;
    font-size: 0.95em;
    padding: 5px 7px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    border-radius: 2px;
}
.dashFormRow input:focus {
    outline: none;
    border-color: rgb(64, 245, 255);
}

/* Small note text */
.dashNote {
    color: rgb(91, 140, 115);
    font-size: 0.85em;
    margin: 0.3em 0 0.7em 0;
}

/* Coming-soon placeholder */
.dashComingSoon {
    color: rgb(102, 102, 102);
    font-size: 0.9em;
    font-style: italic;
    margin: 0.3em 0;
}

/* Shared shape for compact action buttons (btnDanger and btnAction) */
.btnDanger,
.btnAction {
    font-family: monospace;
    font-size: 0.9em;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
}

/* Destructive button — red/orange danger colors */
.btnDanger {
    background: rgb(40, 10, 10);
    border-color: rgb(255, 64, 64);
    color: rgb(255, 110, 26);
}
.btnDanger:hover {
    background: rgb(100, 20, 20);
    color: rgb(255, 200, 150);
}

/* Action button — deep ocean / bright sky colors */
.btnAction {
    background: rgb(23, 88, 92);
    border-color: rgb(64, 245, 255);
    color: rgb(91, 140, 115);
}
.btnAction:hover {
    background: rgb(41, 159, 166);
    border-color: rgb(64, 245, 255);
    color: rgb(243, 255, 242);
}

/* When btnDanger appears in the site header, keep it compact */
.hdrBtn.btnDanger {
    padding: 2px 6px;
    font-size: 0.75em;
}

/* Dashboard links */
.dashSection a {
    color: rgb(77, 255, 64);
    text-decoration: none;
}
.dashSection a:hover { color: rgb(64, 245, 255); }

/* Delete account step-2 confirmation panel */
#deleteConfirmStep2 {
    display: none;
    margin-top: 1em;
    padding: 0.8em;
    border: 1px solid rgb(255, 64, 64);
    border-radius: 2px;
    background: rgb(35, 10, 10);
}
#deleteConfirmStep2 p {
    color: rgb(255, 110, 26);
    font-size: 0.9em;
    margin: 0 0 0.7em 0;
}
#deleteCancelBtn {
    margin-left: 8px;
}

/* ---- Site footer ---- */

#siteFooter {
    background: rgb(25, 25, 25); /* Before midnight */
    border-top: 2px solid rgb(64, 255, 156);
    color: rgb(91, 140, 115);
    font-size: 0.8em;
    text-align: center;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.2rem;
    box-sizing: border-box;
    margin-top: 0;
}
#siteFooter p { margin: 0; }
#siteFooter a {
    color: rgb(77, 255, 64);
    text-decoration: none;
}
#siteFooter a:hover { color: rgb(64, 245, 255); }

/* ==========================================================
   SPLASH PAGE — hero, header scroll behavior, content layout
   ========================================================== */

/* ---- Header scroll behavior (splash only) ---- */

body.splash #siteHeader {
    transform: translateY(-100%);
    transition: transform 0.35s ease;
}
body.splash.headerVisible #siteHeader {
    transform: translateY(0);
}

/* ---- Floating login button (splash only, sits above hero) ---- */

#floatingAuth {
    position: fixed;
    top: 12px;
    right: 1.2rem;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.splash.headerVisible #floatingAuth {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.floatingWelcome {
    color: rgb(64, 245, 255);
    font-family: 'Oxanium', monospace;
    font-size: 0.9em;
}

/* ---- Hero section ---- */

#heroSection {
    position: relative;
    height: 100vh;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid rgb(64, 255, 156);
}

#heroSlideshow {
    position: absolute;
    inset: 0;
}

.heroSlide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation-name: heroFade, heroPan;
    animation-duration: 30s, 25s;
    animation-timing-function: ease, linear;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: both, both;
}

/* Pan delay matches fade delay per slide. Each slide starts its visible window
   panning from the right edge (position 100%). The pan reset happens at
   delay+25s — always after the slide faded out at delay+7.5s — so the
   background-position jump is invisible. Crossfade: fade-out starts at 20%
   (when next slide begins fading in), completes at 25% — no black gap. */
#hSlide1 { background-image: url('../img/scene1.jpg'); animation-delay: -3s, -3s; }
#hSlide2 { background-image: url('../img/scene2.jpg'); animation-delay:  3s,  3s; }
#hSlide3 { background-image: url('../img/scene3.jpg'); animation-delay:  9s,  9s; }
#hSlide4 { background-image: url('../img/scene4.jpg'); animation-delay: 15s, 15s; }
#hSlide5 { background-image: url('../img/scene5.jpg'); animation-delay: 21s, 21s; }

@keyframes heroFade {
    0%          { opacity: 0; }
    5%          { opacity: 1; }
    20%         { opacity: 1; }
    25%, 100%   { opacity: 0; }
}

@keyframes heroPan {
    from { background-position: 100% 50%; }
    to   { background-position:   0% 50%; }
}

#heroDarken {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1;
}

#heroWave {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(300px, 44vh, 500px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: block;
    pointer-events: none;
}

#heroContent {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 94%;
    pointer-events: none;
}

#heroTitle {
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    font-size: clamp(2.2rem, 9vw, 7rem);
    color: rgb(243, 255, 242);
    text-shadow: 0 0 18px #000, 0 0 40px #000, 0 0 70px #000;
    margin: 0 0 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

#heroSubtitle {
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    font-size: clamp(0.6rem, 2.1vw, 1rem);
    color: rgb(243, 255, 242);
    text-shadow: 0 0 18px #000, 0 0 40px #000, 0 0 70px #000;
    line-height: 1.7;
    letter-spacing: 0.04em;
    margin: 0;
}

/* ---- Content column with charcoal gradient fading into grid background ---- */

#splashMain {
    position: relative;
}

#splashInner {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.2em 1.8rem 1.8em;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(18, 18, 18, 0.94) 5%,
        rgba(18, 18, 18, 0.94) 95%,
        transparent 100%
    );
}

/* ---- Nav pills ---- */

#navPills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8em;
    margin: 0 0 1.4em;
}

.pillBtn {
    font-family: 'Good Times', 'Turret Road', 'Oxanium', monospace;
    font-size: clamp(0.72rem, 2.4vw, 0.95rem);
    color: rgb(64, 255, 156);
    background: transparent;
    border: 2px solid rgb(64, 255, 156);
    border-radius: 999px;
    padding: 0.5em 2em;
    text-decoration: none;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    display: inline-block;
}
.pillBtn:hover {
    background: rgb(64, 245, 255);
    border-color: rgb(64, 245, 255);
    color: #000;
}

/* ---- Boston tagline heading ---- */

#taglineHeading {
    font-family: 'Boston', 'Good Times', 'Turret Road', 'Oxanium', monospace;
    color: rgb(64, 255, 156);
    border-bottom: 1px solid rgb(64, 255, 156);
    padding-bottom: 0.3em;
    margin: 0 0 2em;
    font-size: clamp(1rem, 3vw, 1.5rem);
    text-align: center;
    letter-spacing: 0.07em;
    font-weight: normal;
}

/* ---- Sandworm profiles ---- */

.wormProfile {
    display: flex;
    gap: 1.4em;
    margin-bottom: 2.2em;
    align-items: flex-start;
}

.wormPortrait {
    flex-shrink: 0;
    width: clamp(80px, 16%, 130px);
    aspect-ratio: 1;
    background: rgb(41, 159, 166);
    border: 2px inset rgb(23, 88, 92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.wormPortrait span {
    color: #000;
    font-size: 0.72em;
    text-align: center;
    padding: 4px;
}

.wormInfo h3 {
    font-family: 'Boston', 'Good Times', 'Turret Road', 'Oxanium', monospace;
    color: rgb(64, 255, 156);
    font-size: clamp(1.7rem, 4vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.2em;
}

.wormSize {
    display: block;
    color: rgb(91, 140, 115);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5em;
}

.wormInfo p {
    color: rgb(182, 191, 182);
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0;
}

/* ---- Hunter / character profiles (3-column) ---- */

.hunterProfile {
    display: flex;
    gap: 1.2em;
    margin-bottom: 2.5em;
    align-items: flex-start;
}

.hunterProfile .profilePortrait {
    flex-shrink: 0;
    width: clamp(165px, 30%, 261px);
    aspect-ratio: 1;
    background: rgb(61, 61, 61);
    border: 3px inset rgb(23, 88, 92);
    box-sizing: border-box;
}

.hunterProfile .profilePortrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hunterProfile .profileInfoCol {
    flex: 1;
    min-width: 0;
}

.hunterName {
    font-family: 'Boston', 'Good Times', 'Turret Road', 'Oxanium', monospace;
    color: rgb(64, 255, 156);
    font-size: clamp(1.64rem, 4vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.4em;
    font-weight: normal;
}

.profileBio {
    font-family: 'Oxanium', monospace;
    color: rgb(243, 255, 242);
    font-size: clamp(0.78rem, 1.8vw, 0.9rem);
    line-height: 1.45;
    margin: 0;
}

.hunterProfile .profileAbilityCol {
    flex: 0 0 clamp(155px, 34%, 275px);
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.abilityBlock {
    background: rgba(23, 88, 92, 0.45);
    border-left: 2px solid rgb(64, 255, 156);
    padding: 0.5em 0.65em;
    margin-bottom: 0.6em;
}
.abilityBlock:last-child { margin-bottom: 0; }

.abilityBlock .abilityName {
    color: rgb(64, 255, 156);
    font-family: 'Oxanium', monospace;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.25em;
    line-height: 1.35;
}

.ability-passive { color: rgb(255, 180, 51); }  /* Amber */
.ability-charge  { color: rgb(255, 110, 26); }  /* Blood orange */

.abilityMeta {
    color: rgb(91, 140, 115);
    font-size: 0.9em;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}

.abilityBlock .abilityDesc {
    font-family: 'Oxanium', monospace;
    color: rgb(182, 191, 182);
    font-size: 0.78em;
    margin: 0;
    line-height: 1.35;
}

/* Mobile: stack portrait+bio on one row, abilities full-width below */
@media (max-width: 520px) {
    .hunterProfile {
        flex-wrap: wrap;
    }
    .hunterProfile .profilePortrait {
        flex: 0 0 30%;
        width: 30%;
        aspect-ratio: unset;
        align-self: stretch;
        overflow: hidden;
    }
    .hunterProfile .profileInfoCol {
        flex: 1;
    }
    .hunterProfile .profileAbilityCol {
        flex: 0 0 100%;
        border-top: 1px solid rgba(64, 255, 156, 0.25);
        padding-top: 0.6em;
    }
}

/* Worm profiles go single-column on narrow screens */
@media (max-width: 380px) {
    .wormProfile {
        flex-direction: column;
    }
    .wormPortrait {
        width: 80px;
    }
}

/* ---- Mobile footer: copyright breaks to its own line ---- */
@media (max-width: 768px) {
    .footerCopyright {
        display: block;
        margin-top: 0.35em;
    }
}

/* ---- Mobile portrait header: compact logo, display name as dashboard link, no logout ---- */
@media (max-width: 768px) and (orientation: portrait) {
    #siteLogo a {
        font-size: 0.825em; /* 25% smaller than default 1.1em */
    }
    #logoutBtn {
        display: none;
    }
    #dashboardLink {
        display: none; /* display name itself links to dashboard on mobile */
    }
    #siteHeader #welcomeMsg {
        color: rgb(77, 255, 64); /* punchy green — link color */
    }
    #siteHeader #welcomeMsg:hover {
        color: rgb(64, 245, 255);
    }
    /* Recent Opponents: name on its own line, buttons below */
    .mmOpponentRow {
        flex-wrap: wrap;
        row-gap: 0.3em;
    }
    .mmOpponentName {
        flex: 0 0 100%;
    }
}

/* ================================================================= */
/* MATCHMAKING + CONTACT MANAGEMENT UI                               */
/* ================================================================= */

/* Accordion headers */
.mmAccordionHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    padding: 0.3em 0;
    border-bottom: 1px solid rgb(91, 140, 115);
    margin-bottom: 0.6em;
    user-select: none;
}
.mmAccordionHeader:hover .mmAccordionLabel {
    color: rgb(64, 245, 255);
}
.mmAccordionLabel {
    color: rgb(91, 140, 115);
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mmAccordionArrow {
    color: rgb(91, 140, 115);
    font-size: 1.1em;
    transition: transform 0.2s;
}
.mmAccordionArrow.open {
    transform: rotate(180deg);
}
.mmAccordionBody {
    margin-top: 0.4em;
}

/* Section-level h2 that acts as an accordion trigger */
.dashSection > h2.dashSectionAccordion {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3em;
    user-select: none;
}
.dashSection > h2.dashSectionAccordion:hover {
    color: rgb(64, 245, 255);
}
.dashSection > h2.dashSectionAccordion:hover .mmAccordionArrow {
    color: rgb(64, 245, 255);
}

/* Inline action text links */
.mmTextLink {
    color: rgb(77, 255, 64);
    text-decoration: none;
    font-size: 0.9em;
    white-space: nowrap;
}
.mmTextLink:hover {
    color: rgb(64, 245, 255);
}

/* Recent opponents list rows */
.mmOpponentRow {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.35em 0;
    border-bottom: 1px solid rgb(40, 40, 40);
    font-size: 0.9em;
}
.mmOpponentRow:last-child {
    border-bottom: none;
}
.mmOpponentName {
    flex: 1;
    color: rgb(182, 191, 182);
}
.mmOpponentActions {
    display: flex;
    gap: 0.8em;
}

/* Disclosure radio inline in recent opponents */
.mmDisclosurePrompt {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.82em;
    color: rgb(91, 140, 115);
}
.mmDisclosurePrompt label {
    cursor: pointer;
    color: rgb(182, 191, 182);
}

/* Combobox */
.mmComboRow {
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
}
.mmComboWrapper {
    position: relative;
    flex: 1;
    max-width: 320px;
}
.mmComboInput {
    width: 100%;
    background: rgb(40, 40, 40);
    border: 1px solid rgb(64, 255, 156);
    color: rgb(64, 255, 156);
    font-family: monospace;
    font-size: 0.95em;
    padding: 5px 7px;
    box-sizing: border-box;
    border-radius: 2px;
}
.mmComboInput:focus {
    outline: none;
    border-color: rgb(64, 245, 255);
}
.mmComboDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgb(30, 30, 30);
    border: 1px solid rgb(64, 255, 156);
    border-top: none;
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
}
.comboOption {
    padding: 5px 8px;
    color: rgb(182, 191, 182);
    font-size: 0.9em;
    cursor: pointer;
}
.comboOption:hover,
.comboOption.highlighted {
    background: rgb(41, 50, 41);
    color: rgb(64, 255, 156);
}

/* Random opponent section */
.mmGroupLabel {
    display: block;
    color: rgb(91, 140, 115);
    font-size: 0.82em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5em;
}
.mmPillGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-left: 1em;
}
.mmPillGroup .pillBtn {
    font-size: 0.72rem;
    padding: 0.28em 1em;
}
.mmPillGroup .pillBtn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Contact request notifications */
#contactNotifications:not(:empty) {
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid rgb(60, 60, 60);
}
.mmContactRequest {
    display: flex;
    align-items: center;
    gap: 0.7em;
    flex-wrap: wrap;
    padding: 0.5em 0;
    border-bottom: 1px solid rgb(40, 40, 40);
    font-size: 0.9em;
}
.mmContactRequest:last-child {
    border-bottom: none;
}
.mmRequestText {
    flex: 1;
    color: rgb(182, 191, 182);
    min-width: 180px;
}
.mmRequestText::before {
    content: "> ";
    color: rgb(64, 255, 156);
}
.mmReqBtn {
    font-family: monospace;
    font-size: 0.78em;
    padding: 3px 8px;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    white-space: nowrap;
}
.mmReqBtn.grant {
    background: rgb(20, 50, 30);
    border-color: rgb(64, 255, 156);
    color: rgb(64, 255, 156);
}
.mmReqBtn.grant:hover {
    background: rgb(40, 90, 55);
}
.mmReqBtn.deny {
    background: rgb(40, 10, 10);
    border-color: rgb(255, 64, 64);
    color: rgb(255, 110, 26);
}
.mmReqBtn.deny:hover {
    background: rgb(80, 20, 20);
}

/* Contacts + blocked tables */
.mmTableScroll {
    overflow-x: auto;
    margin-top: 0.5em;
}
.mmContactTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    min-width: 500px;
}
.mmContactTable th {
    color: rgb(91, 140, 115);
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgb(91, 140, 115);
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
}
.mmContactTable td {
    padding: 5px 6px;
    border-bottom: 1px solid rgb(35, 35, 35);
    color: rgb(182, 191, 182);
    vertical-align: middle;
}
.mmContactTable tr:last-child td {
    border-bottom: none;
}
.mmCheckmark {
    color: rgb(64, 255, 156);
    font-size: 1em;
}
.mmTableEmptyNote {
    color: rgb(91, 140, 115);
    font-size: 0.85em;
    font-style: italic;
    padding: 0.5em 0;
}
/* Small table action buttons */
.mmTableBtn {
    font-family: monospace;
    font-size: 0.75em;
    padding: 2px 7px;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    white-space: nowrap;
}
.mmTableBtn.danger {
    background: rgb(40, 10, 10);
    border-color: rgb(255, 64, 64);
    color: rgb(255, 110, 26);
}
.mmTableBtn.danger:hover {
    background: rgb(80, 20, 20);
}
.mmTableBtn.neutral {
    background: rgb(30, 30, 30);
    border-color: rgb(102, 102, 102);
    color: rgb(182, 191, 182);
}
.mmTableBtn.neutral:hover {
    border-color: rgb(64, 245, 255);
    color: rgb(64, 245, 255);
}
/* Compact pill buttons inside opponent rows and open games table */
.mmOpponentPill,
.mmOpenGamePill {
    font-size: 0.72rem;
    padding: 0.28em 1em;
}
.mmOpponentPill:disabled,
.mmOpenGamePill:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.mmContactLabel {
    font-size: 0.72rem;
    color: rgb(91, 140, 115);
}
/* Open Games NEW! status badge */
.mmStatusNew {
    color: rgb(255, 180, 51);
    font-weight: bold;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

/* ================================================================= */
/* HISTORY PAGE — TIMELINE ARTICLE                                    */
/* ================================================================= */

#historyMain {
    min-height: 100vh;
}

/* Title block — lives inside #historyInner so the gradient background covers it */
.historyTitle {
    font-family: 'Good Times', 'Turret Road', sans-serif;
    color: rgb(243, 255, 242);
    font-size: clamp(1.125rem, 3.75vw, 2.1rem);
    margin: 0 0 0.4rem;
    text-align: center;
    text-shadow: 0 0 20px rgba(243, 255, 242, 0.25);
}
.historySubtitle {
    color: rgb(91, 140, 115);
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    margin: 0 0 2.5rem;
    font-style: italic;
    text-align: center;
}

/* Inner content container — matches splashInner gradient treatment */
#historyInner {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(18, 18, 18, 0.94) 5%,
        rgba(18, 18, 18, 0.94) 95%,
        transparent 100%
    );
}

/* Timeline container */
.timeline {
    position: relative;
    padding-left: 2.75rem;
}

/* Vertical glow line */
.timeline::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 0.5rem;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(64, 255, 156, 0.8) 0%,
        rgba(64, 255, 156, 0.2) 100%
    );
}

/* Era entry */
.timelineEntry {
    position: relative;
    margin-bottom: 3.5rem;
}

/* Node circle */
.timelineNode {
    position: absolute;
    left: -2.15rem;
    top: 0.3rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: rgb(64, 255, 156);
    border: 2px solid rgb(20, 20, 20);
    box-shadow: 0 0 10px rgba(64, 255, 156, 0.7);
}

/* Era heading — Boston uppercase, matches worm/hunter name heading style on splash */
h2.eraHeader {
    font-family: 'Oxanium', monospace;
    color: rgb(64, 255, 156);
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
}

/* Body text */
.entryBody p {
    color: rgb(182, 191, 182);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.entryBody p:last-child {
    margin-bottom: 0;
}

/* Inline text link (buried download link, etc.) */
.historyLink {
    color: rgb(77, 255, 64);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.historyLink:hover {
    color: rgb(64, 245, 255);
}

/* Images */
.historyImg {
    margin: 1.5rem 0;
}
.historyImg img {
    max-width: 100%;
    border: 1px solid rgba(64, 255, 156, 0.3);
    border-radius: 4px;
    display: block;
}
.historyImg figcaption {
    color: rgb(91, 140, 115);
    font-size: 0.82rem;
    margin-top: 0.4rem;
    font-style: italic;
}

/* Standalone centered images — beveled border matching character portraits */
.histImgWrap {
    text-align: center;
    margin: 1.5rem 0;
    line-height: 0;
}
.histImg {
    border: 3px inset rgb(23, 88, 92);
    max-width: 100%;
}

/* 4-up unit screenshot grid */
.imgGrid4 {
    display: flex;
    gap: 3px;
    margin: 1.5rem 0;
}
.imgGrid4 img {
    flex: 1;
    min-width: 0;
    border: 3px inset rgb(23, 88, 92);
}

/* Punctuation characters that Boston may not glyph — fall back to body font at same weight */
.eraHeaderPunct {
    font-family: 'Oxanium', monospace;
}

/* Section divider above Updates */
.historySep {
    border: none;
    border-top: 1px solid rgba(64, 255, 156, 0.25);
    margin: 3rem 0 2rem;
}

@media (max-width: 540px) {
    .imgGrid4 {
        flex-wrap: wrap;
    }
    .imgGrid4 img {
        flex: none;
        width: 100%;
        max-height: none;
    }
}

@media (max-width: 480px) {
    .timeline {
        padding-left: 2rem;
    }
    .timeline::before {
        left: 0.4rem;
    }
    .timelineNode {
        left: -1.65rem;
        width: 0.85rem;
        height: 0.85rem;
    }
}