@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');

/* Class you can put on the body to turn the entire page into a GLEAM player */
.gleam-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #080808;
    /* TODO i miss the texture from the old GLEAM player */
}
.gleam-body > .gleam-player {
    box-shadow: 0 0 4px black;
}

.gleam-player {
    font-size: 20px;
    position: relative;
    overflow: hidden;
    z-index: 0;  /* stacking context */
    /* default size only */
    width: 800px;
    height: 600px;
    /* TODO this should be overridable by the script?  maybe??  or maybe that's for the much-awaited style system.  only shows when the backdrop isn't full-size or fully opaque, so */
    background: black;
    /* TODO what is a good reasonable default anyway, this is all over the place */
    font-family: "Source Sans Pro", Futura, Helvetica, Verdana, Arial, sans-serif;

    --transition-time: 0.1s;
}
.gleam-stage {
    position: absolute;
    z-index: 0;  /* stacking context */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: filter 0.5s;
}
.gleam-player.--paused .gleam-stage,
.gleam-player.--loading .gleam-stage {
    filter: blur(3px) saturate(0.25);
}

.gleam-player input {
    vertical-align: middle;
}

.gleam-progress {
    position: absolute;
    z-index: 9999;  /* above everything, but below the pause UI */
    left: 0;
    bottom: 0;
    height: 2px;
    --progress: 0%;
    width: var(--progress);
    background-color: #fff4;
    /* Use both white and black to make this visible on any background */
    border-right: 1px solid #fff9;
    box-shadow: 1px 0 0 #0009;
    transition: width var(--transition-time) ease-out;
}

