/*shared variables*/
:root{
    --default-text-color:#e1e1e1;
    --viewport-height:100vh;
}

/*css properties that are required by default, e.g. viewport width/height, character/door hover action*/
body{
    width:100%;
    height:100%;
    margin:0px;
    overflow:hidden;
    background-color:#0f0f0f;
    font-size:24pt;
    color:var(--default-text-color);
}

div{
    image-rendering: pixelated;
}

#viewport{ 
    /*need to think about the default resolution on this one*/
    /* width:2732px;
    height:2048px; */
    /*new 6-21-24: vintage computer crt frame*/border-radius:30px;
    width:1920px;
    height:1080px;
    background-image:url('../db/assets/art/BLANK.png');
    position:absolute;
    display:block; /*hrrrrrgh*/
    overflow:hidden;
    font-size:48pt;
    z-index:0;
    transform-origin:top left;
    /* margin-left:30px;
    margin-top:30px; */

    transform:scale(calc(100vh / 1080));

    /*for sanity during debugging.  cant stand looking at the same colors too long*/
    /* filter:hue-rotate(210deg) invert(0); */
    /* animation-name:viewportHueRotation;
    animation-duration:14000ms;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite; */
}

/*debug*/

#debug-area{
    display:none;
    position:absolute;
    top:1130px;
    animation-name:viewportHueRotation;
    animation-duration:14000ms;
    animation-iteration-count:infinite;
}

#thought-clouds{
    display:flex;
    flex-wrap:wrap;
}

.debug-name{
    font-size:32px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    transform:rotate(12deg);
}

#debug-tap-counter{
    display:block;
    position:relative;
    font-size:200px;
    color:green;
    top:-200px;
    left:200px;
}

.prp_save-point.interact-active{
    animation-name:viewportHueRotation;
    animation-duration:220ms;
    animation-iteration-count:3;
}

/*
    High-level entity types
*/
.art{
    display:block;
    position:absolute;
    background-repeat:no-repeat;
    background-size:contain;
}

.collectible{
    display:block;
    position:absolute;
    background-repeat:no-repeat;
    background-size:contain;
}

#collectible-area{
    display:flex;
}

.prop{
    display:block;
    position:absolute;
    background-repeat:no-repeat;
    background-size:cover;
    cursor:pointer;
}

.prop-html-text{
    cursor:default;
}
.prop-html-header{
    cursor:default;
}

.character{
    display:block;
    position:absolute;
    background-repeat:no-repeat;
    background-size:contain;
    cursor:pointer;
}

/*
    Combat System
*/
.combat-container{
    width:100%;
    height:100%;
    display:flex;
    position:absolute;
    top:0px;
    left:0px;
    background-color:rgba(79, 139, 230, 0.486);
    z-index:68;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.emote{
    display:inline-block;
    border-radius:10px;
    font-family:'Tahoma';
    font-weight:900;
}

.enemy{
    display:flex;
    /* background-color:rgba(226, 42, 36, 0.514); */
    background-size:contain;
    position:absolute;
    background-repeat:no-repeat;
    font-size:24pt;
}



/*
    Dialogue System
*/

.dialogue-container{
    width:100%;
    height:100%;
    display:grid;
    position:absolute;
    top:0px;
    left:0px;
    grid-template-rows:55% 45%;
    background-color:rgba(0,0,0,0.25);
    z-index:67;
}

.portrait-area{
    display:grid;
    width:100%;
    height:100%;
    grid-template-columns:3fr 1fr 3fr;
    background-color:rgba(0,255,0,0.0);
    grid-row:1/1;
    z-index:65;
}

.dialogue-area{
    display:grid;
    width:100%;
    height:100%;
    /* margin:12pt; */
    grid-template-rows:1fr 3fr;
    background-color:rgba(255,0,0,0.0);
    grid-row:2/2;
    z-index:66;
}

.left-portrait{
    display:grid;
    grid-template-columns:10% 1fr 10%;
    width:100%;
    height:100%;
    background-size:contain; /*switching out sprites using css classes.  what could go wrong?*/
    /* margin:12pt; */
    background-color:rgba(128,0,255,0.0);
    grid-column: 1/1;
}

#left-portrait-image{
    display:block;
    width:100%;
    height:100%;
    grid-column: 2/2;
    background-color:rgba(0,0,0,0);
    background-repeat:no-repeat;
    background-size:contain;
    background-position-y:bottom;
}

