/* ============================================================
   DISCO ELYSIUM × ELYSIAN — Neocities personal site
   Dialogue-panel template (after kciurleo/discoelysiumink, MIT)
   merged with the Elysian Obsidian theme for readability:
   wider column, taller line-height, title cards, mono nav,
   boxed voice callouts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400&family=Oswald:wght@500;600&family=IBM+Plex+Mono:wght@400;600&family=Dosis:wght@200;300&display=swap');

:root {
    /* DE dialogue-panel palette */
    --bg: #060606;
    --text: #c9cdb9;          /* pale sage body text */
    --accent: #be3c1c;        /* DE red-orange (links, choices) */
    --accent-read: #8d331a;   /* visited / dimmed choice */
    --muted: #8b8576;         /* byline grey */
    --check: #7e796a;         /* check grey */
    --task: #86a979;          /* task / XP green */
    --int: #6cc6ce;           /* INTELLECT cyan */
    --psy: #705cbb;           /* PSYCHE purple */
    --fys: #c6496b;           /* PHYSIQUE magenta */
    --mot: #e4b934;           /* MOTORICS gold */

    /* Elysian additions */
    --panel: #1c1c1c;
    --paper: #f5f5f5;
    --line: #2c2c2c;
    --name-font: 'Oswald', sans-serif;
    --body-font: 'Spectral', 'Quattrocento', Georgia, serif;
    --ui-font: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    font-family: var(--body-font);
    color: var(--text);
    counter-reset: section;
}