/* Container used for the loading and pause overlays */
.gleam-overlay {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000c;
    color: white;
    text-shadow: 0 2px 1px #0004;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Transition used when fading OUT -- switch visibility to off at the end */
    /* Note that visibility is first so that transition-property can be extended */
    transition: visibility 0s ease-in var(--transition-time), opacity var(--transition-time) ease-in;
}
.gleam-overlay.--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
    /* Transition used when fading IN -- switch visibility on immediately */
    transition-delay: 0s;
    transition-timing-function: ease-out;
}
.gleam-overlay > header,
.gleam-overlay > footer {
    flex: 0 auto;
    font-size: 1.25em;
    padding: 0.33em;
    background: #000c;

    /* Both slide out of frame during a transition, looks very cool */
    transition: transform var(--transition-time) ease-in;
}
.gleam-overlay.--visible > header,
.gleam-overlay.--visible > footer {
    transform: none;
    transition-timing-function: ease-out;
}
.gleam-overlay > header {
    transform: translateY(-100%);
}
.gleam-overlay .-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.gleam-overlay > footer {
    text-align: right;
    color: #999;
    transform: translateY(100%);
}
.gleam-overlay h2 {
    font-size: 3em;
    margin: 0.5em;
    font-weight: normal;
    text-align: center;
    text-transform: lowercase;
    letter-spacing: 0.0625em;
}
/* Loading screen */
.gleam-overlay-loading {
    z-index: 10002;  /* above the pause button.  TODO this is stupid */
    background: #222;
    transition-property: visibility, opacity, background-color;
}
.gleam-overlay-loading.--finished {
    /* FIXME boo, this is copy/pasted from .gleam-overlay */
    background: #000c;
}
.gleam-overlay-loading > .-body {
    text-align: center;
}
.gleam-overlay-loading > .-body > p {
    flex: 0 0;
    margin: 0.125em 0.5em;
}
.gleam-overlay-loading .gleam-loading-progress {
    flex: 0 0;
    display: flex;
    font-size: 1.5em;
    margin-bottom: 1em;
}
/* Consists of -done -divider -total, and is intended to look like "3 / 97" but centered on the slash, so that it doesn't reflow when the progress updates */
.gleam-overlay-loading .gleam-loading-progress .-done,
.gleam-overlay-loading .gleam-loading-progress .-total {
    /* Start them at 50% width and shrink them equally, so the whole shebang is centered */
    flex: 0 1 50%;
}
.gleam-overlay-loading .gleam-loading-progress .-done {
    text-align: right;
}
.gleam-overlay-loading .gleam-loading-progress .-total {
    text-align: left;
}
.gleam-overlay-loading .gleam-loading-progress .-divider {
    margin: 0 0.25em;
}
.gleam-overlay-loading .gleam-loading-progressbar {
    --progress: 0;
    flex: 0 0 0.75em;
    position: relative;
    margin: 0.5em 10%;
    height: 0.75em;
    border: 1px solid white;
    background: #303030;
}
.gleam-overlay-loading .gleam-loading-progressbar::before {
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    width: calc(var(--progress) * (100% - 2px));
    background: #909090;
}
.gleam-overlay-loading .gleam-loading-play {
    cursor: pointer;
}
.gleam-overlay-loading.--finished > .-body > h2,
.gleam-overlay-loading .gleam-loading-play {
    display: none;
}
.gleam-overlay-loading > .-body > h2,
.gleam-overlay-loading.--finished .gleam-loading-play {
    flex: 1;
    font-size: 4em;
    margin: 0 0.5em;
    text-align: center;

    /* Vertically center the text content */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Pause screen */
.gleam-overlay-pause {
}
/* Beats jumplist */
.gleam-overlay-pause .gleam-pause-beats {
    margin: 1em;
    padding: 0;
    color: #222;
    text-shadow: none;
}
.gleam-overlay-pause .gleam-pause-beats li {
    /* TODO hmm, grid? */
    display: inline-block;
    min-width: 1em;
    height: 1em;
    line-height: 1;
    margin: 0.25em;
    padding: 0.25em 0.33em;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #222;
    vertical-align: middle;
    text-align: center;
    background: #ddd;
    cursor: pointer;
}
.gleam-overlay-pause .gleam-pause-beats li:empty {
    padding: 0;
    background: #ccc;
    border-radius: 1em;
}
.gleam-overlay-pause .gleam-pause-beats li.--current {
    filter: invert(100%);
}
.gleam-overlay-pause .gleam-pause-beats li.--bookmark {
    display: block;
}
.gleam-overlay-pause .gleam-pause-beats li:hover {
    background: #999;
}

/* Pause button */
.gleam-pause-button {
    position: absolute;
    display: block;
    /* above the pause screen, so it can still be clicked */
    z-index: 10001;
    top: 0;
    right: 0;
    width: 1em;
    height: 1em;
    padding: 0.5em;
    background: black;
    text-align: center;
    line-height: 1;
    border-bottom-left-radius: 0.5em;
    cursor: pointer;
    opacity: 0.25;
    transition: opacity var(--transition-time);
}
.gleam-pause-button:hover,
.gleam-player.--paused .gleam-pause-button {
    opacity: 1;
}


/* Actors */

.gleam-actor-curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Position above everything else */
    /* TODO dunno if this is right, maybe should just rely on the normal ordering */
    z-index: 999;

    background: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-time);

    /* Everything in a beat happens simultaneously, so wait for a moment for
     * any behind-the-scenes shuffling to finish before fading back in.  This
     * is overridden when lowering the curtain */
    transition-delay: var(--transition-time);
}
.gleam-actor-curtain.--lowered {
    opacity: 1;
    pointer-events: initial;

    /* Do a slow fade /out/ */
    transition-duration: calc(var(--transition-time) * 8);
    transition-delay: 0s;
}