.right-portrait{
    display:grid;
    grid-template-columns:10% 1fr 10%;
    width:100%;
    height:100%;
    background-size:contain; /*switching out sprites using css classes.  what could go wrong?*/
    /* margin:12pt; */
    background-color:rgba(255,0,128,0.0);
    grid-column: 3/3;
}

#right-portrait-image{
    display:block;
    width:100%;
    height:100%;
    grid-column: 2/2;
    background-color:rgba(0,0,0,0);
    background-repeat:no-repeat;
    background-size:contain;
    background-position-y:bottom;
}

.speaker-name{
    display:grid;
    width:100%;
    max-height:120px;
    /* margin:12pt; */
    background-color:rgba(0,0,0,1);
    grid-row:1/1;
    justify-self:start;
    grid-template-columns: 10% 1fr 100px;
}

#speaker-name-text{
    padding:20px;
    text-wrap:balance;
    display:block;
    grid-column: 2/2;
    max-width:fit-content;
    max-height:96px;
    background-color:rgb(255,255,255);
    color:black;
    border-radius:12pt;
    font-size:48px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:900;
}

.dialogue-text{
    display:grid;
    width:100%;
    height:100%;
    height:100%;
    /* margin:12pt; */
    background-color:rgba(96,96,96,0.75);
    grid-row:2/2;
    justify-self:start;
    grid-template-columns:10% 1fr 10%;
    grid-template-rows:5% 1fr 5%;
}

#dialogue-text-actual{
    display:block;
    grid-column:2/3;
    grid-row:2/2;
    background-color:white;
    color:black;
    font-family:Arial, Helvetica, sans-serif;
    width:100%;
    height:200px;
    /* margin:24pt; */
    border-radius:12pt;
    text-overflow:hidden;
    font-size:48px;
    padding:54px;
    border: 4px solid black;
}

.next-button{
    width:100px;
    height:100px;
    position:relative;
    top:55px;
    left:-200px;
    margin:200px;
    float:right;
    background-color:white;
    border:4px solid black;
    grid-column:3/3;
    border-radius:12pt;
}

.hidden{
    display:none;
    pointer-events:none;
}

.dia-inactive{
    filter:brightness(0.5);
}

/*debug things*/

#monitor-for-time{
    font-size:57pt;
    font-weight:900;
}

.smol-font{
    font-size:9pt;
}

r .red-font{
    color:red;
    font-size:96pt;
    font-weight:900;
}

#metronome-debug-element{
    background-color:#00ff00;
    color:#ff00ff;
    display:block;
    position:absolute;
    top:-50px;
    left:0px;
    width:fit-content;
}

#metronome-debug-element.active{
    color:#00ff00;
    background-color:#ff00ff;
}

.cutscene-container{
    height:1080px;
    width:1920px;
    background-color:black;
    background-image:url('../db/assets/art/BLANK.png');
    position:absolute;
    z-index:255;
}

.cutscene_active-frame{
    width:100%;
    height:100%;
}