/* ---------- layout: the dialogue panel ---------- */
.container {
    max-width: 680px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 2.5em 56px 70px;
    background-color: #0b0b0b;
    background-image: url("images/backgroundtrans.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

@media (max-width: 720px) {
    .container { padding: 2em 26px 50px; }
}

p { font-size: 13.5pt; line-height: 1.65; margin: 1em 0; }

a { color: var(--accent); text-decoration: none; transition: color 0.4s; }
a:hover { color: #fff; transition: color 0.1s; }

img { display: block; margin: 0 auto; max-width: 100%; }

/* ---------- Elysian: persistent mono nav ---------- */
nav {
    font-family: var(--ui-font);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
    margin-bottom: 2.5em;
    text-align: center;
}
nav a { margin: 0 11px; white-space: nowrap; }
nav a.here { color: var(--text); border-bottom: 1px solid var(--mot); }

/* ---------- Elysian: inverted title cards ---------- */
.header { text-align: center; margin-bottom: 2em; }

.title-card {
    display: inline-block;
    background: var(--paper);
    color: #0b0b0b;
    font-family: var(--name-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 1.9em;
    padding: 3px 18px 4px;
}

.tagline {
    font-family: var(--ui-font);
    font-size: 0.78em;
    color: var(--muted);
    margin-top: 10px;
}

h2 {
    display: inline-block;
    background: var(--paper);
    color: #0b0b0b;
    font-family: var(--name-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 1em;
    padding: 1px 12px 2px;
    margin: 2.2em 0 0.4em;
}

h3 {
    font-family: var(--name-font);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95em;
    color: var(--mot);
    margin: 1.8em 0 0.3em;
}

/* ---------- DE: speaker names & inline skill voices ---------- */
.name, .int, .psy, .fys, .mot {
    font-family: var(--name-font);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.88em;
    letter-spacing: 0.04em;
}
.name { color: #fff; }
.int  { color: var(--int); }
.psy  { color: var(--psy); }
.fys  { color: var(--fys); }
.mot  { color: var(--mot); }

.check { color: var(--check); }
.task  { color: var(--task); }

.you:before {
    content: "YOU — ";
    font-family: var(--name-font);
    font-weight: 500;
    color: #fff;
    font-size: 0.88em;
}

.greyed { opacity: 0.5; }

/* ---------- Elysian: boxed voice callouts ---------- */
.voice {
    background: var(--panel);
    border-left: 3px solid var(--voice-color, var(--int));
    padding: 10px 16px;
    margin: 1.4em 0;
}
.voice p { margin: 0; font-size: 12.5pt; }
.voice .speaker { color: var(--voice-color, var(--int)); }
.voice.v-int { --voice-color: var(--int); }
.voice.v-psy { --voice-color: var(--psy); }
.voice.v-fys { --voice-color: var(--fys); }
.voice.v-mot { --voice-color: var(--mot); }

/* ---------- DE: numbered dialogue choices ---------- */
p.choice { color: var(--accent); margin: 0.35em 0; }
p.choice:before {
    color: #fff;
    counter-increment: section;
    content: "" counter(section) ". - ";
}
.read a { color: var(--accent-read); }
.read a:hover { color: #fff; }

/* ---------- DE: continue button ---------- */
.continue a {
    background-color: var(--accent);
    display: block;
    margin: 2em -56px 0;
    padding-left: 56px;
    font-family: 'Dosis', sans-serif;
    color: #fff;
    font-weight: 200;
    font-size: 17pt;
    line-height: 1.7em;
    text-transform: uppercase;
}
.continue a:hover { background-color: #d8431c; }

@media (max-width: 720px) {
    .continue a { margin: 2em -26px 0; padding-left: 26px; }
}

/* ---------- check-styled link bars ---------- */
p.red {
    display: block;
    margin: 0.3em -56px;
    padding: 2px 56px;
    min-height: 1.3em;
}

@media (max-width: 720px) {
    p.red { margin: 0.3em -26px; padding: 2px 26px; }
}

p.white, p.locked {
    width: fit-content;
    margin: 0.3em 0;
    padding: 2px 12px;
    min-height: 1.3em;
}

p.red { background-color: #d8431c; }
p.red a { color: #342b28; }
p.red:hover a { color: #fff; }

p.white { background-color: #cbc5b7; }
p.white a { color: #373735; }
p.white:hover { background-color: #858070; }
p.white:hover a { color: #fff; }

p.locked { background-color: #d5cfbf; }
p.locked a { color: var(--muted); pointer-events: none; }

/* ---------- lists: works, characters, updates ---------- */
.update { margin: 0.5em 0; font-size: 12.5pt; }
.update .date {
    font-family: var(--ui-font);
    font-size: 0.75em;
    color: var(--mot);
    margin-right: 10px;
}

ul.works { list-style: none; padding-left: 1.1em; margin: 0.4em 0 1.2em; }
ul.works li { font-size: 12.5pt; line-height: 1.6; margin: 0.35em 0; }
ul.works li::before { content: "—"; margin-right: 0.6em; margin-left: -1.1em; }
ul.works .year {
    font-family: var(--ui-font);
    font-size: 0.72em;
    color: var(--check);
    margin-left: 8px;
}
ul.works .desc { color: var(--muted); font-style: italic; }

.charfile { margin: 0.9em 0; font-size: 12.5pt; line-height: 1.55; }
.charfile .cname {
    font-family: var(--name-font);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.92em;
    letter-spacing: 0.04em;
    color: #fff;
}
.charfile .game {
    font-family: var(--ui-font);
    font-size: 0.7em;
    color: var(--check);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 8px;
}
.charfile .bio { color: var(--text); }

/* ---------- subpages: works & dossiers ---------- */
hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 2em auto;
    width: 60%;
}

blockquote {
    border-left: 3px solid var(--line);
    margin: 1.2em 0;
    padding: 2px 16px;
    color: var(--muted);
    font-style: italic;
}

.meta {
    font-family: var(--ui-font);
    font-size: 0.75em;
    color: var(--check);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin: -1em 0 2em;
    line-height: 1.9;
}
.meta a { font-size: inherit; }

.commentary {
    background: var(--panel);
    border-left: 3px solid var(--task);
    padding: 12px 16px;
    margin: 1.4em 0;
}
.commentary p { font-size: 12.5pt; margin: 0.5em 0; }
.commentary .speaker {
    font-family: var(--name-font);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    color: var(--task);
}

/* ---------- project galleries: moodboard, art, boards ---------- */
.mood-section img {
    display: block;
    width: 100%;
    max-width: 430px;
    margin: 0.8em auto 0;
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
}
.mood-section .cap {
    font-family: var(--ui-font);
    font-size: 0.68em;
    color: var(--check);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    margin-top: 9px;
}
.mood-section .cap a { font-size: inherit; }

/* art pages: even grid */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 11px;
    margin: 1.4em 0;
}
.gallery figure { margin: 0; }
.gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--line);
    cursor: zoom-in;
}

/* board pages: pinterest-style masonry via CSS columns */
.board {
    columns: 200px 3;
    column-gap: 12px;
    margin: 1.4em 0;
}
.board figure {
    margin: 0 0 12px;
    break-inside: avoid;
}
.board img {
    width: 100%;
    border: 1px solid var(--line);
    cursor: zoom-in;
}

.gallery figcaption, .board figcaption {
    font-family: var(--ui-font);
    font-size: 0.68em;
    color: var(--check);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 2px 0;
}
.gallery figcaption a, .board figcaption a { font-size: inherit; }
.gallery-empty { color: var(--check); }

/* lightbox overlay */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 3vh 3vw;
    background: rgba(0, 0, 0, 0.93);
    cursor: zoom-out;
}
.lightbox img {
    max-width: 92vw;
    max-height: 84vh;
    width: auto;
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.lightbox .lb-cap {
    font-family: var(--ui-font);
    font-size: 0.75em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

/* ---------- footer ---------- */
.footer {
    margin-top: 3.5em;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    text-align: center;
    font-family: var(--ui-font);
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--check);
}
.footer a { font-size: inherit; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track {
    background: white;
    border-left: 4px solid black;
    border-right: 4px solid black;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb { background: white; height: 50px; border-radius: 100px; }

/* ============================================================
   DESKTOP TWO-PANE — dialogue panel left, game world right
   Pages wrap content in:
     .stage > .container.panel  (the dialogue box)
     .stage > .world            (hubs: .scene decoration;
                                 works/dossiers: .container.reading)
   Mobile keeps the original single-column flow.
   ============================================================ */
.world { position: relative; }
.scene { display: none; }            /* decorative scene: desktop only */

/* on narrow screens, panel + reading stack as one continuous column */
@media (max-width: 1099px) {
    .work .container.panel   { min-height: 0; padding-bottom: 0.5em; }
    .work .container.reading { min-height: 0; padding-top: 0.5em; }
}

@media (min-width: 1100px) {
    :root { --panel-w: clamp(420px, 34vw, 580px); }

    body { background: #050505; overflow-x: hidden; }

    /* --- the dialogue panel: pinned right, scrolls internally --- */
    .container.panel {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: var(--panel-w);
        max-width: none;
        min-height: 0;
        margin: 0;
        overflow-y: auto;
        border-right: none;
        border-left: 1px solid var(--line);
        z-index: 3;
    }

    /* --- the world: isometric checkered floor --- */
    .world { margin-right: var(--panel-w); }
    .world::before {
        content: "";
        position: fixed;
        z-index: 0;
        top: -40vh; bottom: -40vh;
        left: -28vw; right: calc(var(--panel-w) - 18vw);
        background: conic-gradient(
            #20261f 0 25%, #141813 0 50%,
            #1d231c 0 75%, #11140f 0);
        background-size: 132px 132px;
        transform: rotateX(54deg) rotateZ(40deg);
    }

    /* light pool, grain & vignette over the floor */
    .world::after {
        content: "";
        position: fixed;
        z-index: 1;
        pointer-events: none;
        top: 0; bottom: 0; left: 0; right: var(--panel-w);
        background:
            url("images/backgroundtrans.png"),
            radial-gradient(ellipse at 62% 32%, rgba(228, 185, 52, 0.08), transparent 55%),
            radial-gradient(ellipse at 45% 55%, transparent 30%, rgba(0, 0, 0, 0.84) 100%);
    }

    .scene, .container.reading { position: relative; z-index: 2; }

    /* --- hubs: fixed decorative scene; the panel does the scrolling --- */
    .hub .world {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        right: var(--panel-w);
        margin: 0;
        overflow: hidden;
    }
    .hub .scene { display: block; height: 100%; }

    .scene .portrait {
        position: absolute;
        top: 6vh; right: 44px;
        width: clamp(160px, 15vw, 230px);
        margin: 0;
        padding: 14px 15px;
        background: url("images/portraitframe.png");
        background-size: 100% 100%;
        filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.65));
    }
    .scene .portrait img { width: 100%; margin: 0; }

    /* bottom-right HUD clock */
    .scene .hud {
        position: absolute;
        right: 38px; bottom: 26px;
        font-family: var(--ui-font);
        color: #e8e6dc;
        text-align: right;
    }
    .scene .hud .cash { color: var(--mot); margin-right: 16px; font-size: 0.85em; }
    .scene .hud .time { font-size: 2.1em; font-weight: 600; letter-spacing: 0.04em; }
    .scene .hud .day  { color: var(--muted); margin-left: 12px; font-size: 0.85em; }

    /* --- works & dossiers: the text floats on the floor --- */
    .work .world { min-height: 100vh; padding: 7vh 40px; }
    .work .container.panel { padding-bottom: 70px; }
    .work .container.reading {
        max-width: 740px;
        min-height: 0;
        margin: 0 auto;
        padding: 2.5em 56px 4em;
        /* muted: flat near-black, faint border — lets the dialogue
           panel keep the texture and stay the focal point */
        background-image: none;
        background-color: rgba(8, 8, 8, 0.82);
        border: 1px solid rgba(44, 44, 44, 0.55);
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.4);
    }
}

/* ---------- home-page guestbook card ---------- */
.guestbook {
    display: flex;
    flex-direction: column;
    background-color: rgba(8, 8, 8, 0.82);
    border: 1px solid rgba(44, 44, 44, 0.55);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.4);
    padding: 1.2em 1.3em 1.4em;
    margin: 1.5em 16px;
}
.guestbook h2 { margin-top: 0; }
.guestbook hr { margin: 2em 0; width: auto; }

@media (min-width: 1100px) {
    .hub .guestbook {
        position: absolute;
        z-index: 2;
        top: 7vh;
        bottom: 7vh;
        left: clamp(20px, 4vw, 70px);
        width: clamp(280px, 30vw, 410px);
        margin: 0;
        overflow-y: auto;
    }
}

/* guestbook embed — match the DE theme */
.guestbook .guestbooks___input-container { margin: 0.6em 0; }

.guestbook input,
.guestbook textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0b0b0b;
    border: 1px solid var(--line);
    color: var(--text);
    font-family: var(--body-font);
    font-size: 12pt;
    padding: 7px 10px;
}
.guestbook textarea { resize: vertical; }
.guestbook input::placeholder,
.guestbook textarea::placeholder { color: var(--check); }

.guestbook button {
    background: var(--accent);
    color: #fff;
    border: 0;
    font-family: var(--name-font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 16px;
    margin-top: 0.6em;
    cursor: pointer;
}
.guestbook button:hover { background: #d8431c; }

#guestbooks___guestbook-made-with { text-align: right; margin-top: 10px; }
#guestbooks___error-message { color: var(--fys); font-size: 0.85em; margin-top: 0.5em; }
#guestbooks___pow-status    { color: var(--check); font-size: 0.8em; margin-top: 0.5em; }