/**
 * FRISE (FRee Interactive Story Engine)
 * A light-weight engine for writing interactive fiction and games.
 *
 * Copyright 2022-2024 Christopher Pollett chris@pollett.org
 *
 * @license
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * @file The CSS code used to style the elements used by a game
 * @author Chris Pollett
 * @link https://www.frise.org/
 * @copyright 2022 - 2024
 */
/* make sure game tags we don't want to display are not displayed
 */
x-action,
x-game,
x-dollhouse,
x-slides,
x-object,
x-location
{
    display: none;
}
/**
 * Prevents border around canvas's that respond to keyboard events such as
 * those made by dollhouses
 */
canvas:focus
{
    outline:none;
}
/*
 * General useful classes
 */
.none
{
    display: none;
}
.hidden
{
    visibility: hidden;
}
.block
{
    display: block;
}
.inline-block
{
    display: inline-block;
}
.inline
{
    display: inline;
}
.float-right
{
    float: right;
}
.float-left
{
    float: left;
}
.float-opposite
{
    float: right;
}
.rtl .float-opposite
{
    float: left;
}
.float-same
{
    float: left;
}
.rtl .float-same
{
    float: right;
}
.left
{
    text-align: left;
}
.right
{
    text-align: right;
}
.opposite
{
    text-align: left;
}
.rtl .opposite
{
    text-align: right;
}
.center
{
    text-align: center;
}
.fit-content
{
    width: fit-content;
}
.rounded
{
    border-radius: 20px;
}
.rounded-top
{
    border-radius: 20px 20px 0 0;
}
.small-width
{
    width: 100px;
}
.mobile .small-width
{
    width: 75px;
}
.medium-width
{
    width: 150px;
}
.mobile .medium-width
{
    width: 100px;
}
.large-width
{
    width: 200px;
}
.mobile .large-width
{
    width: 150px;
}
.thin-border
{
    border: solid 1px black;
}
.medium-border
{
    border: solid 2px black;
}
.thick-border
{
    border: solid 4px black;
}
/**
 * Special Effects, Animation tags and CSS classes
 */
 .repeating
 {
     animation-iteration-count: infinite;
 }