.keyframe-container{
    width:100%;
    height:100%;
    background-size:cover;
    background-image:linear-gradient(#000000,#666666);
}

.art-object-image{
    /* width:100%;
    height:100%; */
}

/*
    COMMON CHARACTER ART
    e.g. Dialogue for main characters
*/

.ch_dia_kiba293_agree{
    background-image:url('../db/assets/art/shared/ch_dia_kiba293_agree.png');
}

.ch_dia_kiba293_angry{
    background-image:url('../db/assets/art/shared/ch_dia_kiba293_angry.png')
}

.ch_dia_kiba293_dejected{
    background-image:url('../db/assets/art/shared/ch_dia_kiba293_dejected.png')
}

.ch_dia_kiba293_excited{
    background-image:url('../db/assets/art/shared/ch_dia_kiba293_excited.png')
}

.ch_dia_kiba293_neutral{
    background-image:url('../db/assets/art/shared/ch_dia_kiba293_neutral.png')
}

.ch_dia_kiba293_trepidacious{
    background-image:url('../db/assets/art/shared/ch_dia_kiba293_trepidacious.png')
}

.ch_dia_pandaspark9_agree{
    background-image:url('../db/assets/art/shared/ch_dia_pandaspark9_agree.png')
}

.ch_dia_pandaspark9_annoyed{
    background-image:url('../db/assets/art/shared/ch_dia_pandaspark9_annoyed.png')
}

.ch_dia_pandaspark9_flustered{
    background-image:url('../db/assets/art/shared/ch_dia_pandaspark9_flustered.png')
}

.ch_dia_pandaspark9_kawaii{
    background-image:url('../db/assets/art/shared/ch_dia_pandaspark9_kawaii.png')
}

.ch_dia_pandaspark9_neutral{
    background-image:url('../db/assets/art/shared/ch_dia_pandaspark9_neutral.png')
}

.ch_dia_pandaspark9_surprised{
    background-image:url('../db/assets/art/shared/ch_dia_pandaspark9_surprised.png')
}

.ch_dia_sore-ga-warui_annoyed{
    background-image:url('../db/assets/art/shared/ch_dia_sore-ga-warui_annoyed.png');
}

.ch_dia_sore-ga-warui_fight-stance{
    background-image:url('../db/assets/art/shared/ch_dia_sore-ga-warui_fight-stance.png');
}

.ch_dia_sore-ga-warui_neutral{
    background-image:url('../db/assets/art/shared/ch_dia_sore-ga-warui_neutral.png');
}

.ch_dia_sore-ga-warui_skeptical{
    background-image:url('../db/assets/art/shared/ch_dia_sore-ga-warui_skeptical.png');
}

.ch_dia_sore-ga-warui_surprised{
    background-image:url('../db/assets/art/shared/ch_dia_sore-ga-warui_surprised.png');
}

.ch_dia_sore-ga-warui_ureshii{
    background-image:url('../db/assets/art/shared/ch_dia_sore-ga-warui_ureshii.png');
}

.ch_dia_sore-ga-warui_agree{
    background-image:url('../db/assets/art/shared/ch_dia_sore-ga-warui_ureshii.png');
}

.ch_dia_zaibatsu-z_agree{
    background-image:url('../db/assets/art/shared/ch_dia_zaibatsu-z_agree.png');
}

.ch_dia_zaibatsu-z_angry{
    background-image:url('../db/assets/art/shared/ch_dia_zaibatsu-z_angry.png');
}

.ch_dia_zaibatsu-z_flustered{
    background-image:url('../db/assets/art/shared/ch_dia_zaibatsu-z_flustered.png');
}

.ch_dia_zaibatsu-z_neutral{
    background-image:url('../db/assets/art/shared/ch_dia_zaibatsu-z_neutral.png');
}

.ch_dia_zaibatsu-z_pout{
    background-image:url('../db/assets/art/shared/ch_dia_zaibatsu-z_pout.png');
}

.ch_dia_zaibatsu-z_surprised{
    background-image:url('../db/assets/art/shared/ch_dia_zaibatsu-z_surprised.png');
}

.ch_dia_zaibatsu_neutral{
    background-image:url('../db/assets/art/shared/ch_dia_zaibatsu-z_neutral.png');
}

.ch_dia_cel-phone{
    background-image:url('../db/assets/art/shared/ch_dia_kibas-cel-phone_neutral.png');
}


@keyframes viewportHueRotation{
    0%{
        filter:hue-rotate(0deg) invert(0) saturate(200%);;
    }
    23%{
        filter:hue-rotate(88deg) invert(0) saturate(200%);;
    }25%{
        filter:hue-rotate(128deg) invert(0) saturate(800%);
    }27%{
        filter:hue-rotate(92deg) invert(0) saturate(200%);;
    }
    73%{
        filter:hue-rotate(268deg) invert(0) saturate(200%);;
    }75%{
        filter:hue-rotate(222deg) invert(0) saturate(800%);;
    }77%{
        filter:hue-rotate(272deg) invert(0) saturate(200%);;
    }
    100%{
        transform:translateY(0px);
        filter:hue-rotate(359deg) invert(0) saturate(200%);;
    }
}

/*CUTSCENE SHAREABLE ANIMATIONS*/

/*1: Foreground goes left, background right*/
@keyframes fg-l{
    0%{
        transform:translateX(0px);
    }
    100%{
        transform:translateX(-150px);
    }
}

@keyframes mg-l{
    0%{
        transform:translateX(0px);
    }
    100%{
        transform:translateX(-25px);
    }
}

@keyframes bg-l{
    0%{
        transform:translateX(-100px);
    }
    100%{
        transform:translateX(0px);
    }
}

/*2: Foreground goes right, background left*/
@keyframes fg-r{
    0%{
        transform:translateX(0px);
    }
    100%{
        transform:translateX(150px);
    }
}

@keyframes mg-r{
    0%{
        transform:translateX(0px);
    }
    100%{
        transform:translateX(25px);
    }
}

@keyframes bg-r{
    0%{
        transform:translateX(0px);
    }
    100%{
        transform:translateX(-150px);
    }
}

/*3: Foreground goes up, background down*/
@keyframes fg-u{
    0%{
        transform:translateY(0px);
    }
    100%{
        transform:translateY(-150px);
    }
}

@keyframes mg-u{
    0%{
        transform:translateY(0px);
    }
    100%{
        transform:translateY(-25px);
    }
}

@keyframes bg-u{
    0%{
        transform:translateY(0px);
    }
    100%{
        transform:translateY(150px);
    }
}

/*4: Foreground goes down, background up*/
@keyframes fg-d{
    0%{
        transform:translateY(0px);
    }
    100%{
        transform:translateY(150px);
    }
}

@keyframes mg-d{
    0%{
        transform:translateY(0px);
    }
    100%{
        transform:translateY(25px);
    }
}

@keyframes bg-d{
    0%{
        transform:translateY(0px);
    }
    100%{
        transform:translateY(-150px);
    }
}

/*5: Midground-zoom, background static-ish, foreground-zoom*/
@keyframes fg-z-in{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.25);
    }
}