.gleam-actor-pictureframe {
    position: absolute;
    /* Create a stacking context so the z-index on visible images doesn't
     * interfere with the actor ordering */
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.gleam-actor-pictureframe .-pose {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    left: 0;
    bottom: 0;

    /* Transition used when fading OUT -- switch visibility to off at the end */
    /* Note that visibility is first so that transition-property can be extended */
    /* Extra wrinkle: A true cross-fade will end up with both images at 0.5
     * opacity halfway through, for a combined opacity of 0.75, which is no
     * good -- especially for the backdrop!  As a workaround, fade in the new
     * one first, then fade out the old one. */
    /* All in all, that means fading OUT has a delay, then fades opacity, then
     * changes visibility at the end; fading IN changes visibility immediately,
     * then fades opacity. */
    transition-property: visibility, opacity;
    transition-duration: 0s, var(--transition-time);
    transition-delay: calc(2 * var(--transition-time)), var(--transition-time);
    transition-timing-function: linear;
}
.gleam-actor-pictureframe .-pose.--visible {
    visibility: visible;
    opacity: 1;
    pointer-events: initial;

    /* Visible image should be above any that are still fading out */
    z-index: 1;

    /* Transition used when fading IN -- switch visibility on immediately */
    transition-delay: 0s;
}
.gleam-actor-pictureframe[data-position=default] {
    /* Vars used for default position */
    --anchor: middle;
    --offset: 0.0;
}
.gleam-actor-pictureframe[data-position=default] .-pose {
    /* TODO document */
    left: calc(var(--offset) * 100%);
    transform: translateX(calc(var(--offset) * -100%));
}
/* For composite images, variants default to off, similar to above, but with no transition */
.gleam-actor-pictureframe-layer img {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    bottom: 0;
}
.gleam-actor-pictureframe-layer img.--visible {
    visibility: visible;
    pointer-events: initial;
}

/* The dialogue box has the following hierarchy:
 *  actor
 *    speaker-container
 * TODO i guess finish this explanation.
 */
.gleam-actor-dialoguebox {
    position: absolute;
    /* In front of pictures...  and so the z nightmare begins */
    z-index: 1;
    /* Anchored to bottom */
    left: 0;
    right: 0;
    bottom: 0;
    /* Three lines tall */
    font-size: 20px;
    line-height: 1.33;
    height: 4em;
    padding: 0.75em;

    font-family: "Comfortaa", "Source Sans Pro", Futura, Helvetica, Verdana, Arial, sans-serif;
    line-height: 1.5;

    /* FIXME should have separate bg and fg color? */
    --color: black;  /* may be changed by js */
    border-top: 2px solid var(--color);
    box-shadow: 0 -1px 0 #0009;
    color: white;
    text-shadow: 0 2px 1px #0006;

    transition-duration: var(--transition-time);
    transition-property: background-color;
}
.gleam-actor-dialoguebox.--hidden {
    display: none;
}
/* "Hey there's more stuff" and "continue" chevrons */
@keyframes gleam-dialoguebox-more {
    0% {
        transform: translateY(0em);
    }
    100% {
        transform: translateY(0.25em);
    }
}
@keyframes gleam-dialoguebox-next {
    0% {
        transform: translateX(0em);
    }
    100% {
        transform: translateX(0.25em);
    }
}
.gleam-actor-dialoguebox::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    /* Use border shenanigans to make arrows */
    border: 0.33em solid transparent;
    /* Can't use box-shadow on border shenanigans, so use a filter */
    filter: drop-shadow(0 1px 1px black);
}
.gleam-actor-dialoguebox[data-state=scrolling]::after {
    visibility: hidden;
}
.gleam-actor-dialoguebox[data-state=waiting]::after {
    border-top-color: white;
    border-bottom: none;
    animation: gleam-dialoguebox-more var(--transition-time) ease-in alternate infinite;
}
.gleam-actor-dialoguebox[data-state=idle]::after {
    border-left-color: white;
    border-right: none;
    animation: gleam-dialoguebox-next var(--transition-time) ease-in alternate infinite;
}
/* Background container, separate so that it can be colored with a var */
.gleam-actor-dialoguebox .-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: var(--color);
    opacity: 0.833;
}
.gleam-actor-dialoguebox .-speaker {
    position: absolute;
    left: 0;
    /* Stick out above the top of the box, i.e. be the full height from the top */
    bottom: 100%;
    /* Use border-box sizing for the sake of the slide-down transition */
    box-sizing: border-box;
    line-height: 1.33;
    padding: 0.33em 1em;
    margin-bottom: 2px;  /* avoid overlapping the box's top border */
    height: 2em;
    overflow: hidden;
    border: 1px solid #0009;
    border-left: none;
    border-bottom: none;

    background-color: var(--color);
    color: white;

    transition: height var(--transition-time);
}
.gleam-actor-dialoguebox .-speaker.--hidden {
    height: 0;
}
/* The dialogue container has several layers of nesting:
 * "wrapper" is basically just for overflow: hidden without fucking up the speaker tag
 * "viewport" is for easily calculating the space available for text
 * "phrase" holds the text proper
 */