/* classes for animation count*/
.once
{
    animation-iteration-count: 1;
}
.twice
{
    animation-iteration-count: 2;
}
.thrice
{
    animation-iteration-count: 3;
}
.four-times
{
    animation-iteration-count: 4;
}
.five-times
{
    animation-iteration-count: 5;
}
.ten-times
{
    animation-iteration-count: 10;
}
.infinite
{
    animation-iteration-count: infinite;
}
/* classes for animation duration */
.half-sec
{
    animation-duration: 0.5s;
}
.second
{
    animation-duration: 1s;
}
.two-second
{
    animation-duration: 2s;
}
.three-second
{
    animation-duration: 3s;
}
.five-second
{
    animation-duration: 5s;
}
.ten-second
{
    animation-duration: 10s;
}
.top-left-origin
{
    transform-origin: 0 0;
}
.top-right-origin
{
    transform-origin: 100% 0;
}
.top-mid-origin
{
    transform-origin: 50% 0;
}
.mid-left-origin
{
    transform-origin: 0 50%;
}
.mid-mid-origin,
.center-origin
{
    transform-origin: 50% 50%;
}
.mid-right-origin
{
    transform-origin: 100% 50%;
}
.bottom-right-origin
{
    transform-origin: 100% 100%;
}
.bottom-left-origin
{
    transform-origin: 0 100%;
}
.bottom-mid-origin
{
    transform-origin: 50% 100%;
}
x-outline,
.outline
{
    color: white;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black;
}
x-mild-blur,
.mild-blur
{
    filter: blur(1px);
}
x-blink,
.blink
{
    animation: blinker 1.2s ease infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
x-blur,
x-unblurable,
.blur
{
    filter: blur(3px);
}
x-unblurable:active,
x-unblurable:hover,
.hover-unblur:active,
.hover-unblur:hover
{
    filter: blur(0);
    transition: filter 1s ease-in;
}
x-heavy-blur,
.heavy-blur
{
    filter: blur(5px);
}

x-blur,
x-heavy-blur,
x-mild-blur,
x-outline,
x-unblurable
{
    display: inline;
}

x-condense,
.condense
{
    display: inline-block;
    transform: scaleX(0.5);
    transform-origin: 0;
}
x-expand,
.expand
{
    display: inline-block;
    transform: scaleX(2);
    transform-origin: 0;
}
x-emboss,
.emboss
{
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    text-shadow: -2px -2px 1px rgba(255, 255, 255, 0.6),
        3px 3px 3px rgba(0, 0, 0, 0.4);
}
.rewind
{
    animation-direction: reverse !important;
}
@keyframes fade-in
{
    0% {opacity: 0}
    to {opacity: 1}
}
x-fade-in,
.fade-in
{
    animation: fade-in .5s ease-in-out forwards;
    opacity: 1;
}
@keyframes fade-out
{
    0% {opacity: 1}
    to {opacity: 0}
}
x-fade-out,
.fade-out
{
    animation: fade-out .5s ease-in-out forwards;
    opacity: 0;
}
@keyframes fade-in-out
{
    0%,
    to {opacity: 0}
    50% {opacity: 1}
}
x-fade-in-out,
.fade-in-out
{
    animation: fade-in-out 1s ease-in-out infinite alternate;
}
@keyframes scale-in
{
    0% {transform: scale(1,1);}
    to {transform: scale(0,0);}
}
x-scale-in,
.scale-in
{
    animation: scale-in .5s ease-in-out forwards;
    display:block;
    height: 100%;
}
@keyframes scale-out
{
    0% {transform: scale(0,0);}
    to {transform: scale(1,1);}
}
x-scale-out,
.scale-out
{
    animation: scale-out .5s ease-in-out forwards;
    display:block;
    height: 100%;
}
@keyframes slide-in-top
{
    0% {transform: translate(0, -120%);}
    to {transform: translate(0,0);}
}
x-slide-in-top,
.slide-in-top
{
    animation: slide-in-top .5s ease-in-out forwards;
    display:block;
    height: 100%;
}
@keyframes slide-out-top
{
    0% {transform: translate(0, 0);}
    to {transform: translate(0, -120%);}
}
x-slide-out-top,
.slide-out-top
{
    animation: slide-out-top .5s ease-in-out forwards;
    display:block;
    height: 100%;
}
@keyframes slide-in-bottom
{
    0% {transform: translate(0, 120%);}
    to {transform: translate(0,0);}
}
x-slide-in-bottom,
.slide-in-bottom
{
    animation: slide-in-bottom .5s ease-in-out forwards;
    display:block;
    height: 100%;
}
@keyframes slide-out-bottom
{
    0% {transform: translate(0, 0);}
    to {transform: translate(0, 120%);}
}
x-slide-out-bottom,
.slide-out-bottom
{
    animation: slide-out-bottom .5s ease-in-out forwards;
    display:block;
    height: 100%;
}
@keyframes slide-in-left
{
    0% {transform: translate(-120%, 0);}
    to {transform: translate(0,0);}
}
x-slide-in-left,
.slide-in-left
{
    animation: slide-in-left .5s ease-in-out forwards;;
    display:block;
    width: 100%;
}
@keyframes slide-out-left
{
    0% {transform: translate(0, 0);}
    to {transform: translate(-120%, 0);}
}
x-slide-out-left,
.slide-out-left
{
    animation: slide-out-left .5s ease-in-out forwards;;
    display:block;
    width: 100%;
}
@keyframes slide-in-right
{
    0% {transform: translate(120%, 0);}
    to {transform: translate(0,0);}
}
x-slide-in-right,
.slide-in-right
{
    animation: slide-in-right .5s ease-in-out;
    display:block;
    width: 100%;
}
@keyframes slide-out-right
{
    0% {transform: translate(0, 0);}
    to {transform: translate(120%, 0);}
}
x-slide-out-right,
.slide-out-right
{
    animation: slide-out-right .5s ease-in-out forwards;
    display:block;
    width: 100%;
}
x-vertical-mirror,
.vertical-mirror
{
    display: inline-block;
    transform: scaleY(-1);
}
x-mirror,
.mirror
{
    display: inline-block;
    transform: scaleX(-1);
}
@keyframes pulse
{
    0%  { transform: scale(0.7, 0.7);}
    20% { transform: scale(1.25, 1.25); }
    40% { transform: scale(0.8125, 0.8125); }
    60% { transform: scale(1.125, 1.125); }
    80% { transform: scale(0.9, 0.9); }
    to  { transform: scale(1, 1); }
}
x-pulse,
.pulse
{
    animation: pulse 0.8s;
    display: inline-block;
}
@keyframes rumble
{
    50% {
        transform: translateY(-4px)
    }
}
x-rumble,
.rumble
{
    animation: rumble linear 0.15s 0s infinite;
    display:inline-block;
}
@keyframes shudder
{
    50% { transform: translateX(4px) }
}
x-shudder,
.shudder
{
    animation: shudder linear 0.15s 0s infinite;
    display: inline-block;
}
x-upside-down,
.upside-down
{
    display: inline-block;
    transform: rotate(180deg);
}
/*
 * Styles specific to the game content and nav areas
 */
#game-content
{
    font-family: "Oswald", serif;
    font-size: 18pt;
    height: 100%;
    left: 300px;
    line-height: 1.6;
    overflow-x: scroll;
    overflow-y: scroll;
    position: fixed;
    transition: left .25s ease-in;
    top: 0px;
    padding-top: 23px;
    width: calc(100% - 320px);
}
.rtl
{
    direction: rtl;
}
.rtl #game-content
{
    left: unset;
    right: 300px;
    transition: right .25s ease-in;
}
.no-nav #game-content
{
    left: 20px;
    right: 20px;
    transition: unset;
    width: calc(100% - 40px);
}
#main-nav,
#main-bar
{
    background: linear-gradient(to right, white, 97%, lightgray);
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    text-align: center;
    transition: left .25s ease-in;
    top: 0px;
    width: 240px;
    z-index: 0;
}
.rtl #main-nav,
.rtl #main-bar
{
    background: linear-gradient(to left, white, 97%, lightgray);
    left: unset;
    right: 0;
    transition: right .25s ease-in;
}
#main-bar
{
    background: white;
    height: 50px;
    text-align: left;
    top: 0;
    width: 50px;
    z-index: 2;
}
.rtl #main-bar
{
    background: white;
}
.mobile #main-bar
{
    background: white;
    height: 50px;
    top: 0;
    width: 50px;
    z-index: 2;
}
.rtl #main-bar
{
    text-align: right;
}
#main-nav button,
#main-bar button
{
    border-radius: 10px;
    font-size: 21pt;
    padding: 2px 5px 5px 5px;
    width: 40px;
}
.mobile #main-nav button,
.mobile #main-bar button
{
    font-size: 18pt;
    height: 50px;
    margin: 2px;
    padding: 8px 10px 10px 10px;
    width: 40px;
}
#main-nav h1
{
    margin: 8px;
}
#main-nav x-button,
#main-nav input[type="range"]
{
    width: 170px;
}
#main-nav .nav-label
{
    font-size: 14pt;
    margin: auto;
    text-align: left;
    width: 170px;
}
.rtl #main-nav .nav-label
{
    text-align: right;
}
#main-nav .nav-info
{
    font-size: 14pt;
    margin: 0px auto 15px auto;
    text-align: left;
    width: 170px;
}
.rtl #main-nav .nav-info
{
    text-align: right;
}
.footer-space {
    height: 1in;
}
/*
 * Styles specific to when we are using frise for a slide show
 */
.slides #game-content
{
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}
div.slide
{
    background-color: white;
    color: black;
    margin: 0;
    padding: 20px;
    font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif;
    font-size: 120%;
    height: calc(95% - 50px);
}
.all div.slide
{
    height: fit-content;
}
.slide h1
{
    line-height: 1.1;
}
.slide pre
{
    background-color: #EEE;
    border-style: solid;
    border-width: thin;
    border-left-width: 1em;
    border-color: #9AD;
    color: #048;
    font-size: 80%;
    font-weight: bold;
    padding: 0.2em 1em 0.2em 1em;

}
.slide a img
{
    border-width: 0;
    border-style: none;
}
.slide a:link,
.slide a:visited
{
    color: navy;
}
.slide a:active,
.slide a:hover
{
    color: red;
    text-decoration: underline;
}
.slide a
{
    text-decoration: none;
}
ol,
ul
{
    margin: 0.5em 1.5em 0.5em 1.5em;
    padding: 0;
}
.slide ul
{
    list-style-type: square;
}
.slide ul ul ul
{
    list-style-type: circle;
}
.slide ul ul,
.slide ul ul ul ul
{
    list-style-type: disc;
}
.slide li
{
    margin-top: 0.5em;
}
.slide li li
{
    font-size: 85%;
    font-style: italic;
}
.slide li li li
{
    font-size: 85%;
    font-style: normal;
}
.slide div dt
{
  margin-left: 0;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
.slide div dd
{
  margin-left: 2em;
  margin-bottom: 0.5em;
}
.slide p,
.slide pre,
.slide ul,
.slide ol,
.slide blockquote,
.slide h2,
.slide h3,
.slide h4,
.slide h5,
.slide h6,
.slide dl,
.slide table
{
    margin-left: 1em;
    margin-right: 1em;
}
.slide-footer
{
    background-color: #EEE;
    font-size: 20px;
    height: 50px;
    left: 0;
    position: fixed;
    right: 0;
    width: 100%;
    top: calc(100% - 50px);
}
.slide-footer x-button
{
    font-size: 14px;
    padding: 5px;
    margin: 2px;
}
.slide-footer .big-p
{
    font-size: 30px;
    position: relative;
    top: 3px;
}
@media print
{
    body,
    #game-screen,
    #game-content
    {
        display: unset;
        height: fit-content;
        position: unset;
    }
    div.slide
    {
        display: unset;
        height: unset;
        page-break-inside: avoid;
        position: unset;
    }
    div.page-break
    {
        page-break-after: always;
        visibility: hidden;
    }
    .slide-footer
    {
        display: none;
    }
}


/*
 * Styles related to a Save/Load Game Location
 */
.filled
{
    background-color: blue;
    color: white;
}
table.save-table
{
    width: 7in;
}
.mobile table.save-table
{
    width: 320px;
}
table.save-table,
table.save-table tr,
table.save-table th,
table.save-table td
{
    border-collapse: collapse;
    border: 1px solid black;
    padding:10px;
    text-align: center;
}
.mobile table.save-table,
.mobile table.save-table tr,
.mobile table.save-table th,
.mobile table.save-table td
{
    padding:3px;
}
table.save-table td.save-name
{
    width: 3in;
}
.mobile table.save-table td.save-name
{
    width: 100px;
}
.mobile #save-disk,
.mobile #load-disk
{
    visibility: hidden;
}
/*
 * Styles specific to how we want HTML to appear in the game.
 * Also has styles for the new x- tags that we use for presentation
 */
h1
{
    margin: 0px;
    padding: 0px;
}
img
{
    max-width: 90%;
}
figure
{
    max-width: 90%;
}
figure > img
{
    max-width: 100%;
}
input
{
    border: 2px solid lightblue;
    border-radius: 5px;
    font-size: 18pt;
    padding: 2px;
}
a.disabled
{
    color: gray;
    cursor: default;
    pointer-events: none;
}
x-button
{
    background-color: #F0F0F6;
    border: 1px solid gray;
    border-radius: 5px;
    color: black;
    display: inline-block;
    font-size: 18pt;
    font-weight: bold;
    padding: 8px;
    margin: 3px;
}
x-button.disabled
{
    border: 1px solid lightgray;
    background-color: #F6F6FA;
    color: #666;
    cursor: not-allowed;
}
x-button:hover
{
    background-color: lightgray;
}

x-button.disabled:hover
{
    color: #666;
    background-color: #F6F6FA;
}
x-speaker
{
    border: 3px solid black;
    border-radius: 10px;
    display: block;
    font-size:18pt;
    margin: 10px;
    min-height: 110px;
    padding: 10px;
    width: 90%;
}
.mobile x-speaker
{
    margin: 2px;
    padding: 4px;
    width: 82%;
}
x-speaker figure:first-of-type
{
    border-radius: 5px;
    display: block;
    float: left;
    margin: 0;
    width: 120px;
}
.rtl x-speaker figure:first-of-type
{
    float: right;
}
.mobile x-speaker figure:first-of-type
{
    width: 80px;
}
x-speaker figure:first-of-type > img
{
    border-radius: 10px;
    display: block;
    height: 100px;
    margin: auto;
    width: 100px;
}
.mobile x-speaker figure:first-of-type > img
{
    width: 70px;
    height: 70px;
}