@keyframes mg-z-in{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.25);
    }
}

@keyframes bg-z-in{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.1);
    }
}

/*6: Midground-zoom out, background static-ish, foreground-zoom*/
@keyframes fg-z-out{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(0.8);
    }
}

@keyframes mg-z-out{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(0.8);
    }
}

@keyframes bg-z-out{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(0.9);
    }
}

/*7: all zoom in*/
@keyframes fg-z-all-in{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.25);
    }
}

@keyframes mg-z-all-in{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.25);
    }
}

@keyframes bg-z-all-in{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.25);
    }
}

/*8: all zoom in*/
@keyframes fg-z-all-out{
    0%{
        transform:scale(1.25);
    }
    100%{
        transform:scale(1);
    }
}

@keyframes mg-z-all-out{
    0%{
        transform:scale(1.25);
    }
    100%{
        transform:scale(1);
    }
}

@keyframes bg-z-all-out{
    0%{
        transform:scale(1.25);
    }
    100%{
        transform:scale(1);
    }
}

/*
    There used to be a bunch of scene-specific declarations here.
    I ran into an issue where I had JS and CSS battling each other
    for where to put items and scale them.  Instead of coding for that,
    I'm just going with scene-specific stylesheets.  I mean come on,
    see the quip below:
*/
/*it is becoming apparent that there will be more stylesheets.  if i keep all the item-specific data here, i'll be loading a damn monster by the time i hit issue 4.*/

/*DEPRECATED*/

/* .room{
    display:block;
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

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

.prop{
    display:block;
    position:absolute;
} */

#ASYNC_AUDIO{
    display:none;
}

