/* *********************************
The shell: page chrome and the stage amusements are mounted into.

Amusements style themselves inside their own shadow roots, so nothing below
reaches into them. The only contract between the two is the .amusement
container, whose data-layout attribute comes from the amusement's metadata.
********************************* */

/*# VARIABLES */
:root {
    --terminal-text-bkgrd: rgba(0, 0, 0, .8);
    --terminal-green: #0c0;
}

/*# GENERAL */
html {
    box-sizing: border-box;
}

*, *:after, *:before {
    box-sizing: inherit;
    margin: 0;
}

body {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    color: var(--terminal-green);
    background-color: black;
    font-family: VT323, monospace;
}

main {
    position: relative;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    padding: 0 2%;
}

/*# TITLE */
.title-header {
    display: inline-block;
    position: relative;
    z-index: 2;
    margin-left: 2%;

    h1 {
        display: inline-block;
        top: 1.75em;
        margin: 1rem 0 0.5rem 0;
        padding: 5px 10px;
        background-color: var(--terminal-text-bkgrd);
        cursor: pointer;
        font-size: 1.5rem;
    }
}

.hideTitle {
    transform: translateY(-90px);
    opacity: 0;
    transition: all 1s;
    z-index: 2;
}

/*# STAGE
   One .amusement container per mounted amusement, sized by the layout its
   metadata asks for. Add a rule here when an amusement needs a new one. */
.stage {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.amusement {
    display: block;
    position: absolute;
}

.amusement[data-layout="full"]      { inset: 0; }
.amusement[data-layout="center"]    { inset: 25%; }
.amusement[data-layout="halfT"]     { inset: 0 0 50% 0; }
.amusement[data-layout="halfB"]     { inset: 50% 0 0 0; }
.amusement[data-layout="halfL"]     { inset: 0 50% 0 0; }
.amusement[data-layout="halfR"]     { inset: 0 0 0 50%; }
.amusement[data-layout="tl"]        { inset: 0 50% 50% 0; }
.amusement[data-layout="tr"]        { inset: 0 0 50% 50%; }
.amusement[data-layout="bl"]        { inset: 50% 50% 0 0; }
.amusement[data-layout="br"]        { inset: 50% 0 0 50%; }
.amusement[data-layout="invisible"] { display: none; }

/*# MEDIA QUERIES */
@media screen and (width > 1024px) {
    header {
        margin: 2rem 0 0 0;
    }

    h1 {
        font-size: 2.25rem;
        margin-bottom: 2.5rem;
    }

    main {
        margin: 0 2% 0 0;
        padding-top: 1rem;
        user-select: none;
    }
}

/* *********************************
Orphaned: these belong to interactiveFiction, which has not been ported to the
amusement contract yet. They style DOM that amusement expects to find in the
shell (.modal-bkgrd-shade, .btn-help-mobile, main.raiseContent). Move them into
public/amusements/interactiveFiction/ when it is ported, and delete them here.
********************************* */
.raiseContent {
    transform: translateY(-50px);
    transition: transform 1s;
    z-index: 2;
}

.modal-bkgrd-shade {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: center;
    background-color: transparent;
    font-size: 1rem;
    opacity: 1;
    z-index: -10;
}

.btn-help-mobile {
    display: flex;
    justify-content: flex-end;
    border-radius: 10px;
    background-color: #010;

    button {
        margin: 10px 10px 10px 0;
    }
}

@media screen and (width > 1024px) {
    .btn-help-mobile {
        display: none;
    }
}