        /* Total silliness*/
        #splashScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #5e1a86;
            /* Deep purple */
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.5em;
            font-family: "Bungee Hairline", sans-serif;
            /*alternately: "Jolly Lodger", serif, system-ui;*/
            z-index: 9999;
            transition: opacity 1s ease-in-out;
        }

        #splashScreen.fade-out {
            opacity: 0;
            pointer-events: none;
        }

        button#newCharBtn.getBig {
            transform: scale(3);
            transition: transform 0.5s ease-in-out;
            border: 2px solid #0f0;
        }

        button#newCharBtn.getSmall {
            transform: scale(-3);
            transition: transform 0.5s ease-in-out;
            border: 2px solid #0f0;
        }

        button#newCharBtn.getBig.pulsing {
            animation: pulse 1s infinite;
        }

        /* Wil'o-the-Wisp */
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, #ffffff, #ffccff, transparent);
            border-radius: 50%;
            pointer-events: none;
            z-index: 10000;
            box-shadow: 0 0 10px #fff, 0 0 20px #ff66ff;
            animation: flicker 0.3s infinite alternate;
        }

        .stat-bar-bg {
            background: #333;
            border-radius: 5px;
            height: 18px;
            position: relative;
        }

        .stat-god {
            background: linear-gradient(90deg, gold, orange 90%);
        }

        .stat-demigod {
            background: linear-gradient(90deg, #8ef, #38f 80%);
        }

        .stat-heroic {
            background: linear-gradient(90deg, #7f7, #4b4 70%);
        }

        .stat-skillful {
            background: linear-gradient(90deg, #ccc, #7af 60%);
        }

        .stat-average {
            background: linear-gradient(90deg, #eee, #aaa 50%);
        }

        .stat-terrible {
            background: linear-gradient(90deg, #f99, #a44 60%);
        }

        .stat-handicapped {
            background: linear-gradient(90deg, #d5d5d5, #333 50%);
        }

        @keyframes flicker {
            0% {
                transform: scale(1) translate(0, 0);
                opacity: 0.8;
            }

            100% {
                transform: scale(1.3) translate(1px, -1px);
                opacity: 1;
            }
        }

        /* Flash effect on #storyLog */
        @keyframes flashEffect {
            0% {
                background-color: inherit;
            }

            50% {
                background-color: #444 !important;
            }

            /* Brighter flash */
            100% {
                background-color: inherit;
            }
        }

        /* For Webkit browsers (Chrome, Edge, Safari) */
        body::-webkit-scrollbar {
            width: 12px;
            background: #181818;
            /* track */
        }

        body::-webkit-scrollbar-thumb {
            background: linear-gradient(120deg, #253326 60%, #374b3e 100%);
            border-radius: 9px;
            border: 2px solid #265a33;
            /* mid/dark green */
            min-height: 24px;
            box-shadow: 0 0 8px #18211860 inset;
        }

        body::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(120deg, #2d4c37 60%, #43604e 100%);
            border-color: #3fa36c;
        }

        body::-webkit-scrollbar-corner {
            background: #222;
        }

        body::-webkit-scrollbar:horizontal {
            display: none;
            /* Hide horizontal scrollbar */
        }

        /* Actual meat n bones*/
        body {
            background-color: #121212;
            color: #f5f5f5;
            font-family: "Averia Gruesa Libre", system-ui;
            /* alternately: "Oldenburg", serif;*/
            font-weight: 400;
            font-style: normal;
            /* padding: 2em; */
            /* Body padding is what messed up the alignment, along with gap:2em in .main-layout */
            text-align: center;
            scrollbar-width: thin;
            scrollbar-color: #263e31 #181818;
            /* thumb, track */
            overflow-y: auto;
            /* Show vertical scrollbar only if needed */
            overflow-x: hidden;
            /* Never show horizontal scrollbar */
        }

        .main-layout {
            display: flex;
            justify-content: space-between;
            /* gap: 2em; */
            /* Never use this. This is the enemy. */
            max-width: 1100px;
            /* Or whatever fits your design */
            margin: 0 auto;
            /* This centers the flex container horizontally */
        }

        /* default is hidden until the page loads */
        #pageFooter,
        #leftPanel,
        #centerPanel,
        #rightPanel {
            display: none;
        }

        #statsDisplay {
            max-height: 300px;
            overflow: scroll;
        }

        #netDisplay {
            /* your char's network is displayed here*/
            max-height: 300px;
            overflow: scroll;
        }

        /* storylog container */
        .tab-story{
            scrollbar-width:none;
            width:100%;
            justify-content: center;
        }

        .tab-buttons {
            display: flex;
            gap: 0.5em;
            margin-bottom: 1em;
        }

        .tab-buttons button {
            flex: 1;
            background-color: #222;
            border: 1px solid #555;
            color: white;
            padding: 0.5em;
            cursor: pointer;
        }

        .tab-buttons button:hover {
            background-color: #333;
        }

        .tab-buttons button.active {
            border: 2px solid #06e624;
            border-radius: 3px;
            background-color: #333;
            box-shadow: 0 0 6px #06c45588;
            font-weight: bold;
            z-index: 2;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active,
        .tab-content:target {
            display: block;
        }


        h1 {
            margin-bottom: 0.5em;
            font-family: "Bungee Hairline", serif;
            /*alternately: "Jolly Lodger", serif, system-ui;*/
            font-weight: 900;
            font-size: xx-large;
            font-style: normal;
        }

        h2 {
            font-family: "Bungee Hairline", serif;
            /*alternately: "Jolly Lodger", serif, system-ui;*/
            font-weight: 850;
            font-size: x-large;
            font-style: normal;
        }

        h3 {
            font-family: "Bungee Hairline", serif;
            /*alternately: "Jolly Lodger", serif, system-ui;*/
            font-weight: 800;
            font-size: large;
            font-style: normal;
        }

        .centered {
            display: flex;
            justify-content: center;
            margin-top: 1em;
        }

        .smallcap {
            font-variant: small-caps;
        }

        .bar-container {
            margin: 1em auto;
            width: 80%;
            max-width: 600px;
        }

        .rels-bar-bg {
            position: relative;
            background-color: #333;
            border-radius: 5px;
            height: 20px;
            overflow: hidden;
            margin-top: 4px;
        }

        .rels-bar-top {
            position: absolute;
            left: 0;
            top: 0;
            height: 50%;
            background: rgb(245, 90, 193);
            border-radius: 5px 5px 0 0;
            width: var(--top-width, 0%);
            transition: width 0.3s;
        }

        .rels-bar-bottom {
            position: absolute;
            left: 0;
            top: 50%;
            height: 50%;
            background: rgb(141, 55, 180);
            border-radius: 0 0 5px 5px;
            width: var(--bottom-width, 0%);
            transition: width 0.3s;
        }

        .rels-bar-label {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            color: #fff;
            text-align: center;
            line-height: 20px;
            font-size: 11px;
            pointer-events: none;
            z-index: 2;
        }

        .rels-bar-bg.faded {
            opacity: 0.25;
        }

        .rel-line2 {
            font-size: 0.93em;
            color: #ccc;
        }

        .relsbarmarg {
            margin: 5px 0 0 0;
        }

                .fam-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* .fam-row {
            padding: 6px 0 6px 4px;
            border-bottom: 1px solid #333;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        } */

        .fam-gender {
            color: #888;
            margin-left: 8px;
        }

        .fam-affin {
            margin-left: 18px;
            font-size: 0.95em;
            color: #88f;
        }

        .fam-row {
            padding: 14px 0 14px 10px;
            border-bottom: 1px solid #242035;
            margin-bottom: 7px;
            background: rgba(40,18,60,0.25);
            border-radius: 9px;
            box-shadow: 0 2px 8px #0008;
            display: block;
            transition: background 0.2s;
        }

        .fam-row:hover {
            background: rgba(120,90,180,0.10);
        }

        .fam-mainline {
            display: flex;
            align-items: baseline;
            gap: 1.3em;
            font-size: 1.12em;
            font-weight: 500;
            margin-bottom: 0.1em;
            color: #fff;
        }

        .fam-name {
            font-weight: bold;
            color: #ffd1ff;
            font-size: .9em;
            letter-spacing: 0.02em;
        }

        .fam-connection {
            color: #90e0fb;
            font-style: italic;
        }

        .fam-age {
            color: #cfcfcf;
            font-size: 0.8em;
        }

        .fam-secondary {
            font-size: 0.95em;
            color: #b4a6f5;
            margin-bottom: 0.14em;
        }

        .fam-bond {
            font-style: italic;
            color: #f6baff;
            font-size: .8em;
            margin-left: 1em;
        }

        .fam-bar-wrap {
            margin-top: 6px;
            margin-bottom: 0px;
            width: 80%;
        }

        .fam-job {
            color: #ffd28d;
            margin-left: 1.2em;
            font-size: 0.99em;
            font-style: italic;
            font-weight: 400;
        }


        .virtue {
            margin: 0 0 0.75em 0;
            display: flex;
            align-items: left;
        }

        .virtue-icon-col {
            width: 1.5em;
            text-align: center;
            font-size: 1.2em;
        }


        .drive {
            margin: 0.75em 0;
            display: flex;
            align-items: right;
        }


        .drive-icon-col {
            width: 1.5em;
            text-align: center;
            font-size: 1.2em;
        }

        .drive-info {
            flex-grow: 1;
            text-align: left;
        }

        .label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25em;
            font-size: 0.9em;
        }

        .drive-name {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-thickness: .5px;
        }

        .bar-bg {
            background-color: #333;
            border-radius: 5px;
            height: 20px;
            overflow: hidden;
        }

        .bar-fill {
            height: 100%;
            background-color: #28a745;
            width: 50%;
            transition: width 0.3s;
        }

        button {
            font-family: "Averia Gruesa Libre", system-ui;
            /* alternately: "Oldenburg", serif;*/
            margin: 1em 0.5em;
            padding: 0.6em 1.2em;
            background-color: #222;
            color: #f5f5f5;
            border: 1px solid #444;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #333;
        }

        .danger {
            background-color: #dc3545 !important;
        }

        .warning {
            background-color: #ffc107 !important;
        }

        .shadowGear {
            color: #ff4444;
            font-weight: bold;
        }

        /* Tooltip for Drives & Virtues*/
        #tooltip {
            position: fixed;
            background-color: #1f1f1f;
            border: 1px solid #252525;
            padding: 1em;
            max-width: 300px;
            border-radius: 8px;
            z-index: 100;
            display: none;
            text-align: left;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        }

        /* Tooltip for Factions*/
        .tooltip-box {
            /* Tooltip for Drives & Virtues pt 1 of 2*/
            position: absolute;
            /* anchored to main container or document body */
            z-index: 1000;
            max-width: 280px;
            padding: 8px 12px;
            background: #1b1b1b;
            color: #636363;
            border: 1px solid #666;
            border-radius: 6px;
            font-size: 0.9em;
            line-height: 1.4;
            pointer-events: none;
        }

        .clickable-faction {
            /* Tooltip for Drives & Virtues pt 2 of 2*/
            color: #4eb1e2;
            text-decoration: underline;
            text-decoration-thickness: .5px;
            cursor: pointer;
        }

        /* Anyway, back to layout stuff...*/
        .column {
            flex: 1;
            min-width: 280px;
        }

        .story-log {
            background-color: #1a1a1a;
            border: 1px solid #333;
            padding: 1em;
            height: 300px;
            overflow-y: auto;
            text-align: left;
            font-size: 0.9em;
            border-radius: 8px;
        }

        .drive-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.5em;
            width: 100%;
            margin: 1em auto 0 auto;
        }

        .drive-actions button {
            font-family: "Averia Gruesa Libre", system-ui;
            /* alternately: "Oldenburg", serif;*/
            width: 100%;
            margin: 0;
            /* Remove default margin for tight grid fit */
            box-sizing: border-box;
            font-family: "Averia Gruesa Libre", system-ui;
            padding: 0.5em 0.5em;
            font-size: 0.75em;
            background-color: #292929;
            border: 1px solid #555;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .drive-actions button:hover {
            background-color: #444;
        }

        .drive-btn {
            opacity: 1;
            transition: 0.2s;
        }

        .drive-btn.dimmed {
            opacity: 0.3;
        }

        .drive-btn.active {
            border: 2px solid #0f0;
            opacity: 1;
        }

        #progressBtn.pulsing {
            animation: pulse 1s infinite;
            border: 2px solid #0f0;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 5px #0f0;
            }

            50% {
                box-shadow: 0 0 20px #0f0;
            }

            100% {
                box-shadow: 0 0 5px #0f0;
            }
        }

        .drive-up {
            color: #11e041;
            /* Green */
        }

        .drive-down {
            color: #dc3545;
            /* Red */
        }

        .virtue-okay {
            background-color: #88b366;
            /* yellow-green */
        }

        .virtue-full {
            background-color: #33cc99;
            /* minty blue-green */
        }

        .story-entry {
            animation: fadeIn 0.5s ease-in-out;
            white-space: pre-wrap;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .death-divider {
            text-align: center;
            color: #aa0000;
            font-size: 1.1em;
            margin: 0.5em 0;
        }

        .death-text {
            color: #ff0000;
            font-variant: small-caps;
            text-align: center;
            margin-bottom: 0.5em;
        }

        button.disabled {
            opacity: 0.3;
            pointer-events: none;
        }

        body.fadeout {
            animation: fadeToBlack 1s ease-in-out;
        }

        @keyframes fadeToBlack {
            0% {
                background-color: #121212;
                opacity: 1;
            }

            50% {
                background-color: #000000;
                opacity: 0;
            }

            100% {
                background-color: #121212;
                opacity: 1;
            }
        }

        /* Page grayscale effect on death */
        .grayscale {
            filter: grayscale(100%);
        }

        /* Highlighted button */
        button.highlight {
            background-color: #2e8b57;
            border-color: #66ff99;
            color: #fff;
            font-weight: bold;
            animation: pulse 1s infinite;
        }

        /* Pulsing glow */
        .pulsing {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 5px #0f0;
            }

            50% {
                box-shadow: 0 0 20px #0f0;
            }

            100% {
                box-shadow: 0 0 5px #0f0;
            }
        }

        /* Mappy CSS */
        #mappy-container {
            width: 100%;
            height: auto;
            /* margin: 30px auto; */
            border: 3px solid #4c4c6d;
            border-radius: 12px;
            box-shadow: 0 0 15px #000;
            overflow: hidden;
        }

        #mappy {
            background-color: #2b2b40;
            /* Midnight blue map bg */
            width: 100%;
            height: auto;
            display: block;
        }

        .place {
            fill: #ff8fa3;
            /* Soft pink */
            stroke: #ffcfe1;
            stroke-width: 2px;
            cursor: pointer;
            transition: fill 0.2s ease, r 0.2s ease;
        }

        .place:hover {
            fill: #ffcfe1;
            r: 12;
        }

        .label {
            font-family: 'Trebuchet MS', sans-serif;
            font-size: 12px;
            text-anchor: middle;
            fill: #e0e0ff;
            pointer-events: none;
            user-select: none;
        }

        #inventoryDisplay {
            text-align: left;
            justify-content: left;
            align-items: left;
        }

        .inventory-item {
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e0e0e0;
        }

        .inventory-desc {
            font-size: 0.8em;
            color: #555;
        }

        .inventory-btn {
            background: none;
            border: none;
            font-size: 1.5em;
            cursor: pointer;
            padding: 0.25em 0.6em 0.25em 0;
            margin: 0;
            line-height: 1.2;
            min-width: 48px;
            /* For clickability */
            min-height: 48px;
            vertical-align: top;
            color: inherit;
        }

        .inventory-btn:focus {
            outline: 2px solid #6fa7ff;
        }

        .eventContainer {
            background: #191219;
            border-radius: 9px;
            box-shadow: 0 2px 12px #0008;
            padding: 1.1em 1.3em 1.2em 1.3em;
            margin: 1.5em auto;
            width: 95%;
            max-width: 600px;
            text-align: left;
        }

        .eventPrompt {
            margin: 0 0 0.9em 0 !important;
            padding: 0 !important;
            text-indent: 0 !important;
            font-size: 1.07em !important;
            text-align: left !important;
            font-family: inherit;
            color: #ffd1ff;
            letter-spacing: 0.03em;
            line-height: 1.38;
        }

        .eventPrompt .eventAge, .eventPrompt b {
            font-weight: 600;
            color: #bbb2ff;
            margin-right: 0.5em;
            font-size: 0.92em;
        }

        .choiceBtnContainer {
            display: flex;
            flex-direction: row;
            gap: 0.75em;
            justify-content: flex-start;
            margin: 0.3em 0 0 0 !important;
            padding: 0 !important;
        }

        .choiceBtn {
            min-width: 96px !important;
            max-width: 210px !important;
            font-size: 0.97em !important;
            padding: 0.37em 0.9em !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            border-radius: 7px !important;
            background: #322139;
            color: #ffedfa;
            border: 1px solid #a089a0;
            font-family: inherit;
            transition: background 0.18s, color 0.18s, box-shadow 0.2s;
            box-shadow: 0 1px 6px #1a001166;
            outline: none;
        }
        .choiceBtn:hover:enabled {
            background: #413158;
            color: #fff7ff;
            border-color: #fff;
            box-shadow: 0 0 10px #ffd1ff88;
        }
        .choiceBtn:disabled {
            opacity: 0.48;
            cursor: not-allowed;
        }

        @media (max-width: 600px) {
            .eventContainer {
                padding: 1em 0.5em 1.1em 0.5em;
                max-width: 99vw;
            }
            .choiceBtn {
                min-width: 70px !important;
                font-size: 0.95em !important;
            }
        }
        .event-result-description {
            color: #ffc3ee;
            font-style: italic;
            margin: 0.8em 0 0 0;
            padding: 0;
            font-size: 1em;
            letter-spacing: 0.01em;
            text-align: left;
        }

        .audio-row {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            gap: 12px;
        }

        .audio-row label {
            width: 60px;
            color: #cc4aff;
            font-weight: bold;
            font-size: 1.1em;
        }

        .audio-row input[type="range"] {
            flex: 1;
            accent-color: #06e624;
            background: #333;
            height: 4px;
            border-radius: 2px;
        }

        .audio-row button {
            background: #222;
            border: 1px solid #ffe066;
            color: #ffe066;
            border-radius: 6px;
            cursor: pointer;
            padding: 3px 10px;
            font-size: 1em;
            box-shadow: 0 0 6px #ffe06688;
        }

        .audio-row button:hover {
            background: #333;
            border-color: #cc4aff;
            color: #cc4aff;
            box-shadow: 0 0 8px #cc4aff88;
        }