.gleam-actor-dialoguebox .-phrase-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* FIXME hey it sucks to have to repeat the padding here though */
    padding: 0.75em;
    overflow: hidden;
    box-shadow: inset 0 0 0.25em #0004;
    /* This adds a pretty cool fade to the edges, but it causes some wonky reflow bugs for me in Firefox */
    /* mask-image: linear-gradient(to bottom, transparent 0px, black 0.75em, black 3.45em, transparent 100%); */
}
.gleam-actor-dialoguebox .-phrase-viewport {
    position: relative;
    height: 100%;
}
/* This holds the actual text */
.gleam-actor-dialoguebox .-phrase {
    position: relative;
    white-space: pre-wrap;

    /* Animating the transform is cool, I guess, but looks kinda bad without a fade on the letters, which is annoying... */
    transition: transform 0.2s;
}
/* Hidden letters */
.gleam-actor-dialoguebox .-letter {

}
.gleam-actor-dialoguebox .-letter.--hidden {
    xvisibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

/* TODO hmm how should this work. */
.gleam-actor-mural {
    font-size: 1.25em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    /* FIXME this is hacking around how there's a flicker of the backdrop fading out when the curtain fades out */
    z-index: 2;

    box-shadow: inset 0 0 0 23px #080808, inset 0 0 0 24px #202020;
    background: #080808;
    color: white;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Transition used when fading OUT -- switch visibility to off at the end */
    /* Note that visibility is first so that transition-property can be extended */
    transition: visibility 0s ease-in var(--transition-time), opacity var(--transition-time) ease-in;
}
.gleam-actor-mural.--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
    /* Transition used when fading IN -- switch visibility on immediately */
    transition-delay: 0s;
    transition-timing-function: ease-out;
}
.gleam-actor-mural a {
    color: hsl(225, 75%, 75%);
}
.gleam-actor-mural a:visited {
    color: hsl(300, 75%, 75%);
}
.gleam-actor-mural p {
    margin: 0;
    text-align: center;
}
dl.gleam-mural-credits {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: 1fr 1fr;
    row-gap: 0.5em;
    column-gap: 1em;
    margin: 0.5em 0;
}
dl.gleam-mural-credits dt {
    grid-column: 2;
    margin: 0;
}
dl.gleam-mural-credits dd {
    grid-column: 1;
    margin: 0;
    text-align: right;
    color: #808080;
}


/******************************************************************************/
/* Styling for particular VNs */
/* TODO move this elsewhere, or maybe into the editor itself */
/* FIXME still some sass cruft in here */

/* One-off spans used inline */
.gleam-actor-dialoguebox .-tal {
    color: hsl(0, 90%, 75%);
}
.gleam-actor-dialoguebox .-panel {
    color: hsl(215, 90%, 75%);
}
.gleam-actor-dialoguebox .-term {
    color: hsl(15, 90%, 50%);
    font-weight: bold;
}
.gleam-actor-dialoguebox .-redacted {
    color: hsl(0, 80%, 60%);
    text-shadow: none;
}

/* TODO ah, "next" caret */
/*
        &::after {
            content: '▼';
            display: block;
            position: absolute;
            bottom: 0.5em;
            right: 0.5em;
            color: white;
            animation: next-arrow-bounce 0.5s ease-in infinite paused;
            visibility: hidden;
        }
        &[data-state="done"]::after,
        &[data-state="waiting"]::after {
            visibility: visible;
            animation-play-state: running;
        }
*/

