html
{
    overflow: hidden;
}

html, body
{
    margin:0;
    padding:0;

    height: 100%;
    width: 100%;
}

html, body, #wreck-room-renderer, .ui
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

#wreck-room-container
{
    display: flex;
    align-items: center;
    justify-content: center;
}

button.reset,
input[type="button"].reset,
input[type="submit"].reset,
input[type="reset"].reset,
button.reset:focus,
input[type="button"].reset:focus,
input[type="submit"].reset:focus,
input[type="reset"].reset:focus,
button.reset:active,
input[type="button"].reset:active,
input[type="submit"].reset:active,
input[type="reset"].reset:active
{ 
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    -webkit-tap-highlight-color: transparent;
}

button *
{
    pointer-events: none;
}

:root
{
    --black: #000;
    --white: #fff;

    --page-background: var(--black);
    --primary: #E34184;

    --from-red: hue-rotate(-25deg);
    --from-pure-red: hue-rotate(-20deg) brightness(1.4) saturate(0.68) brightness(1.12);
}

:root
{
    --layer-back: 100;
    --layer-game: 200;
    --layer-ui: 300;
    --layer-overlay: 400;

    --layer-debug: 50; /* actual layer + debug layer */
}

.hidden
{
    display: none !important;
}

.block
{
    display: block;
}

.flex
{
    display: flex;
}

.inline
{
    display: inline;
}

.block.inline
{
    display: inline-block;
}

.flex.inline
{
    display: inline-flex;
}

.flex-grow-0
{
    flex-grow: 0;
}

.flex-grow-1
{
    flex-grow: 1;
}

.flex-right
{
    flex-direction: row;
}

.flex-normal
{
    align-items: normal;
}

.flex-center
{
    align-items: center;
}

.flex-justify-left
{
    justify-content: left;
}

.flex-justify-center
{
    justify-content: center;
}

.flex-justify-right
{
    justify-content: right;
}

:root
{
    --inset-top: env(safe-area-inset-top, 0px);
    --inset-bottom: env(safe-area-inset-bottom, 0px);
    --inset-left: env(safe-area-inset-left, 0px);
    --inset-right: env(safe-area-inset-right, 0px);

    --inset-top-padded: calc(var(--inset-top) + 1em);
    --inset-bottom-padded: calc(var(--inset-bottom) + 1em);
    --inset-left-padded: calc(var(--inset-left) + 1em);
    --inset-right-padded: calc(var(--inset-right) + 1em);

    --offset-top: calc(var(--inset-top) * -1);
    --offset-bottom: calc(var(--inset-bottom) * -1);
    --offset-left: calc(var(--inset-left) * -1);
    --offset-right: calc(var(--inset-right) * -1);

    --offset-top-padded: calc(var(--inset-top-padded) * -1);
    --offset-bottom-padded: calc(var(--inset-bottom-padded) * -1);
    --offset-left-padded: calc(var(--inset-left-padded) * -1);
    --offset-right-padded: calc(var(--inset-right-padded) * -1);
}

.fullscreen
{
    position: absolute;
}

.safe
{
    --top: var(--inset-top);
    --bottom: var(--inset-bottom);
    --left: var(--inset-left);
    --right: var(--inset-right);
}

.fullscreen,
.top
{
    top: var(--top, 0);
}

.fullscreen,
.bottom
{
    bottom: var(--bottom, 0);
}

.fullscreen,
.left
{
    left: var(--left, 0);
}

.fullscreen,
.right
{
    right: var(--right, 0);
}

.center:not(.left):not(.right),
.bottom:not(.left):not(.right),
.top:not(.left):not(.right)
{
    left: 50%;
}

.center:not(.top):not(.bottom),
.left:not(.top):not(.bottom),
.right:not(.top):not(.bottom)
{
    top: 50%;
}

/* --- */

.from-top {
    transform-origin: top;
}

.from-bottom {
    transform-origin: bottom;
}

.from-left {
    transform-origin: left;
}

.from-right {
    transform-origin: right;
}

.from-top-left {
    transform-origin: top left;
}

.from-top-right {
    transform-origin: top right;
}

.from-bottom-left {
    transform-origin: bottom left;
}

.from-bottom-right {
    transform-origin: bottom right;
}

/* --- */

.ui
{
    z-index: var(--layer-ui);

    touch-action: manipulation;
}

.pass-through
{
    pointer-events: none;
}

/* touchable without call-outs */

.blocking
{
    pointer-events: auto;
}

/* touchable with call-outs */

.touchable
{
    pointer-events: auto;
}

.fixed
{
    position: fixed;
}

.absolute
{
    position: absolute;
}

.centered
{
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.square
{
    aspect-ratio: 1;
}

.point
{
    height: 0;
    width: 0;
}

.pixel
{
    height: 1px;
    width: 1px;
}

.fill
{
    height: 100%;
    width: 100%;
}

.fill-120
{
    min-width: 100%;
    min-height: 100%;
    max-width: 120%;
    max-height: 120%;
}

.invisible
{
    visibility: hidden;
}

.icon
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

body
{
    background-color: var(--page-background);
    font-family: "Extra", "ABFlockHeadline", system-ui;
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
}

#wreck-room-overlay,
#wreck-room-container,
#wreck-room-menu
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    transform: translateZ(0);
}

#wreck-room-overlay
{
    z-index: var(--layer-overlay);
}

#wreck-room-container
{
    z-index: var(--layer-game);
}

#wreck-room-debugger
{
    z-index: calc(var(--layer-game) + var(--layer-debug));
}

.ui
{
    display: none;
}

.gamestate_tutorial .ui,
.gamestate_game .ui
{
    display: initial;
}

.gamestate_game .ui.tutorial,
.gamestate_tutorial .ui.gameplay
{
    display: none;
}

.gamestate_tutorial #wreck-room-container,
.gamestate_game #wreck-room-container
{
    pointer-events: initial;
}

@keyframes rotate {
    from { rotate: z 0turn; }
    to { rotate: z 1turn; }
  }

@keyframes scale {
    from { scale: 0.7 0.7 1; }
    to { scale: 1 1 1; }
}

@keyframes shake-5 {
    0% { rotate: 0deg; }
    25% { rotate: 5deg; }
    50% { rotate: 0deg; }
    75% { rotate: -5deg; }
    100% { rotate: 0deg; }
}

@keyframes grow {
    0% { scale: 1 1 1; }
    50% { scale: 1.05 1.05 1; }
    100% { scale: 1 1 1; }
}

@keyframes ticktock {
    from { rotate: -2deg; }
    to { rotate: 2deg; }
}