body, html
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: monospace;

    background: black;
}

@font-face {
    font-family: 'Rubik Dirt';
    src: url('../assets/RubikDirt-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'DynaPuff';
    src: url('../assets/DynaPuff-VariableFont_wdth,wght.ttf') format('truetype');
}

canvas
{
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.ui
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1vmin;
    pointer-events: none;
    color: white;
    box-sizing: border-box;
    padding: 1rem;
    user-select: none;
}

.ui .debug
{
    position: absolute;
    font-size: 1.75em;
    top: .5em;
    left: .5em;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1em 1.5em;
    border-radius: .5em;
    pointer-events: all;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ui .debug div
{
    margin: .5rem 0 0 0;
}

.ui .debug p
{
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.ui .debug p span,
.ui .debug ul li span
{
    color: palevioletred;
}

control-knob
{
    width: 1.5em;
    height: 1.5em;
    border: 2px solid white;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    touch-action: none;
}

pre#semantic-plan,
pre#asemantic-plan
{
    margin: .5em 0 0 0;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: .8em;
    font-family: monospace;
    border-radius: .5em;
    color: #eb9cb7;
}

details summary
{
    cursor: pointer;
    user-select: none;
}

ul
{
    margin: 0;
    padding-left: 1.25rem;
}

.ui-box
{
    display: flex;
    flex-direction: column;
    gap: .5em;
    background: #5D2B03;
    padding: 2.5em 3em;
    box-sizing: border-box;
    border: 6px ridge #E39800;
    border-radius: 1rem;
    outline: 4px solid #351801;
    box-shadow: 5px 5px 0 #351801 inset, -5px 5px 0 #351801 inset, 0 0 1.25em black;
    pointer-events: all;
}

.ui-box h1
{
    margin: 0;
    padding: 0 0 .5em 0;
    font-size: 3em;
    color: #ffde85;
    font-family: 'DynaPuff', monospace;
    border-bottom: 2px solid #E3980040;
    text-shadow: 0 .15em 0 #351801;
    font-weight: normal;
}

.ui-box h2
{
    margin: .5em 0 0 0;
    padding: 0;
    font-size: 2.25em;
    color: #E39800;
    font-family: 'DynaPuff', monospace;
    text-shadow: 0 .15em 0 #351801;
}

.ui-box label
{
    font-size: 1.5rem;
    color: #ffde85;
    font-family: 'DynaPuff', monospace;
    text-shadow: 0 .1em 0 #351801;
    text-align: left;
}

.ui-box.level-collection-container
{
    flex-direction: column;
    padding: 1.25em;
}

.ui-box.level-collection-container .level-collection-header
{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ui-box.level-collection-container .level-collection-levels
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 70svh;
    max-width: 80rem;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    padding: 4px;
}

.level-collection-levels .level-card
{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    padding: 1.5rem;
    background-color: #462002;
    box-shadow: .3em .3em 0 #351801 inset;
    border: 4px ridge #af790d;
    outline: 4px solid #351801;
    border-radius: 1rem;
}

.level-collection-levels .level-card h2,
.level-collection-levels .level-card input
{
    margin: 0;
    padding: 0;
    font-size: 2rem;
    color: #ffde85;
    font-family: 'DynaPuff', monospace;
    text-shadow: 0 .15em 0 #351801;
    background: transparent;
    outline: none;
    font-weight: 600;
    border: none;
}

.level-collection-levels .level-card input
{
    color: #d1ffc4;
}

.level-collection-levels .level-card > img
{
    height: auto;
    max-height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
    max-width: 100%;
    box-sizing: border-box;
    background: url('/assets/bg.png') center calc(90%) / cover repeat;
    background-size: 50% auto;
    padding: 1rem;
}

.level-collection-levels .level-card .level-card-meta
{
    display: flex;
    gap: .5em;
    font-size: 1.5rem;
    width: 100%;
}

.level-collection-levels .level-card .level-card-meta-info
{
    color: #ffde85;
    font-family: 'DynaPuff', monospace;
    text-align: left;
    text-shadow: 0 .1em 0 #351801;
    margin-right: auto;
}

.level-collection-levels .level-card .level-card-meta img
{
    width: 1.5em;
    height: 1.5em;
    margin: 0 .2em 0 -.2em;
    object-fit: contain;
    vertical-align: middle;
}

.level-collection-levels .level-card .level-card-meta span
{
    color: white;
    margin-left: .3em;
}

.level-collection-levels .level-card .level-card-meta button
{
    padding: .5em;
    box-sizing: border-box;
}

.level-collection-levels .level-card .level-card-meta svg
{
    fill: #5D2B03;
    height: 100%;
}

.editing .ui-box
{
    max-width: 38em;
    overflow-y: auto;
    max-height: calc(100svh - 4em - 14px);
    scrollbar-width: none;
}

.asset-list:not(.tool-list)
{
    gap: 1em;
    display: flex;
    flex-wrap: wrap;
}

.asset-list.tool-list
{
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.asset-list img
{
    width: 7em;
    height: 7em;
    object-fit: contain;
    cursor: pointer;
}

.asset-list:not(.tool-list) img
{
    padding: 1em;
    border-radius: 1em;
    background-color: rgba(255, 255, 255, 0.1);
    filter: saturate(75%) brightness(75%);
    transition: background-color .3s, transform .3s, filter .3s;
}

.asset-list:not(.tool-list) img:hover
{
    background-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.asset-list.tool-list img.selected
{
    transform: scale(0.9);
    transition: transform .1s;
    filter: drop-shadow(0 0 .5em #ffe3bb) drop-shadow(0 0 .5em #fff2e0);
}

.asset-list:not(.tool-list) img.selected
{
    background: rgba(255, 255, 255, 0.2);
    outline: 2px solid white;
    filter: none;
}

.asset-list img.coin-spin
{
    object-fit: cover;
    object-position: 0 0;
    animation: coin-spin 1s steps(8) infinite;
}

.asset-list img.chest-frame
{
    object-fit: cover;
    object-position: 0 0;
    animation: chest-spin 6s steps(2) infinite;
}

@keyframes coin-spin
{
    from { object-position: 0 0; }
    to { object-position: 116% 0; }
}

@keyframes chest-spin
{
    from { object-position: 0 0; }
    to { object-position: 201.3% 0; }
}

.ui .lives
{
    display: flex;
    gap: .5em;
    height: 8em;
    pointer-events: all;
}

.ui .lives img:nth-child(2n-1) { rotate: 7.5deg; }
.ui .lives img:nth-child(2n) { rotate: -7.5deg;  }

.ui .lives .heart.lost
{
    opacity: 0.3;
}

.ui-header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: all;
}

.ui-header > .sub-container
{
    display: flex;
    align-items: center;
    gap: 2em;
}

.ui-header > .sub-container > div:empty
{
    display: none;
}

.ui-header > .sub-container > div:not(:empty):not(:last-child)
{
    border-right: 2px solid #E3980060;
    padding-right: 3em;
}

.coins, .keys, .requireables
{
    display: flex;
    align-items: center;
    gap: .5em;
    height: 8em;
    padding-right: 2em;
    pointer-events: all;
}

.coins img,
.keys img,
.requireables img
{
    width: 6em;
    height: 6em;
    object-fit: cover;
    object-position: 0 0;
    animation: spin 1s steps(8) infinite;
}

.keys img { rotate: -45deg; }

.coins .coin-count, .keys .key-count, .requireables .requireable-count
{
    font-size: 4em;
    font-family: 'DynaPuff', monospace;
    color: #ffde85;
    text-shadow: 0 .1em 0 #351801;
    user-select: none;
    text-align: right;
}

.pause-menu
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pause-menu .ui-box h2
{
    margin: 0 0 1.25rem 0;
    padding: 0;
    font-size: 2.25rem;
    color: #ffde85;
    font-family: 'DynaPuff', monospace;
    text-shadow: 0 .15em 0 #351801;
}

.pause-menu .ui-box button
{
    font-size: 1.5rem;
    padding: .5em 1.5em;
    border: none;
    border-radius: .5em;
    background: #E39800;
    color: white;
    text-shadow: 0 0 .2em #351801;
    font-weight: bold;
    font-family: 'DynaPuff', monospace;
    box-shadow: .2em .2em 0 #f4c15b inset, -.2em -.2em 0 #a46f05 inset;
    cursor: pointer;
    margin: .2rem 0;
    transition: background-color .3s;
}

.pause-menu .ui-box button:hover
{
    background: #f3ba48;
}

.editing
{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1rem;
    height: 100%;
}

.editing > div
{
    margin-left: auto;
}

.hidden
{
    display: none !important;
}


.scene, .scene-container
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    color: white;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    font-size: 2vmin;
    pointer-events: all;
}

.scene
{
    background: black;
}

.scene h1
{
    margin: 0;
    padding: 0;
    font-size: 3em;
    font-family: 'DynaPuff', monospace;
    color: #ffde85;
    max-width: 80rem;
    text-shadow: 0 .15em 0 #351801;
}

.scene p
{
    margin: 0;
    padding: 0;
    max-width: 80rem;
    line-height: 1.4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
}

.scene button:not(.editor-scene-button)
{
    --color: #E39800;
    font-size: 1.5em;
    padding: .5em 1.5em;
    min-width: 30rem;
    border: none;
    border-radius: .5em;
    background: var(--color);
    color: white;
    text-shadow: 0 0 .2em color-mix(in srgb, var(--color), #000000 90%);
    font-weight: bold;
    font-family: 'DynaPuff', monospace;
    box-shadow: .2em .2em 0 color-mix(in srgb, var(--color), #ffffff 30%) inset, -.2em -.2em 0 color-mix(in srgb, var(--color), #000000 30%) inset;
    outline: 4px solid color-mix(in srgb, var(--color), #000000 90%);
    cursor: pointer;
    transition: filter .1s, scale .05s, box-shadow .1s;
}

.scene button:hover
{
    scale: 1.05;
    filter: brightness(1.1);

}

.scene button:not(.editor-scene-button):active
{
    transform: translate(0, .15em) scale(0.95);
    box-shadow: 0 .05em 0 #4d2709;
}

.scene .editor-scene-button
{
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    font-size: 2rem;
    display: flex;
    align-items: center;
    gap: .35em;
    background: transparent;
    border: none;
    color: white;
    font-family: 'DynaPuff', monospace;
    cursor: pointer;
}

.scene .editor-scene-button img
{
    width: 1.5em;
    height: 1.5em;
    object-fit: contain;
}

.scene .editor-scene-button:hover
{
    color: #ffde85;
}

div:not(.pause-menu) > .ui-box button
{
    font-size: 1em;
    width: fit-content;
    min-width: fit-content;
}

.scene hr
{
    width: 100%;
    max-width: 80rem;
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #E39800, transparent);
    margin: 0;
}

.scene .row
{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

.scene a
{
    color: #ffde85;
    text-decoration: underline;
}

.scene .chapter-container,
.scene .level-container
{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.scene .chapter-container .chapter-card,
.scene .level-container .level-card
{
    height: 15rem;
    width: auto;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 6px ridge #E39800;
    border-radius: 1rem;
    outline: 4px solid #351801;
    box-shadow: 5px 5px 0 #351801 inset, -5px 5px 0 #351801 inset, 0 0 1.25em black;
}



.scene .chapter-container .chapter-card:hover,
.scene .level-container .level-card:hover
{
    transform: scale(1.05);
    z-index: 1;
    filter: brightness(1.05);
}

.scene .chapter-container .chapter-card h2,
.scene .level-container .level-card h2
{
    margin: .25rem 0 0 0;
    font-size: 2.75rem;
    color: #ffde85;
    font-family: 'DynaPuff', monospace;
    text-shadow: 0 .15em 0 #351801;
}


@media only screen and (max-width: 600px) {

    .ui
    {
        font-size: 1.8vmin;
    }
}