.gleam-actor-dialoguebox[data-position="data"],
.gleam-actor-dialoguebox[data-position="data2"],
.gleam-actor-dialoguebox[data-position="interaction"],
.gleam-actor-dialoguebox[data-position="interaction2"] {
    top: 1em;
    left: 1em;
    bottom: 1em;
    right: 1em;
    width: auto;
    height: auto;
    padding: 0.5em 0.75em;
    font-family: "Source Code Pro", Inconsolata, monospace;
    --tech-color: hsl(215, 67%, 33%);
    --border-color: hsl(215, 100%, 50%);
    border: none;
    /*
    border: 2px solid var(--border-color);
    box-shadow: 0 0 3px 2px var(--border-color);
    */

/*
    &.-hidden {
        bottom: 1em;
        opacity: 0;
        // Using a transform for the zoom effect (rather than margins)
        // avoids breaking detection of the speech box's height
        transform: scale(0.75);
    }
*/
}
.gleam-actor-dialoguebox[data-position="data"] .-phrase,
.gleam-actor-dialoguebox[data-position="data2"] .-phrase,
.gleam-actor-dialoguebox[data-position="interaction"] .-phrase,
.gleam-actor-dialoguebox[data-position="interaction2"] .-phrase {
    text-shadow: 0 0 4px black;
}
.gleam-actor-dialoguebox[data-position="data"] .-background,
.gleam-actor-dialoguebox[data-position="data2"] .-background,
.gleam-actor-dialoguebox[data-position="interaction"] .-background,
.gleam-actor-dialoguebox[data-position="interaction2"] .-background {
    border-radius: 0.25em;
    background-image:
        repeating-linear-gradient(to bottom, hsl(215, 67%, 33%) 0, hsl(215, 67%, 33%) 0.1em, hsl(215, 67%, 25%) 0.2em, hsl(215, 67%, 25%) 0.3em),
        radial-gradient(circle farthest-corner, #0006, var(--tech-color));
    background-color: transparent;
    /* Use two box-shadows to create a fake border (though note it's not very
     * bright since we're affected by opacity), and add a little edge
     * underneath */
    box-shadow: 0 0 3px 2px var(--border-color), inset 0 0 3px 2px var(--border-color), inset 0 0 3px 3px black;
}

.gleam-actor-dialoguebox[data-position="data2"],
.gleam-actor-dialoguebox[data-position="interaction2"] {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0.5em var(--tech-color);
}
/* XXX why does this have a different background...? */
.gleam-actor-dialoguebox[data-position="data2"] .-background,
.gleam-actor-dialoguebox[data-position="interaction2"] .-background {
    opacity: 0.92;
    background-image:
        radial-gradient(circle farthest-corner, #0009 50%, hsla(215, 67%, 25%, 0.5)),
        repeating-linear-gradient(to bottom, hsl(215, 67%, 33%) 0, hsl(215, 67%, 25%) 4px, hsl(215, 67%, 33%) 8px);
}
.gleam-actor-dialoguebox[data-position="data"] {
    right: 60%;
}
.gleam-actor-dialoguebox[data-position="data2"],
.gleam-actor-dialoguebox[data-position="data2"] .-phrase-wrapper {
    padding-right: 60%;
}

.gleam-actor-dialoguebox[data-position="journal"] {
    top: 1em;
    left: 1em;
    bottom: 1em;
    right: 1em;
    width: auto;
    height: auto;
    color: #606060;
    border: 2px solid hsl(45, 50%, 50%);
    box-shadow: inset 0 0 4em hsla(45, 50%, 50%, 0.5);
    /* Note that 1em is where the text starts and 1.5em is the line height */
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0px, transparent calc(1em - 1px),
            rgba(0, 0, 0, 0.1) calc(1em - 1px), rgba(0, 0, 0, 0.1) 1em,
            transparent 1em, transparent 1.5em
        ),
        linear-gradient(to bottom, transparent, hsla(45, 50%, 50%, 0.5));
    background-color: hsl(45, 50%, 95%);
}

.gleam-actor-dialoguebox[data-position="tablet-data"],
.gleam-actor-dialoguebox[data-position="tablet-interaction"] {
    top: 2.5em;
    bottom: 2.5em;
    left: 2.5em;
    right: 2.5em;
    width: auto;
    height: auto;
    padding: 0.5em 1em;

    font-family: "Source Code Pro";
    border: none;
    box-shadow: none;
    background: none;
}
.gleam-actor-dialoguebox[data-position="tablet-data"] {
    right: 60%;
}

.gleam-actor-dialoguebox[data-position="alice-tigers"] {
    top: 1em;
    left: auto;
    bottom: 1em;
    right: 1em;
    width: 40%;
    height: auto;
    color: #606060;
    border: 1px solid black;
    border-radius: 1em;
    box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.5);
    background-color: #202020;
}