.emote{
    background-color:white;
    color:black;
    font-family:Georgia, 'Times New Roman', Times, serif;
    z-index:82;
    position:relative;
}

#loading-screen{
    position:absolute;
    top:0px;
    left:0px;
    background-color:#000000;
    color:#ffffff;
    width:100%;
    height:100%;
    z-index:96;
    text-align:left;
    letter-spacing:50px;
    align-content:end;
}

#loading-text{
    font-family:'Courier New', Courier, monospace;
    margin:50px;
}

@keyframes pockyHover{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(70px) scale(1,0.75);
    }
    100%{
        transform:translateY(0px);
    }
}

@keyframes enemyEntice{
    0%{
        transform:translateY(0px) scale(1,1);
    }
    25%{
        transform:translateY(5px) scale(1,0.95);
    }
    50%{
        transform:translateY(10px) scale(0.95,0.95);
    }
    75%{
        transform:translateY(5px) scale(0.95,1)
    }
    100%{
        transform:translateY(0px) scale(1,1);
    }
}

@keyframes enemyFrameWindowActive{
    0%{
        filter:brightness(1);
        transform:unset;
    }
    100%{
        filter:brightness(0.9);
        transform:unset;
    }
}

.enemy.enemy-window-active{
    animation-name:enemyFrameWindowActive;
    animation-duration:100ms;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
    animation-timing-function:linear;
}

@keyframes enemyPerfectFrameActive{
    0%{
        filter:brightness(1.5);
    }
    1%{
        filter:brightness(5);
    }
    50%{
        filter:brightness(1.5);
    }
}

.enemy.enemy-perfect-frame-active{
    animation-name:enemyPerfectFrameActive;
    animation-duration:100ms;
    animation-iteration-count:1;
    animation-timing-function:linear;
}

@keyframes enemyHitStandard{
    0%{
        filter:brightness(1);
        transform:scale(1);
    }
    10%{
        filter:brightness(0.5);
        transform:scale(0.95);
    }
    100%{
        filter:brightness(1);
        transform:scale(1);
    }
}
@keyframes enemyHitWindow{
    0%{
        filter:brightness(1);
        transform:scale(1);
    }
    10%{
        filter:brightness(0.5);
        transform:scale(0.9);
    }
    15%{
        filter:brightness(1);
        transform:scale(1.1);
    }
    20%{
        filter:brightness(0.5);
        transform:scale(0.98);
    }
    100%{
        filter:brightness(1);
        transform:scale(1);
    }
}
@keyframes enemyHitPerfect{
    0%{
        filter:brightness(1);
        transform:scale(1);
    }
    10%{
        filter:brightness(0.5);
        transform:scale(0.8);
    }
    15%{
        filter:brightness(5.5);
        transform:scale(1.2);
    }
    20%{
        filter:brightness(0.5);
        transform:scale(0.8);
    }
    100%{
        filter:brightness(1);
        transform:scale(1);
    }
}

.enemy.enemy-hit-standard{
    animation-name:enemyHitStandard;
    animation-duration:100ms;
    animation-iteration-count:1;
    animation-timing-function:linear;
}
.enemy.enemy-hit-window{
    animation-name:enemyHitWindow;
    animation-duration:150ms;
    animation-iteration-count:1;
    animation-timing-function:linear;
}
.enemy.enemy-hit-perfect{
    animation-name:enemyHitPerfect;
    animation-duration:200ms;
    animation-iteration-count:1;
    animation-timing-function:linear;
}

/*TITLE/BACK PAGE THINGS*/
#bsky{
    background-image:url('../db/assets/art/issue-2/environments/TITLE_SCREEN/prp_bsky.png');
    width:81px;
    height:81px;
}
#youtube{
    background-image:url('../db/assets/art/issue-2/environments/TITLE_SCREEN/prp_youtube.png');
    width:81px;
    height:81px;
}
#patreon{
    background-image:url('../db/assets/art/issue-2/environments/TITLE_SCREEN/prp_patreon.png');
    width:81px;
    height:81px;
}

#socials{
    display:flex;
    width:400px;
    height:90px;
    justify-content:space-between;
}