/*************************************/
/*        V A R I A B L E S          */
/*************************************/
:root {

    /* Overwritten by JS */
    --display-mode-color: transparent;
    --display-mode-height: 0;
    --safe-area-border: max(env(safe-area-inset-top), env(safe-area-inset-top), var(--display-mode-height)) solid var(--display-mode-color);

    /* Numbers */
    /*========*/

    /* General */
    --one-em: 1em;
    --half-em: 0.5em;

    --padding-x-large: 8vw;
    --padding-large: 4vw;
    --padding-medium: 2vw;
    --padding-small: 1vw;
    --padding-x-small: 0.5vw;

    --border-radius-big: 0.5em;
    --border-radius-small: 0.2em;

    --standardAnimation: 0.3s ease-in-out;

    /* World selection */
    --outlineWidthMe: 2vw;
    --outlineOffsetMe: -2vw;
    --outlineWidthOther: 1vw;
    --outlineOffsetOther: -1vw;

    /* Coding */
    --drawer-padding: var(--one-em);
    --fumetto-border-radius: var(--border-radius-small);
    --fumetto-arrow-border: 2vw;
    --fumetto-arrow-height: 1vw;
    --rule-header-height: 10vw;

    --instruction-elements-padding: var(--padding-small);
    --instruction-elements-gap: var(--padding-medium);

    /* Toolbar */
    --toolbar-button-border: var(--padding-small);
    --toolbar-button-padding: calc(var(--padding-x-small) + env(safe-area-inset-bottom));
    --toolbar-icon-height: 8vw;
    --toolbar-font-size: 3vw;
    --toolbar-height: calc((2 * var(--toolbar-button-border)) + (2 * var(--toolbar-button-padding)) + var(--toolbar-icon-height) + var(--toolbar-font-size));

    /* Value editor modal */
    --value-editor-toolbar-gap: 4vw;
    --value-editor-toolbar-padding: var(--toolbar-button-border);
    --value-editor-toolbar-content-height: 8vw;
    --value-editor-toolbar-height: calc((2 * var(--value-editor-toolbar-padding)) + var(--value-editor-toolbar-content-height));
    --value-editor-toolbar-content-height-big: 20vw;
    --value-editor-toolbar-height-big: calc((2 * var(--value-editor-toolbar-padding)) + var(--value-editor-toolbar-content-height-big));

    /* Form elements */
    --button-padding-top-bottom: 1vw;
    --button-padding-side: 2vw;

    --input-border-radius: var(--border-radius-small);
    --input-padding: var(--padding-x-small);
    --input-padding-big: var(--padding-medium);
    --keyboard-space: 20vh;

    /* Font */
    --font-medium: 4vw;
    --font-large: 6vw;


    /* Colors */
    /*========*/

    /* General */
    --ruler-color: #FF0000;
    --ruler-color-dark: #8e0d1c;

    --primary-button-color: rgb(56, 113, 224);
    --primary-button-color-dark: rgb(40, 85, 175);

    --shiny: rgb(173, 190, 115);
    --info: aqua;
    --warning: #ff4d2e;
    --invalid: rgb(209, 66, 66);
    --valid: rgb(90, 209, 66);

    --white: #ffffff;
    --black: #000000;
    --gray: #b6b6b6;

    /* Theme */
    --dark-theme-font-color: var(--white);
    --dark-theme-background-color: #323232;

    --light-theme-font-color: #2d2d2d;
    --light-theme-background-color: #eee;

    --font-color: var(--dark-theme-font-color);
    --background-color: var(--dark-theme-background-color);

    /* Backdrop */
    --backdrop-filter-color: rgba(0, 0, 0, 0.3);
    --backdrop-filter-blur: blur(0.8vw);

    /* Form element */
    --button-background-color: rgb(56, 113, 224);
    --button-background-color-hover: rgb(69, 123, 225);
    --button-background-color-active: rgb(40, 85, 175);
    --button-background-color-disabled: rgb(140, 152, 173);

    --input-border-color: rgb(140, 152, 173);
    --input-border-color-invalid: var(--invalid);
    --input-background: var(--white);

    /* Toolbar */
    --toolbar-background-color: rgba(0, 0, 0, 0.5);

    /* Coding */
    --color-background-action: blue;
    --color-background-condition: rgba(120, 120, 100, 1);
    --color-is-false: var(--invalid);
    --color-is-true: var(--valid);

    --comment-color: hotpink;
    --capturing-color: lawngreen;

    /* User colors */
    --user0: #FFFF00FF;
    --user1: #FF69B4FF;
    --user2: #9400D3FF;
    --user3: #A52A2AFF;
    --user4: #FF8C00FF;
    --user5: #4B0082FF;
    --user6: #00CED1FF;

    /* DPad */
    --d-pad-width: 55vw;
    --d-pad-border-radius: 5%;
    --d-pad-area: var(--ruler-color);
    --d-pad-background: var(--white);
    --d-pad-color: #f3f3f3;
    --d-pad-color-programmed: #818181;
    --d-pad-background-color-hover: #c9c9c9;
    --d-pad-background-color-active: #e3e3e3;

    /* Glas Style (Apple spatial user interfaces) */

    --glass-regular-background-color: rgba(255, 255, 255, 0.3);
    --glass-hover-color: rgba(255, 255, 255, 0.3);
    --glass-subtle-background-tint-color: rgba(255, 255, 255, 0.03);
}


/* === Custom Scrollbars (Thin, pretty cross-platform) === */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
  background: rgba(0,0,0,0.05);
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.20);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.30);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.20) rgba(0,0,0,0.05);
}

/*************************************/
/*        G E N E R A L              */
/*************************************/

* {
    margin: 0;
    padding: 0;
    touch-action: manipulation;
}

html, body {
    height: 100%;
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 4vw;
    background-color: var(--background-color);
    color: var(--font-color);
    line-height: 1.5;
}


/* Typography
==================================== */

@font-face {
    font-family: "Scoreboard";
    src: url('fonts/Erbos-Draco-1st-Open-NBP.eot');
    src: url('fonts/Erbos-Draco-1st-Open-NBP.eot?#iefix') format('embedded-opentype'),
        url('fonts/Erbos-Draco-1st-Open-NBP.woff2') format('woff2'),
        url('fonts/Erbos-Draco-1st-Open-NBP.woff') format('woff'),
        url('fonts/ErbosDraco1StOpenNbpRegular-l5wX.ttf') format("truetype"),
        url('fonts/Erbos-Draco-1st-Open-NBP.svg#Erbos-Draco-1st-Open-NBP') format('svg');
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0.7em;
    margin-bottom: 0.1em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

h2 {
    font-size: 4vw;
}

h3 {
    font-size: 3vw;
}

a {
    /* color: var(--ruler-color-dark); */
    color: lightblue;
}

p {
    margin-bottom: 1em;
}

.code {
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}


/* Content
==================================== */

#ruler-project {
    display: flex;
    position: relative;
    flex-direction: column;
    /*min-height: 100%; Use this when you want to scroll over the whole page */
    height: 100%;
}





#ruler-project #panel-container {
    flex: 1 1 auto;
}


/*************************************/
/*             F O R M               */
/*************************************/

/* Button */
button {
    font-size: inherit;
    padding: var(--button-padding-top-bottom) var(--button-padding-side);
    color: var(--dark-theme-font-color);
    background-color: var(--button-background-color);
    border: none;
    border-radius: var(--border-radius-small);
    text-align: center;
    min-width: 1em;
    min-height: 1em;
    margin-top: 0;
    transition: margin 0.2s ease-in-out;
}

button:hover {
    background-color: var(--button-background-color-hover);
}

button:active {
    background-color: var(--button-background-color-active);
    margin-top: 2px;
    margin-bottom: -2px;
}

button[disabled] {
    background-color: var(--button-background-color-disabled);
}

button.rigid,
button[disabled]:active {
    margin-top: 0;
    margin-bottom: 0;
}

button.icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

button.icon img {
    width: 1em;
    height: 1em;
}

button.close {
    position: absolute;
    right: calc(3 * var(--toolbar-button-border));
    top: calc(3 * var(--toolbar-button-border));
    height: var(--font-large);
    width: var(--font-large);
}

button.icon.close img {
    width: 100%;
    height: 100%;
}

/*************************************/
/*      D R A G  and   D R O P       */
/*************************************/

.with-transitions {
    transition: transform 0.3s cubic-bezier(0.42, 0, 0.33, 1.6), opacity 0.3s ease-in-out !important;
}

.warn {
    color: var(--warning);
}

.proxy {
    opacity: 0.9;
    position: absolute !important;
    box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.5);
    filter: drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(0.5vw);
    -webkit-backdrop-filter: blur(0.5vw);
    z-index: 10;
}

.proxy-arrow {
    z-index: 200;
    filter: invert(100%) drop-shadow(0 0 0.5vw rgba(255, 255, 255, 1)); 
    scale: 0.5;
}

/* even less background-color for proxies */
.action.proxy,
.condition.proxy,
.proxy .action-list,
.proxy .and-condition-list {
    background: rgba(255, 255, 255, 0.1);
}

.proxy.snapping {
    background: var(--shiny);
    box-shadow: 0 0 4vw var(--shiny);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.overwritten {
    border-bottom: 0.5vw solid red;
}

.delete::after {
    content: "";
    position: absolute;
    background-image: url("assets/icons/cross_out.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.5));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.source {
    opacity: 0.0;
    z-index: 0;
}


/*************************************/
/*         P A N E L S               */
/*************************************/

#panel-container {
    position: relative;
    overflow: hidden;
    /* Don't allow overflow here - drawer must not be scrollable from the outside (only from the inside) */
    background-color: rgb(50, 50, 50);
}

#panel-container::after {
    content: " ";
    display: block;
    position: absolute;
    background: black;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;

    transition: opacity 150ms linear;
}

/* user awareness */
#panel-container::before {
    pointer-events: none;
    position: absolute;
    content: "";
    inset: 0;
    border-radius: 1vw;
    z-index: 1;
}

#panel-container.capture-mode {
    &:after {
        z-index: 51;
        opacity: 0.8;
    }

    #background-tools {
        z-index: 52;
    }

    #reset-button {
        display: none
    }
}

#panel-glimpse {
    position: absolute;
    display: flex;
    flex-direction: column;
    font-size: 200%;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    background-color: #000000;
    font-weight: 900;
    width: 100%;
    height: 100%;
}


#panel-glimpse img {
    position: absolute;
    margin: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


#panel-glimpse h1 {
    position: absolute;
    margin: 0;
}


.logo-small {
    margin-top: var(--one-em);
    margin-left: 10vw;
    max-width: 25%;
    margin-bottom: var(--half-em);
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: var(--one-em);
    margin-top: var(--half-em);
}

/* Dynamic Content
====================*/

.dynamic-content {
    background: inherit;
    /* needs the same color as its parent to cover the panel-glimpse text */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* start in the center without text-align */
    height: 100%;
    overflow: auto;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.dynamic-content:has(> .project-tutorial.show) {
    overflow: hidden;
}

/* More scrolling space for all dynamic panels' content */
.dynamic-content>*:last-child {
    margin-bottom: calc(var(--toolbar-height) + var(--one-em));
}

/* ... except for the dynamic panels content which is a method */
.dynamic-content.method>*:last-child {
    margin-bottom: 0;
}

/* More scrolling space for the last rule in a methode (this time solved via padding and not margin)
 * Does not apply to the .proxy which appears as last element in the .rule-list while dragging a rule.
 */
.dynamic-content.method .rule:nth-last-child(-n + 1 of :not(.proxy)) .action-list,
.dynamic-content.method .rule:nth-last-child(-n + 1 of :not(.proxy)) .condition-list,
.dynamic-content.method .rule:nth-last-child(-n + 1 of :not(.proxy)) .and-condition-list {
    padding-bottom: calc(var(--toolbar-height) + var(--one-em));
}


/* HomePanel */

.welcome-logo {
    margin-top: 2vw;
    width: 30vw;
}

.welcome-text {
    text-align: center;
    padding: 0 1vw;
    margin-bottom: 0;
    font-size: 2.8vw;
}

.project-picker {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4vw;
    padding-left: 2vw;
    padding-right: 0;
    /* keep margin right 0 to support the "there is more ..." feeling */
}


.project-list {
    display: grid;
    min-height: 18vw;
    /* Hack?? */
    grid-auto-flow: column;
    grid-auto-columns: 28vw;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--padding-small);
}


.project-proxy {
    position: relative;
    /* height difference to project-list to fit overlapping projet-proxy-team */
    height: 16vw;
    border-radius: var(--border-radius-small);
    -webkit-user-select: none;
    user-select: none;
    container-type: inline-size;
}

.project-proxy img {
    border-radius: 1vw;
}


/* user awareness, also used for selection */
.project-proxy::after {
    position: absolute;
    content: "";
    inset: 0;
    border-radius: 1vw;
    border: var(--border, "none");
    box-shadow: var(--boxshadow, "none");
}


.project-proxy::before {
    content: "";
    position: absolute;
    color: white;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
    border-radius: 1vw;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


.project-proxy>p {
    font-size: 2vw;
    text-align: center;
    position: absolute;
    bottom: 0;
    color: var(--dark-theme-font-color);
    width: 100%;
}


.project-proxy>img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: white;
}


.project-proxy .my-project-proxy__ellipsis-button {
    opacity: 0.2;
    position: absolute;
    z-index: 10;
    right: 1vw;
    top: 1vw;
    width: 4vw;
    height: 4vw;
    padding: 0;
    font-size: 3vw;
    background-color: var(--backdrop-filter-color);
    backdrop-filter: var(--backdrop-filter-blur);
    -webkit-backdrop-filter: var(--backdrop-filter-blur);
    transition: opacity 300ms ease-in-out;
}

.visible .project-proxy.status-connecting {
    animation: pulse-orange 0.1s infinite;
    border-bottom: 3px solid orange;
}

.visible .project-proxy.status-synching {
    animation: pulse-green 0.2s infinite;
    border-bottom: 3px solid orange;
}

.visible .project-proxy.status-connected {
    animation: pulse-green 1s infinite;
    border-bottom: 3px solid green;
}

.visible .project-proxy.status-connection-timeout {
    animation: pulse-red 0.1s infinite;
    border-bottom: 3px solid red;
}

.visible .project-proxy.status-disconnected {
    border-bottom: 3px solid red;
}

@keyframes pulse-orange {
    0% {
        border-bottom-color: orange;
    }

    50% {
        border-bottom-color: transparent;
    }

    100% {
        border-bottom-color: orange;
    }
}

@keyframes pulse-green {
    0% {
        border-bottom-color: rgb(0, 255, 0);
    }

    50% {
        border-bottom-color: transparent;
    }

    100% {
        border-bottom-color:  rgb(0, 255, 0);
    }
}

@keyframes pulse-red {
    0% {
        border-bottom-color: rgb(255, 0, 0);
    }

    50% {
        border-bottom-color: transparent;
    }

    100% {
        border-bottom-color: rgb(255, 0, 0);
    }
}

@keyframes pulse-green {
    0% {
        border-bottom-color: rgb(0, 255, 0);
    }

    50% {
        border-bottom-color: transparent;
    }

    100% {
        border-bottom-color:  rgb(0, 255, 0);
    }
}


@media (hover: none) {
    .project-proxy .my-project-proxy__ellipsis-button {
        opacity: 1
    }
}


.project-proxy:hover .my-project-proxy__ellipsis-button {
    opacity: 1;
}


.project-proxy-team {
    position: absolute;
    display: flex;
    left: 2vw;
    flex-direction: row;
    gap: 2vw;
    top: calc(100% - 5vw);
    z-index: 1;
}


.team-member-badge {
    width: 5vw;
    height: 6vw;
    text-align: center;
    border-radius: 1vw;
    box-shadow: 0 0 0.3vw rgba(0, 0, 0, 0.5);
}



.new-project-proxy-button, .collaborate-with-project-proxy-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: auto;
    height: 9vw;
    aspect-ratio: 1 / 1;
    background-color: white;
    color: black;
}


.new-project-proxy-button p, .collaborate-with-project-proxy-button p {
    margin: 0;
    margin-bottom: 1vw;
    font-size: 7vw;
}


.project-tutorial {
    background-color: var(--black);
    -webkit-backdrop-filter: var(--backdrop-filter-blur);
    backdrop-filter: var(--backdrop-filter-blur);
    position: fixed;
    left: 0;
    display: flex;
    justify-content: normal;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
    z-index: 20;
    touch-action: none;
}


.iframe-container {
    height: 60vw;
}


.iframe-container iframe {
    background: url("assets/icons/progress/dot-circle.jpg") no-repeat center;
    background-size: 25vw;
    width: 100%;
    height: 100%;
}

.iframe-container button.close {
    top: var(--toolbar-button-border);
}

/* Edit Panel */

.tool-box {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
}

.tool-box button {
    touch-action: none;
}


.tool-box__button,
.tool-box__agent-picker {
    width: 12dvw;
    height: 12dvw;
    margin: 0 1dvw;
    padding: 1dvw;
    border-radius: 1dvw;
    background-color: rgba(255, 255, 255, 0.2);
    border-bottom: var(--toolbar-button-border) solid rgba(0, 0, 0, 0);
    transform: scale(1);
    transition: transform 0.1s ease-in-out;
}

.tool-box__agent-picker {
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    object-fit: cover;
}

.connected-bottom {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


.connected-top {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}


.tool-box__button:hover, .tool-box__agent-picker:hover {
    background-color: var(--glass-hover-color);
}


.tool-box__button:active {
    border-bottom: var(--toolbar-button-border) solid red;
    transform: scale(1.1);
}

.tool-box__button.selected,
.tool-box__agent-picker.selected {
    border-bottom: var(--toolbar-button-border) solid red;
}


/* PlayPanel */
#d-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--d-pad-area);
    border-radius: 50%;
    padding: 2vh;
    max-height: 100%;
    max-width: 100%;
    margin-bottom: auto;
}

#d-pad button {
    background-color: var(--d-pad-background);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    margin: -0.1vw;
    /* small hack to overcome grid anti-aliasing in Safari - did it work? */
    height: 22vw;
    width: 22vw;
    max-height: 9vh;
    max-width: 9vh;
}

#d-pad button:not(.programmed) {
    cursor: help;
}

/* show only on mouse devices */
@media (hover: hover), (-moz-touch-enabled: 0), (pointer: fine) {
    #d-pad button:hover {
        background-color: var(--d-pad-background-color-hover);
    }
}

#d-pad button:active {
    background-color: var(--d-pad-background-color-active);
}

#d-pad button.arrow:before,
#d-pad button.circle:before {
    content: '';
    background-color: var(--d-pad-color);
    display: inline-block;
}

#d-pad button.programmed:before {
    background-color: var(--d-pad-color-programmed);
}

#d-pad button.circle:before {
    border-radius: 50%;
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

#d-pad button.arrow:before {
    -webkit-mask: url("assets/icons/dpad/play.svg") no-repeat 50% 50%;
    mask: url("assets/icons/dpad/play.svg") no-repeat 50% 50%;
    width: 100%;
    height: 100%;
}

#d-pad button#d-pad-up.arrow:before {
    rotate: -90deg;
}

#d-pad button#d-pad-left.arrow:before {
    rotate: 180deg;
}

#d-pad button#d-pad-down.arrow:before {
    rotate: 90deg;
}

#d-pad button#d-pad-up {
    border-radius: var(--d-pad-border-radius) var(--d-pad-border-radius) 0 0;
    grid-column-start: 2;
}

#d-pad button#d-pad-left {
    border-radius: var(--d-pad-border-radius) 0 0 var(--d-pad-border-radius);
    grid-column-start: 1;
}

#d-pad button#d-pad-center {
    border-radius: 0;
}

#d-pad button#d-pad-right {
    border-radius: 0 var(--d-pad-border-radius) var(--d-pad-border-radius) 0;
}

#d-pad button#d-pad-down {
    border-radius: 0 0 var(--d-pad-border-radius) var(--d-pad-border-radius);
    grid-column-start: 2;
}


/* Settings Panel */

#project-link {
    color: #00d2ee;
    text-align: center;
    font-size: 2vw;
    pointer-events: initial;
    margin-bottom: 3vw;
}


#project-UUID {
    font-size: 3vw;
    margin-bottom: 3vw;
}


/* InvitePanel */


#qr-code {
    max-width: 40%;
    background-color: #8e0d1c;
}


#qr-code img {
    width: 100%;
    height: 100%;
}


/*************************************/
/*        T O O L    B A R           */
/*************************************/

#debugger {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1em;
    width: 1em;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/*************************************/
/*        T O O L    B A R           */
/*************************************/

#tool-bar {
    position: fixed;
    display: flex;
    justify-content: space-evenly;
    align-items: start;
    bottom: 0;
    right: 0;
    /* Instead of with 100% */
    left: 0;
    /* Instead of with 100% */
    /* pointer-events: none; */
    background-color: var(--backdrop-filter-color);
    backdrop-filter: var(--backdrop-filter-blur);
    -webkit-backdrop-filter: var(--backdrop-filter-blur);
    z-index: 50;
    /* hack for now: env(safe-area-inset-bottom) does not appear to work on fullscreen iOS */
    height: var(--toolbar-height);
    border-bottom: var(--safe-area-border);
}

#tool-bar button {
    background: transparent;
    border: none;
    border-top: var(--toolbar-button-border) solid transparent;
    border-bottom: var(--toolbar-button-border) solid transparent;
    pointer-events: auto;
    cursor: pointer;
    padding: var(--toolbar-button-padding) 3vw;
    transition: border var(--standardAnimation);
}

#tool-bar button:active {
    margin-top: 0;
    margin-bottom: 0;
}

#tool-bar button:active p,
#tool-bar button:active img {
    margin-top: 2px;
    margin-bottom: -2px;
}


.tool-bar-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0;
    user-select: none;
    -webkit-user-select: none;
}


.tool-bar-button.active {
    /* border-bottom: var(--toolbar-button-border) solid white !important; */
    background-color: rgba(255, 255, 255, 0.2) !important;
}


.play-button-icon {
    width: var(--toolbar-icon-height);
    height: var(--toolbar-icon-height);
    background-color: rgba(158, 158, 158, 0.7);
    transform: scale(0.8);
    /* filter: invert(15%); */
    transition: background-color 0.3s ease-in-out, clip-path 0.3s ease-in-out;
    clip-path: polygon(0 0, 50% 25%, 50% 75%, 50% 75%, 50% 25%, 100% 50%, 100% 50%, 0 100%);
}


.tool-bar-button.has-code.active .play-button-icon {
    clip-path: polygon(0 0, 40% 0, 40% 100%, 60% 100%, 60% 0, 100% 0, 100% 100%, 0 100%);
    background-color: red;
}


.tool-bar-button.has-code.stopping .play-button-icon {
    clip-path: polygon(10% 10%, 50% 10%, 50% 90%, 50% 90%, 50% 10%, 90% 10%, 90% 90%, 10% 90%);
    background-color: orange;
}

/* render button green if there is some code that could be run */
.tool-bar-button.has-code .play-button-icon {
    background-color: rgba(200, 200, 200, 1);
}

/* .tool-bar-button.has-code:not(.stopping):not(.active):hover .play-button-icon {
    background-color: rgba(0, 255, 0, 1);
} */


.play-button-icon:hover {
    background-color: rgba(158, 158, 158, 1);
}


.tool-bar-button p,
#video-container button p {
    opacity: 0.3;
    font-size: 3vw;
    margin: 0 -10em;
    /* shrinks width of p element if it contains to many characters -> the buttons width stays the same even if there are many characters (could also be solved with p absolut positioned and some tricks). */
    transition: opacity 0.5s;
}

.tool-bar-button.active p,
#video-container button.on-recording p {
    opacity: 1;
}

#tool-bar button img,
#video-container button img {
    height: var(--toolbar-icon-height);
}

#tool-bar button img {
    filter: invert(15%);
}

#tool-bar button:focus img,
#tool-bar button:hover img {
    filter: invert(0);
}

.button__disabled {
    opacity: 0.6;
}


/*************************************/
/*           W O R L D               */
/*************************************/

#video-capture-background {
    z-index: -1;
}

#world-background-image,
#world-background-canvas,
#video-capture-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.world-annotation {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: 200;
}

.raised {
    z-index: 1;
}

.ruler-world.raised {
    /* active marker */
}

.is-windows .ruler-world.raised {
    touch-action: none;
}

.agent-stack-container {
    display: grid;
    gap: 0;
    grid-gap: 0;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: auto;
    background-image: url("assets/icons/checkerboard.png");
    justify-content: center;
    overflow: hidden;
    position: relative;
}


/* User Awareness */
.ruler-world:not(.users-hidden) .agent-stack-container::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--boxshadow, "none");
    pointer-events: none;
    z-index: 20;
}


.agent-stack {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    /* CSS Trick to get same height as width */
    position: relative;
}


/* stack height display when more than 1 item stacked */
.agent-stack[class*="stack-"]::after {
    content: attr(data-stack-height);
    display: block;
    width: 30%;
    height: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 52;
    background-color: red;
    color: white;
    text-align: center;
    font-size: 2.1vw;
    border-right: 0.3vw solid black;
    border-bottom: 0.3vw solid black;
    padding-bottom: 0.2vw;
    padding-left: 0.1vw;
    padding-right: 0.1vw;
    border-radius: 50%;
    opacity: 1;
    /* animation-iteration-count: 1; */
    /* animation: appear-with-pop 0.3s ease-in-out;  */
    transition: opacity 1s ease-in-out;
}

#agent-grid.grid-cols-2 .agent-stack[class*="stack-"]::after {
    font-size: 10dvw;
    border-radius: 2dvw;
}

#agent-grid.grid-cols-4 .agent-stack[class*="stack-"]::after {
    font-size: 5dvw;
    border-radius: 1dvw;
}

#agent-grid.grid-cols-5 .agent-stack[class*="stack-"]::after {
    font-size: 4dvw;
    border-radius: 1dvw;
}

#agent-grid.grid-cols-7 .agent-stack[class*="stack-"]::after {
    font-size: 2.8dvw;
}

#agent-grid.grid-cols-9 .agent-stack[class*="stack-"]::after {
    font-size: 2.2dvw;
}

#agent-grid.grid-cols-11 .agent-stack[class*="stack-"]::after {
    font-size: 2dvw;
}

#agent-grid.grid-cols-12 .agent-stack[class*="stack-"]::after {
    font-size: 1.8dvw;
}

#agent-grid.grid-cols-14 .agent-stack[class*="stack-"]::after {
    font-size: 1.5dvw;
}

#agent-grid.grid-cols-16 .agent-stack[class*="stack-"]::after {
    font-size: 1.3dvw;
    border-radius: 0.4dvw;
}

#agent-grid.grid-cols-22 .agent-stack[class*="stack-"]::after {
    font-size: 1dvw;
    border-radius: 0.3dvw;
}

#agent-grid.hide-annotations .agent-stack[class*="stack-"]::after {
    transition: opacity 50ms ease-in;
    opacity: 0;
}

.agent {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    cursor: pointer;
    /* filter: drop-shadow(5px 5px 4px #000000); */
    z-index: 2;
    /* higher than base */
    transition: transform var(--standardAnimation);

    /* these are written by JS and used in .agent:after below */
    --boxshadow: none;
    --border: none;

    container-type: inline-size;
    scale: 1; /*Why was this 1.009*/
}

/* show agent awareness in edit mode (but not for ghosts) */
.edit .agent:not(.ghost):after,
.home .agent:not(.ghost):after {
    position: absolute;
    z-index: 1;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 2vw;
    box-shadow: var(--boxshadow);
    border: var(--border);
}

.agent.active:after {
    border-width: 20cqw;
}


.agent img {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*object-fit: fill;*/
    position: absolute;

}

.agent img[src^="data:image"] {
    object-fit: cover;
    /* TODO: Fix if image can be masked */
}

/* Hidden agent styling */
.hidden-agent > img{
    /* Base state for hidden agents - completely hidden in normal mode */
    opacity: 0;
}

/* In edit or world mode, hidden agents have 50% opacity */
.edit .hidden-agent > img,
.world .hidden-agent > img {
    opacity: 0.5 !important;
}

.animated-moves {
    transition: left var(--standardAnimation), top var(--standardAnimation), transform var(--standardAnimation);
    /* filter: none; */
    z-index: 3;
    /* higher than regular agent */
}


.no-transitions {
    transition: none !important;
}

/* Scoreboard
==================================== */

.scoreboard {
    position: absolute;
    top: 0;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    transform: translate(-50%);
    border: 0.6vw solid white;
    border-radius: 1vw;
    padding: 0;
    display: flex;
    z-index: 200;
    cursor: move;
    align-items: stretch;
    justify-content: center;
}

.handle {
    position: absolute;
    width: 4vw;
    height: 1vw;
    background-color: #007BFF;
    border-radius: 10%;
    cursor: s-resize;
    bottom: 0;
    right: 50%;
    transform: translate(50%);
    -webkit-user-select: none;
    /* for Safari and iOS */
    user-select: none;
}

.score {
    font-family: "Scoreboard", monospace;
    border-right: 0.3vw solid white;
    padding-left: 0.5vw;
    align-items: center;
    justify-content: right;
    text-align: center;

}

.score:last-child {
    border-right: none;
}

.score-id-editor-list-item {
    font-family: "Scoreboard", Helvetica, Arial, sans-serif;
    border: 0.6vw solid white;
    padding: var(--instruction-elements-padding);
    padding-left: 2vw;
    /* background-color: rgba(0, 0, 0, 0.5); */
    border-radius: 1vw;
    transition: font-size 0.2s ease-in-out;
}

.value-editor_scrollable-list .score-id-editor-list-item.selected-parameter {
    font-size: 6vw;
    background-color: rgba(0, 0, 0, 0.5);
}

.score-animation {
    position: absolute;
    font-family: "Scoreboard", Helvetica, Arial, sans-serif;
    z-index: 2000;
    font-size: 6vw;
    -webkit-user-select: none;
    /* for Safari and iOS */
    user-select: none;
    filter: drop-shadow(0 0 0.5vw rgba(0, 0, 0, 1));
}

/* User
==================================== */

.user0 {
    color: var(--user0);
    border-color: var(--user0);
    outline-color: var(--user0);
}

.user1 {
    color: var(--user1);
    border-color: var(--user1);
    outline-color: var(--user1);
}

.user2 {
    color: var(--user2);
    border-color: var(--user2);
    outline-color: var(--user2);
}

.user3 {
    color: var(--user3);
    border-color: var(--user3);
    outline-color: var(--user3);
}

.user4 {
    color: var(--user4);
    border-color: var(--user4);
    outline-color: var(--user4);
}

.user5 {
    color: var(--user5);
    border-color: var(--user5);
    outline-color: var(--user5);
}

.user6 {
    color: var(--user6);
    border-color: var(--user6);
    outline-color: var(--user6);
}

/* .ghost {
    z-index: 200 !important;
    transform: translate(0, 0) scale(0.1) rotate(0deg);
    filter: blur(4px) drop-shadow(5px 5px 4px #000000) grayscale(0.5) brightness(2);
} */


/*************************************/
/*          B E H A V I O R          */
/*************************************/


.drawer {
    position: absolute;
    display: flex;
    flex-direction: column;
    opacity: 1;
    width: 50%;
    top: 0;
    z-index: 40;
    height: 100%;
}


#action-palette,
#action-palette.closed {
    box-shadow: none;
    right: -50%;
}


/* instant click/tap feedback for instructions in palettes: make smaller... */
#action-palette .action:active,
#condition-palette .condition:active {
    scale: 0.9;
}

/* ... and remove shadow */
#action-palette .action:active .icon:first-child,
#condition-palette .condition:active .icon:first-child {
    box-shadow: none;
}


#action-palette.opened {
    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.5);
    right: 0;
    z-index: 100;
}

#condition-palette,
#condition-palette.closed {
    box-shadow: none;
    left: -50%;
}


#condition-palette.opened {
    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.5);
    left: 0;
    z-index: 100;
}

.method {
    background-image: url("assets/images/ipad_circuit.jpg");
    background-attachment: fixed;
    align-items: normal;
    overflow-x: hidden;
    /* else condition-drawer pushes rule to the right and creates a scrollbar */
    overflow-y: auto;
    position: relative;
    /* --agentsource: url("/assets/images/RULER_Logo_mark_only.png") */
}

/* agent icon shown in behavior */
.method::before {
    content: "";
    position: fixed;  /* HACK: this is a hack to get the agent icon to show in the behavior */
    pointer-events: none;
    -webkit-pointer-events: none;
    align-items: normal;
    /* hack!!: top/left are viewport coordinates. Need to assume 16 / 9 world vertically above */
    top: 70vw;
    left: 25vw;
    width: 50vw;
    height: 50vw;
    background-image: var(--agentsource);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
}

.rule,
#condition-palette,
#action-palette {
    display: grid;
    grid-template-rows: var(--rule-header-height) auto;
}

.rule {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--rule-header-height) auto;
    flex: 1 1 auto;
    cursor: grab;
    width: 100%;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    left: 0;
    transition: filter var(--standardAnimation);
}

/* first rule "click me" onboarding and any rule without conditions but followed by other rules */

.method .rule:only-child .and-condition-list:empty::before,
.method .rule:not(:last-child) .and-condition-list:empty::before {
    content: "";
    position: absolute;
    background: url("assets/icons/touch.svg") no-repeat center;
    background-size: contain;
    top: 5vw;
    left: 5vw;
    width: 7vw;
    height: 7vw;
    animation: click-animation 2s infinite ease-in-out;
}


/* if rule has no conditions but is followed by other rules then call to action: add condition because otherwise the following rules will be unreachable */
.method {
    & .rule {
        &:only-child, &:not(:last-child) {
            & .and-condition-list:empty::after {
                content: attr(data-touch-to-add-conditions);
                font-style: italic;
                position: absolute;
                font-size: 3vw;
                top: 5vw;
                left: 15vw;
                width: 60%;
                height: 40%;
            }
        }

        &:only-child .and-condition-list:empty::after {
            color: white;
        }

        &:not(:last-child) .and-condition-list:empty::after {
            color: black;
            font-size: 2vw;
            font-style: normal;
            content: attr(data-touch-to-add-conditions-unreachable);
        }
    }
}



.method .rule:first-child .action-list:empty::before {
    content: "";
    position: absolute;
    background: url("assets/icons/touch.svg") no-repeat center;
    background-size: contain;
    top: 5vw;
    left: 5vw;
    width: 7vw;
    height: 7vw;
    animation: click-animation 2s infinite ease-in-out;
}


.method .rule:first-child .action-list:empty::after {
    content: attr(data-touch-to-add-actions) !important;
    font-style: italic;
    position: absolute;
    font-size: 3vw !important;
    top: 5vw !important;
    left: 15vw !important;
    width: 50%;
    height: 40%;
}

/* unreachable rules */
.rule.unreachable .action-list,
.rule.unreachable .and-condition-list {
    background: linear-gradient(95deg, rgba(255, 158, 158, 0.7) 0%, rgba(255, 158, 158, 0.8) 100%);
}

.rule-list {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rule-list.blurred .rule {
    filter: blur(1vw) grayscale(100%);
    /* filter: grayscale(100%); */
    /* filter: blur(1vw); */
}


/* Alex: I don't think these work */
.method.blurred .rule.active-action,
.method.blurred .rule.active-condition {
    filter: none;
}

.rule.active-action {
    left: -50%;
    filter: none !important;
}

.rule.active-condition {
    left: 50%;
    filter: none !important;
}


/* Explicit for drawer condition- and action-list */
.drawer .condition-list,
.drawer .action-list {
    overflow-x: hidden;
    overflow-y: auto;
}

.condition-list,
.and-condition-list,
.action-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--instruction-elements-gap);
    align-items: flex-start;
    background: linear-gradient(95deg, rgba(158, 158, 188, 0.7) 0%, rgba(158, 158, 188, 0.8) 100%);
    backdrop-filter: blur(0.5vw) grayscale(100%);
    -webkit-backdrop-filter: blur(0.5vw) grayscale(100%);
    min-height: 12vw;
    padding: var(--drawer-padding);
    cursor: grab;
}

/* rules that are ready to fire and have at least one action
   Tried: .rule.ready-to-fire:has(.action-list:not(:empty)) but did not work reliable on iOS 18
   Moved logic into JavaScript*/

.rule.ready-to-fire .action-list,
.rule.ready-to-fire .and-condition-list,
.rule.ready-to-fire .condition-list {
    background: linear-gradient(95deg, rgba(158, 188, 158, 0.7) 0%, rgba(158, 188, 158, 0.8) 100%) !important;
}



/* user awareness: avoid nesting */
#panel-container:not(.show-users) .condition-list:after,
#panel-container:not(.show-users) .and-condition-list:not(:empty)::after,
#panel-container:not(.show-users) .action-list:after {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    content: '';
    inset: 0;
    border-radius: 1vw;
}

.condition-list.active,
.and-condition-list.active,
.action-list.active {
    outline: rgba(124, 252, 0, 0.753) solid 2vw;
    outline-offset: -2vw;
    border-radius: 1cqw;
}



.active-action .action-list,
.active-condition .and-condition-list {
    /* these will introduce a stacking context preventing the instruction tags to be fully visible above the backdrop */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.action-palette .action-list,
.condition-palette .condition-list {
    padding-top: 0;
}


.reveal-location {
    animation-iteration-count: 1;
    animation: radar-wave 0.3s ease-in-out;
}


.condition-list--category {
    font-size: 4vw;
    height: 3vw;
    margin-top: 10px;
    margin-bottom: 10px;
    color: black;
}


.action-group4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 2px;
    /* width: 100%; */
}


.action-list--category {
    font-size: 4vw;
    height: 3vw;
    margin-top: 10px;
    margin-bottom: 10px;
    color: black;
}


/* Add "and" to all but last conditions in condition-list in rule */
.rule .and-condition-list .condition:not(:last-child)::after {
    content: attr(data-touch-to-add-conditions-and);
    position: absolute;
    left: calc(100% + 3vw);
    /*
    border: 4px solid rgba(99, 99, 99, 0.5);
    padding: 6px;
    border-radius: 10px;
    aspect-ratio: 1;
    align-content: center;
    */
}


/* Condition & Action */
.action,
.condition {
    display: flex;
    gap: 1.5vw;
    color: white;
    font-size: 4vw;
    position: relative;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border-radius: 6vw;
    padding: 0;
}


/* if instruction has at least one parameter */
.action:has(*:nth-child(2)),
.condition:has(*:nth-child(2)) {
    padding-right: 1.6vw;
    border-top-right-radius: 2vw;
    border-bottom-right-radius: 2vw;
    /* Glass border only for paramters */
    background-color: rgba(255, 255, 255, 0.3);
    border-top: rgba(255, 255, 255, 0.3) solid 0.4vw;
    border-left: rgba(255, 255, 255, 0.3) solid 0.4vw;
    border-bottom: rgba(255, 255, 255, 0.1) solid 0.4vw;
    border-right: rgba(255, 255, 255, 0.1) solid 0.4vw;
}


.action {
    background-color: var(--color-background-action);
}


.action .icon:nth-child(1) {
    background-color: var(--color-background-action);
    padding: 1vw;
    border-radius: 2vw;
    border: none;
    scale: 1.1;
    box-shadow: 0.2vw 0.2vw 1vw rgba(0, 0, 0, 0.5);
}


.condition .icon:nth-child(1) {
    background-color: var(--color-background-condition);
    padding: 1vw;
    border-radius: 2vw;
    border: none;
    scale: 1.1;
    box-shadow: 0.2vw 0.2vw 1vw rgba(0, 0, 0, 0.5);
}


.action *:nth-child(2),
.condition *:nth-child(2) {
    margin-left: 1vw;
}


.two-times-three-instruction-group .action *:nth-child(2),
.two-times-three-instruction-group .condition *:nth-child(2) {
    margin-left: 0.5vw;
}



.action .icon,
.condition .icon {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1vw;
    padding: 0;
    scale: 1.0;
    transition: background-color 300ms ease-in-out;
}

.action .icon:hover,
.condition .icon:hover {
    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.7);
}


.mutant-instruction {
    background: repeating-linear-gradient(45deg,
            yellow,
            yellow 1vw,
            orange 1vw,
            orange 2vw);
}


.condition.is-false .icon:first-child {
    background-color: var(--color-is-false);
}


.condition.is-true .icon:first-child {
    background-color: var(--color-is-true);
}

/*************************************/
/* Styled Instructions               */
/*************************************/

.say-instruction {
    display: grid;
    grid-template-columns: 1fr 0.1fr 1.9fr;
    grid-template-rows: 1fr 3vw;
    grid-gap: 2vw;
}


.say-instruction .icon {
    grid-row: span 2;
    padding-right: 0;
}


.say-instruction .string-literal {
    font-size: 2vw;
    grid-column: span 2;
    margin-left: 0;
}


.say-instruction .emoji-literal {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 2vw;
}


.palette-heading {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 50vw;
    background-color: rgba(50, 50, 50, 0.8);
    translate: -4vw;
}

.action-list .palette-heading:nth-child(n+6) {
    margin-top: 5vw;
}

.action-list .palette-heading:nth-child(n+6) {
    margin-top: 5vw;
}


.condition-list .palette-heading:nth-child(n+4) {
    margin-top: 5vw;
}



.condition-list .palette-heading:nth-child(n+4) {
    margin-top: 5vw;
}



.palette-heading .static-emoji-literal {
    background-color: transparent;
    padding-left: 4vw;
    font-size: 6vw;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    width: 8vw;
}


.palette-heading .static-string-literal {
    background-color: transparent;
    font-size: 3vw;
    text-align: left;
    color: white;
    margin-top: auto;
    margin-bottom: auto;
    width: auto;
}


/*************************************/
/* Turtle View                       */
/*************************************/


.action:has(.icon.turtle-view),
.condition:has(.icon.turtle-view) {
    border-top-left-radius: 6vw;
    border-bottom-left-radius: 6vw;
}


.action .icon.turtle-view,
.condition .icon.turtle-view {
    border-radius: 6vw;
}


/*************************************/
/* D O C U M E N T A T I O N  T A G  */
/*************************************/

/* The ::BEFORE element is used for the compact documentation tag, i.e., a brief string describing the name of an instruction. ::before is used because ::after is taken for "and" after conditions */
.action::before,
.condition::before {
    display: inline-block;
    white-space: nowrap;
    pointer-events: none;
    padding: 1vw 1vw 1vw 3vw;
    content: attr(tag-prefix) attr(tag);
    position: absolute;
    border-radius: 1vw;
    left: 10vw;
    background-color: var(--comment-color);
    color: black;
    opacity: 0;
    z-index: 2000 !important;
    /* tried to combine it with drop shadow but clip-path clips also the shadow */
    /* box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.5); */
    /* filter: drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.5)); */
    clip-path: polygon(0 50%, 3vw 0, 100% 0, 100% 100%, 3vw 100%);
    transition: opacity 0.3s ease-in-out;
}

/* Make actions after terminal semi-transparent, but still visible when dragging */
.after-terminal-action:not(.source) {
    opacity: 0.5;
}

/* smaller in drawer */
.drawer .action::before,
.drawer .condition::before {
    font-size: 3vw;
}

/* make actions and conditions show documentation on hover over instruction icon (only on mouse devices) */
@media (hover: hover), (-moz-touch-enabled: 0), (pointer: fine) {
    .action:has(.instruction-icon:hover)::before,
    .condition:has(.instruction-icon:hover)::before {
        opacity: 1;
    }
}

/*************************************/
/*  P A R A M E T E R S              */
/*************************************/


.direction-literal {
    /* margin-left: 2vw; */
    border-radius: 1vw;
    width: 6vw;
    height: 6vw;
    transition: background-color 300ms ease-in-out;
    background-color: rgba(0, 0, 0, 0.1);
    filter: invert(1);
}


.direction-literal:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


img.direction-literal {
    padding: 2vw;
}


.parameter {
    cursor: pointer;
    border-radius: 1vw;
    /* padding-left: var(--instruction-elements-gap); */
    /* padding-right: var(--instruction-elements-gap); */
    transition: background-color 300ms ease-in-out;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-user-select: none;
    user-select: none;
}


.short-time-literal {
    min-width: 11vw;
    text-align: center;
}


.short-time-literal::after {
    content: "s";
}


.playback-speed-literal {
    min-width: 11vw;
    text-align: center;
}


.playback-speed-literal::after {
    content: "x";
}

img.parameter {
    padding-right: 0;
}

img.icon {
    position: relative;
    width: 5vw;
    height: 5vw;
    opacity: 1;
}


img.large,
img.parameter {
    width: 10vw;
    height: 10vw;
}

.empty-instruction {
    visibility: hidden;
}

.header {
    display: flex;
    align-items: center;
    height: var(--rule-header-height);
    justify-content: space-between;
    background-color: rgba(50, 50, 50, 0.8);
    backdrop-filter: blur(0.5vw) grayscale(100%);
    -webkit-backdrop-filter: blur(0.5vw) grayscale(100%);
    font-size: 110%;
    padding: calc(var(--drawer-padding) / 4) var(--drawer-padding);
    padding-top: 0;
    padding-bottom: 0;
}

.header:has(.rule-button-strip) {
    padding-right: 0;
}

.palette-speaker-button {
    background-color: transparent;
    padding: 0;
    opacity: 0.3;
    height: 7vw;
    cursor: pointer;
}

.palette-speaker-button img {
    height: 100%;
}

.drawer .arrow {
    color: rgb(130, 178, 206);
    cursor: pointer;
}


.drawer .arrow.in-transition {
    /* color: rgb(232, 178, 30); */
    /* filter: drop-shadow(0vw 0vw 5vw rgba(232, 178, 30, 0.9)); */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5vw;
}


.three-times-three-instruction-group img.icon.large {
    width: 7vw;
    height: 7vw;
}

.three-times-three-instruction-group img.icon {
    width: 3vw;
    height: 3vw;
}

.three-times-three-instruction-group img.parameter {
    margin-left: var(--padding-small);
}


.three-times-three-instruction-group .static-string-literal {
    display: none;
}

.two-times-three-instruction-group img.icon {
    width: 6vw;
    height: 6vw;
}


.two-times-three-instruction-group .static-string-literal {
    display: none;
}

.action-group4>.action>.large {
    width: 6vw !important;
    height: 6vw !important;
}


.huge {
    width: 15vw;
    height: 15vw;
}


.inverted {
    filter: invert(100%);
    /* Creates z-index issue */
}


.up {
    transform: rotate(270deg);
}


.left {
    transform: rotate(180deg);
}


.down {
    transform: rotate(90deg);
}


.comment {
    position: relative;
    cursor: default;
    background-color: var(--comment-color);
    border-radius: var(--fumetto-border-radius);
    box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.5);
    /* looks great but renders super SLOW */
    /* filter: drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.5)); */
    padding: var(--padding-small);
    margin-bottom: calc(var(--fumetto-arrow-height) + (var(--instruction-elements-gap) / 2));
    text-align: center;
}

.comment::before {
    position: absolute;
    content: "";
    top: 99%;
    left: var(--fumetto-arrow-height);
    /* Crazy border hack to make triangle */
    border: var(--fumetto-arrow-border) solid transparent;
    border-top-color: var(--comment-color);
}


/*************************************/
/*  I N S T R U C T I O N  G R O U P */
/*************************************/

/* TODO: Why is this a action-list? -> action-grid / condition-grid? */
.three-times-three-instruction-group .action-list,
.three-times-three-instruction-group .condition-list {
    display: grid;
    /* gap: var(--padding-x-small); */
    gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
    border-radius: var(--border-radius-big);
    width: 41vw;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    height: auto;
    /* must be overwritten */
    overflow: visible;
    /* must be overwritten */
    padding: var(--padding-x-small);
    padding-top: 2vw;
    padding-bottom: 2vw;
    /* must be overwritten */
}

.two-times-three-instruction-group .action-list,
.two-times-three-instruction-group .condition-list {
    display: grid;
    gap: 2vw;
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--border-radius-big);
    width: 41vw;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.05);
    height: auto;
    /* must be overwritten */
    overflow: visible;
    /* must be overwritten */
    padding: var(--padding-x-small);
    padding-top: 2vw;
    padding-bottom: 2vw;
    /* must be overwritten */
}

/* make some conditions span multiple rows */

.two-times-three-instruction-group .see_up-instruction,
.two-times-three-instruction-group .see_down-instruction {
    grid-column: span 2;
}


.two-times-three-instruction-group .ahead-instruction,
.two-times-three-instruction-group .behind-instruction {
    grid-column: span 2;
}



/* Focus Sheet */

#backdrop {
    position: fixed;
    opacity: 0.5;
    background-color: black;
    width: 100%;
    height: 100%;
    z-index: 60;
    visibility: hidden;
    top: 0;
}


/*************************************/
/*      V A L U E   E D I T O R S    */
/*************************************/

.value-editor_text {
    font-size: 5vw;
    width: 90%;
}

.value-editor_list input {
    border-style: solid;
    border-color: var(--input-border-color);
    border-radius: var(--border-radius-big);
    padding: var(--input-padding-big);
    font-size: inherit;
}

.value-editor_list input:invalid {
    box-shadow: 0 0 var(--padding-small) 0 var(--input-border-color-invalid);
}

.value-editor_list .input-button-container {
    display: flex;
}

.value-editor_list .input-button-form {
    display: flex;
    gap: var(--padding-small);
    flex-direction: column;
}

.value-editor_list .keyboard-space {
    padding-bottom: var(--keyboard-space);
}

.value-editor_list .input-button-container button {
    margin-left: var(--input-padding-big);
}

.value-editor_list input[type="range"] {
    padding: 0;
    transform: rotate(270deg);
    width: calc(100vh - var(--value-editor-toolbar-height) - var(--value-editor-toolbar-height));
}

.value-editor_list input[type="range"]::after {
    content: attr(data-value);
    font-weight: bolder;
    transform: rotate(90deg);
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    text-shadow: 2px 2px 0 var(--dark-theme-font-color),
        2px -2px 0 var(--dark-theme-font-color),
        -2px 2px 0 var(--dark-theme-font-color),
        -2px -2px 0 var(--dark-theme-font-color),
        2px 0 0 var(--dark-theme-font-color),
        0 2px 0 var(--dark-theme-font-color),
        -2px 0 0 var(--dark-theme-font-color),
        0 -2px 0 var(--dark-theme-font-color);
}

.value-editor_list {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 200;
    text-align: center;
    overflow: hidden;
    /* 100% height with a browser menu (like in Chrome) means that page gets even longer - but we don't want the extra space to be scrollable  */
}


.value-editor_header,
.value-editor_footer {
    color: var(--dark-theme-font-color);
    font-size: var(--font-large);
    display: flex;
    align-items: start;
    justify-content: center;
    gap: var(--toolbar-button-border);
    position: absolute;
    width: 100%;
    height: var(--value-editor-toolbar-height);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: var(--toolbar-background-color);
    padding-top: var(--toolbar-button-border);
    padding-bottom: var(--toolbar-button-border);
    z-index: 10;
}

.audio-creator-dialog .value-editor_footer,
.shape-creator-dialog .value-editor_footer {
    height: var(--value-editor-toolbar-content-height-big);
}

.value-editor_header {
    top: 0;
}

.value-editor_header h2 {
    font-size: inherit;
    margin: 0;
}

.value-editor_header .close img {
    width: 100%;
    height: 100%;
}

.value-editor_body {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.value-editor_footer {
    bottom: 0;
    height: var(--toolbar-height);
    padding: 0;
    border-bottom: var(--safe-area-border);
}

.value-editor_footer button {
    --height-base: min(var(--toolbar-height), 90px);
    height: calc(var(--height-base) - 20px);
    font-size: calc(var(--height-base) - 40px);
    line-height: calc(var(--height-base) - 40px);
    bottom: 0;
    margin-top: 10px
}

.value-editor_footer .new {
    position: absolute;
    top: 0;
    left: calc(6 * var(--toolbar-button-border));
}

.value-editor_scrollable-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--value-editor-toolbar-gap);
    padding-top: calc(var(--value-editor-toolbar-height) + var(--value-editor-toolbar-gap));
    padding-bottom: calc(var(--value-editor-toolbar-height) + var(--value-editor-toolbar-gap));
    overflow-y: auto;
    width: 100%;
}

.value-editor-list-item {
    cursor: pointer;
    border-radius: 1vw;
    /* var(--button-border-radius); */
    padding: var(--instruction-elements-padding);
    background-color: var(--light-theme-background-color);
    color: var(--button-background-color);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

.world-size-editor-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 1vw;
    /* var(--button-border-radius); */
    padding: var(--instruction-elements-padding);
    background-color: var(--light-theme-background-color);
    color: var(--button-background-color);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, font-size 0.2s ease-in-out;
    gap: 2vw;
}

.world-size-editor-item p {
    margin: 0;
}


.grid-preview {
    display: grid;
    height: 8vw;
    /* grid-template-rows: repeat(9, 1fr); */
    /* grid-template-columns: repeat(16, 1fr); */
    background-image: repeating-linear-gradient(red 0 1px, transparent 1px 100%),
        repeating-linear-gradient(90deg, red 0 1px, transparent 1px 100%);
    /* background-size: 5% 25%; */
    aspect-ratio: 16 / 9;
    background-color: white;
    transition: height 0.2s ease-in-out
}

.world-size-editor-item.selected-parameter .grid-preview {
    height: 18vw;
}


.value-editor-list-item img {
    height: 3em;
    width: 3em;
    /* square image for better rotating outcomes */
    vertical-align: middle;
    margin-right: 0.5em;
    background: #acb6c1;
    padding: var(--padding-x-small);
    object-fit: cover;
}

.value-editor_scrollable-list .selected-parameter {
    background-color: var(--button-background-color);
    color: inherit;
    font-size: 6vw;
}

.activated-sound {
    animation: sound-wave 0.2s infinite ease-in-out;
}

.slider-button-bar,
.value-editor_slider {
    width: 30vh;
}

.value-editor_slider {
    background-color: rgb(71, 70, 70);
    border-radius: var(--border-radius-big);
    cursor: ns-resize;
    height: 50vh;
    overflow: hidden;
    position: relative;
    margin-bottom: var(--padding-medium);
}

.value-editor_slider_indicator {
    pointer-events: none;
    background-color: var(--dark-theme-font-color);
    width: 100%;
    position: absolute;
    bottom: 0;
}


.emoji-item {
    display: inline-block;
    container-type: inline-size;
    border-radius: 4vw;
    background-color: var(--glass-subtle-background-tint-color);
    aspect-ratio: 1/1;
    padding: 0;
}


.emoji-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


.emoji-item p {
    margin: 0;
    font-size: 75cqw;

}


.slider-button-bar {
    display: flex;
    justify-content: space-between;
}

.slider-button-bar button {
    min-height: 3em;
}


.voice-literal,
.string-literal,
.parameter--sound,
.sound-name-literal {
    color: var(--light-theme-font-color);
}


.emoji-literal {
    /* height: 10vw; */
    background-color: transparent;
    color: red;
    font-size: 4vw;
}

.static-string-literal {
    color: var(--light-theme-font-color);
    pointer-events: none;
    font-size: 75%;
    padding: 0 10px;
    margin-bottom: 5px;
}

.comment-instruction .static-string-literal {
    background: none;
    margin-bottom: 0;
}


.parameter-error-literal {
    color: limegreen;
    font-family: 'Monaco', monospace;
    background-color: black;
    font-size: 1.5vw;
}


.voice-literal,
.string-literal,
.parameter--sound,
.sound-name-literal {
    font-size: 80%;
    background-color: var(--input-background);
    border-radius: var(--input-border-radius);
    padding: var(--input-padding);
    margin-left: var(--instruction-elements-gap);
}

.score-id-literal {
    font-family: "Scoreboard", Helvetica, Arial, sans-serif;
    border: 0.6vw solid white;
    border-radius: 1vw;
    font-size: 3vw;
    background-color: rgba(0, 0, 0, 0.5);
}


/* IMAGE VALUE EDITOR */


.image-value-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vw;
    position: absolute;
    width: auto;
    margin: auto;
    /* background-color: rgba(0, 0, 0, 0); */
    /* border-width: 0; */
    /* filter: drop-shadow(1vw 1vw 1vw rgba(0, 0, 0, 0.9)); */
    box-shadow: none;
}


.image-value-editor_grid {
    position: relative;
    display: grid;
    grid-auto-rows: max-content;
    justify-content: center;
    max-width: 80vw;
    grid-template-columns: repeat(3, 1fr);
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    border-width: 0;
    gap: 2vw;
    background-color: rgba(0, 0, 0, 0);
}


.image-value-editor::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1vw);
    -webkit-backdrop-filter: blur(1vw);
}


.image-value-editor_item {
    background-color: var(--glass-subtle-background-tint-color);
    border-radius: 4vw;
    aspect-ratio: 1 / 1;
    padding: 0;
    width: 100%;
}


.image-value-editor_item:hover {
    background-color: var(--glass-hover-color);
}


.labeled-image-value-editor_item {
    display: flex;
    overflow: visible;
    background-color: var(--glass-subtle-background-tint-color);
    border-radius: 4vw;
    flex-direction: row;
    align-items: center;
    gap: 4vw;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}


.labeled-image-value-editor_item:hover {
    background-color: var(--glass-hover-color);
}


.labeled-image-value-editor_item div {
    color: white;
}


.labeled-image-value-editor_item img {
    width: 10vw;
}



.image-value-editor_item:focus {
    outline: none;
}


.image-value-editor_item img {
    margin: 2vw;
}


.selected-image {
    /* border: 1vw solid red; */
    background-color: blue;
    z-index: 101;
}


.selected-image img {
    filter: invert(1);
}

/*************************************/
/*      T R A N S F O R M E R S      */
/*************************************/

.rotate90 {
    transform: rotate(90deg);
}


.rotate180 {
    transform: rotate(180deg);
}


.rotate270 {
    transform: rotate(270deg);
}


/*************************************/
/*         A N I M A T I O N S       */
/*************************************/


@keyframes fading {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes red-glow {
    0% {
        box-shadow: 0 0 10px rgba(255, 57, 47, 0.6);
    }

    50% {
        box-shadow: 0 0 0 rgba(255, 57, 47, 0.6);
    }

    100% {
        box-shadow: 0 0 10px rgba(255, 57, 47, 0.6);
    }
}


@keyframes green-glow {
    0% {
        box-shadow: 0 0 10px rgba(57, 255, 47, 0.6);
    }

    50% {
        box-shadow: 0 0 0 rgba(57, 255, 47, 0.6);
    }

    100% {
        box-shadow: 0 0 10px rgba(57, 255, 47, 0.6);
    }
}


@keyframes wiggle {
    0% {
        filter: blur(4px) drop-shadow(5px 5px 4px #000000) grayscale(1) brightness(2);
    }

    50% {
        filter: blur(2px) drop-shadow(5px 5px 4px #000000) grayscale(0.5) brightness(2);
    }

    100% {
        filter: blur(4px) drop-shadow(5px 5px 4px #000000) grayscale(1) brightness(2);
    }
}


@keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}


@keyframes pulse-size {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.8);
    }
}



@keyframes sound-wave {
    0% {
        box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.7)
    }

    50% {
        box-shadow: 0 0 40px 30px rgba(232, 76, 61, 0);
    }

    100% {
        box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.7)
    }
}


@keyframes click-animation {
    0% {
        scale: 1;
        filter: grayscale(100%) drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.5));
    }

    5% {
        scale: 0.8;
        filter: grayscale(100%) drop-shadow(0vw 0vw 0vw rgba(0, 0, 0, 0.0));
    }

    10% {
        scale: 1;
        filter: grayscale(100%) drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.5));
    }

    100% {
        scale: 1;
        filter: grayscale(100%) drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.5));
    }
}


@keyframes radar-wave {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 4vw rgba(0, 0, 0, 0.5);
        transform: scale(2);
    }

    100% {
        box-shadow: 0 0 10vw 80vw rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
}


@keyframes pop-then-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(3);
    }

    100% {
        opacity: 0.2;
        transform: scale(0.1);
        z-index: 1000;
    }
}


@keyframes appear-with-pop {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }

    50% {
        opacity: 0.5;
        transform: scale(3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes score-up {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(2);
    }

    100% {
        opacity: 0;
        transform: translate(0, -20vw) scale(0.6);
    }
}

@keyframes score-down {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(2);
    }

    100% {
        opacity: 0;
        transform: translate(0, 20vw) scale(0.6);
    }
}

/*************************************/
/* Camera Modal                      */
/*************************************/

#video-container {
    /*width: 100%;*/
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.camera-output,
#preview-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#agent-grid {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2vw 2vw rgba(0, 0, 0, 0.2);
}

#agent-grid .camera-output {
    height: auto;
}

#video-container .camera-output,
#video-container #preview-canvas {
    width: auto;
}

#another-video-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#video-container #video-capture-agent,
#video-container #preview-canvas,
#video-container #viewer-frame {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

#video-container #preview-canvas {
    filter: drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.9));
}

#viewer-frame {
    outline: solid 2vw var(--gray);
    border-radius: var(--border-radius-big);
}

.mask {
    position: absolute;
    backdrop-filter: blur(1vw);
    -webkit-backdrop-filter: blur(1vw);
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 50%;
}

#top-mask,
#bottom-mask {
    width: 100%;
    height: 20%;
    left: 0;
}

#top-mask {
    top: 0;
}

#bottom-mask {
    top: 80%;
}

#right-mask,
#left-mask {
    width: 50%;
    height: 60%;
    top: 20%;
}

#left-mask {
    left: 0;
}

#right-mask {
    right: 0;
}

#video-container #video-toolbar {
    display: flex;
    justify-content: space-around;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: var(--value-editor-toolbar-height-big);
    background-color: var(--toolbar-background-color);
}

#video-container #filter-toolbar {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

#video-container button {
    position: relative;
}

#video-container button {
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.on-recording:before {
    --image-gap: 5px;
    position: absolute;
    top: var(--padding-small);
    margin-left: calc(var(--toolbar-icon-height) * -1 + 0.5ch + var(--image-gap));
    color: var(--capturing-color);
    font-size: 1.5em;
    line-height: 50%;
    content: "\2022";
    text-shadow: 1px 1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black), -1px -1px 0 var(--black), 1px 0 0 var(--black), 0 1px 0 var(--black), -1px 0 0 var(--black), 0 -1px 0 var(--black);
    z-index: 10;
}

#video-container button p {
    font-size: 60%;
}

#scan-button img,
#no-mask-button img {
    background: rgb(86, 143, 143);
    background: linear-gradient(135deg, rgb(86, 143, 143) 0%, rgb(180 166 136) 100%);
}

#outside-mask-button img,
#outside-inside-mask-button img {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

#scan-button img {
    filter: invert(1%) sepia(45%) hue-rotate(80deg) saturate(1000%);
}

/*************************************/
/*     R U L E R    B U T T O N S    */
/*************************************/


.copy-rule-button, .add-empty-rule-button {
    background-color: transparent;
    padding: 1vw;
    opacity: 0.1;
    height: 7vw;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    -webkit-touch-callout: none !important;
    /* Safari */
    -webkit-user-select: none !important;
    /* Safari */
    -moz-user-select: none !important;
    /* Old versions of Firefox */
    -ms-user-select: none !important;
    /* Internet Explorer/Edge */
    user-select: none !important;
    /* Non-prefixed version */
}


@media (hover: none) {
    .copy-rule-button, .add-empty-rule-button {
        opacity: 0.1
    }
}


.rule:hover .copy-rule-button, .rule:hover .add-empty-rule-button {
    opacity: 0.4;
}


.copy-rule-button:hover, .add-empty-rule-button:hover {
    opacity: 1 !important;
    background-color: transparent;
}



.ruler-button_image {
    height: 100%;
    pointer-events: none;
}


.small-text-button {
    font-size: 4vw;
    padding: 4vw;
}


#delete-current-project-button {
    opacity: 1;
    background-color: var(--primary-button-color);
    color: white;
}


/*************************************/
/*         C A P T U R E             */
/*************************************/

#background-tools,
#other-settings {
    z-index: 50;
    text-align: center;
    margin-top: 20px;
}

#background-tools button,
#other-settings button {
    margin-top: 20px;
}

#record-button,
#reset-button,
#capture-button,
#capture-button-panel {
    height: 65px;
    width: 65px;
}

#capture-button,
#capture-button-panel {
    background-color: transparent;
    border: 4px solid var(--white);
    border-radius: 50%;
    padding: 4px;
    transition: padding 0.25s;
}

#capture-button #inner-button,
#capture-button-panel #inner-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--white) url("assets/icons/camera/camera.svg") no-repeat 50%;
    background-blend-mode: exclusion;
    /* inverts camera background-image */
    background-size: 50%;
    border-radius: 50%;
    font-size: 100%;
    transition: background-color 0.25s;
}

#capture-button:active #inner-button,
#capture-button-panel:active #inner-button {
    background-color: var(--ruler-color);
    background-blend-mode: initial;
}

#reset-button {
    margin-left: 2dvw;
}


#other-settings {
    margin-top: 20px;
}


.material-symbols-outlined {
    font-size: 15px;
}


/*************************************/
/*         D I A L O G               */
/*************************************/

dialog {
    /* background-color: var(--background-color); */
    background-color: var(--glass-regular-background-color);
    border-top: rgba(255, 255, 255, 0.3) solid 0.4vw;
    border-left: rgba(255, 255, 255, 0.3) solid 0.4vw;
    border-bottom: rgba(255, 255, 255, 0.2) solid 0.4vw;
    border-right: rgba(255, 255, 255, 0.2) solid 0.4vw;
    /* border: none; */
    backdrop-filter: blur(4vw);
    -webkit-backdrop-filter: blur(4vw);
    color: var(--dark-theme-font-color);
    max-width: 80vw;
    min-width: 50vw;
    padding: var(--padding-large);
    margin: auto;
    border-radius: 6vw;
    box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5);
}

dialog h2 {
    text-align: center;
    margin-bottom: var(--padding-large);
    font-size: 6vw;
}


dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    /* backdrop-filter: blur(1vw); */
    /* -webkit-backdrop-filter: blur(1vw); */
}


dialog p {
    max-height: 20em;
    overflow: auto;
    font-size: 4vw;
}

dialog .button-bar {
    display: flex;
    justify-content: space-evenly;
    gap: var(--one-em);
    margin-top: var(--padding-large);
}




dialog .string-input {
    margin-top: 2vw;
    font-size: 4vw;
    height: 6vw;
    /* width: 100%; */
    border-radius: 3vw;
    border-bottom: solid rgba(255, 255, 255, 0.1) 0.4vw;
    border-right: solid rgba(255, 255, 255, 0.1) 0.4vw;
    border-top: solid rgba(0, 0, 0, 0.1) 0.4vw;
    border-left: solid rgba(0, 0, 0, 0.1) 0.4vw;
    padding-left: 3vw;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}


.string-input:focus-visible {
    outline: none;
}


dialog .ok-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--glass-regular-background-color);
    height: 8vw;
    width: 15vw;
    border-radius: 4vw;
}


dialog button:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/*************************************/
/*     Collaboration-Browser-Dialog  */
/*************************************/

.collaboration-browser {
    display: grid;
    grid-template-rows: 10vmin auto 10vmin 10vmin;
    height: 100vh;
    max-height: 90vh;
    width: 90%;
    max-width: 85vw;
}


.radar {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    place-self: center;
    /* grow as large as possible in portrait and landscape mode */
    width: calc(min(85vw, 100vh - 40vmin));
    max-width: 100vh;
    clip-path: circle(44% at 50% 50%);
}


.radar img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}


.spinner {
    position: absolute;
    top: 0;
    left: 0;
}

#my-emoji {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    scale: 2;
    translate: -50% -50%;
    filter: drop-shadow(0 0 1vw rgba(0, 0, 0, 0.9));
}


button.target {
    position: absolute;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    background-color: transparent;
    left: 0;
    top: 0;
    translate: -50% calc(-50% - 0vw);
    border-radius: 1vw;
    padding: 1vw;
    transition: scale 2000ms linear, left 200ms linear, top 200ms linear, filter 50ms ease-in-out;
}


.target.selected-buddy {
    background-color: rgba(255, 255, 255, 0.3);
}


.target.selected-buddy.yellow {
    border: 0.5vw solid lime;
}


.target.selected-buddy.orange {
    border: 0.5vw solid orange;
}


.target.selected-buddy.red {
    border: 0.5vw solid red;
}


.partner-emoji {
    transition: background-color 100ms ease-in-out;
    font-size: 5vmin;
    text-align: center;
    border-radius: 1vw;
    /* width: 1vmin; */
    aspect-ratio: 1/1;
}


.partner-label {
    font-size: 3vmin;
}


.partner-hardware {
    display: block;
    font-size: 1.5vmin;
    font-style: italic;
    opacity: 0;
}


.face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.collaboration-browser>button {
    width: 15vw;
    place-self: center;
}


.collaboration-browser h3 {
    place-self: center;
}

/*************************************/
/*     define-user-dialog             */
/*************************************/

.define-user__user-items {
    margin-bottom: 4vw;
    display: grid;
    grid-column-gap: 6vw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}


.define-user__name:focus {
    outline: none;
}



.define-user__location-info {
    display: flex;
    align-items: center;
}


.define-user-dialog .define-user__location-text {
    font-size: 2vw;
    font-style: italic;
    margin-top: 0;
    margin-left: 3vw;
}


.define-user__location {
    text-align: left;
    margin-top: 0;
    font-size: 2vw;
    height: 6vw;
    width: 6vw;
}


.define-user-dialog .emoji-literal {
    background-color: transparent;
    padding: 0;
    /* margin-bottom: 4vw; */
    font-size: 6vw;
    filter: drop-shadow(0 0 1vw rgba(255, 255, 255, 0.2));
}


.define-user-dialog p {
    margin-bottom: 0;
    margin-top: 2vw;
}


.define-user-dialog .ruler-button {
    opacity: 1;
    background-color: var(--primary-button-color);
    color: white;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6vw;
    padding-left: 2vw;
    padding-right: 2vw;
}


@keyframes pop {
    0% {
        opacity: 1;
        transform: scale(1.3);
    }

    10% {
        opacity: 1;
        transform: scale(1.3);
    }

    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
}

/*************************************/
/*     Participation-Dialog          */
/*************************************/

.participation-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.participation-dialog p {
    margin-bottom: 0;
    font-size: 4vmin;
    min-height: 8vmin;
}

.participation-dialog h2 {
    margin-bottom: 0;
    font-size: 7vmin;
}


#animated-hand {
    position: relative;
    width: 50vmin;
    height: 50vmin;
}


#participation__hand-emoji {
    position: absolute;
    z-index: 10;
    left: 10vw;
    top: 100vw;
    margin: 0;
    font-size: 40vmin;
    filter: drop-shadow(1vw 1vw 2vw rgba(0, 0, 0, 0.3));
    transition: rotate 200ms linear, left 200ms linear, top 200ms linear;
    pointer-events: none;
    user-select: none;
}


.progress-box {
    position: relative;
}


.progress-circle {
    display: grid;
    place-items: center;
    width: 15vw;
    aspect-ratio: 1;
    font-size: 3vw;
    border-radius: 50%;
    background: conic-gradient(gray, gray 10%, blue 0%);
    mask: radial-gradient(circle, transparent 60%, black 60%);
}


.progress-number {
    position: absolute;
    /* z-index: 10; */
    left: 50%;
    top: 50%;
    font-size: 4vw;
    translate: -50% -50%;
}

/*************************************/
/*     get-string-from-user-dialog    */
/*************************************/

.get-string-from-user-dialog {
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
}


.get-string-from-user-dialog h2 {
    margin-bottom: 0;
}

.get-string-from-user-dialog .string-input {
    width: 90%;
    margin-bottom: 2vw;
}


/*************************************/
/*          C O N S O L E            */
/*************************************/

.console-log {
    color: inherit;
}

.console-log-background {
    background-color: var(--white);
}

.console-log::before {
    content: '📝';
}

.console-info {
    color: var(--info);
}

.console-info-background {
    background-color: var(--info);
}

.console-info::before {
    content: 'ℹ️';
}

.console-warn {
    color: var(--warning);
}

.console-warn-background {
    background-color: var(--warning);
}

.console-warn::before {
    content: '⚠️';
}

.console-error {
    color: var(--invalid);
}

.console-error-background {
    background-color: var(--invalid);
}

.console-error::before {
    content: '⛔';
}


/*************************************/
/*          U T I L I T I E S        */
/*************************************/

.hidden {
    opacity: 0;
    visibility: hidden;
}

.display-none {
    display: none !important;
}

.no-pointer-events {
    pointer-events: none;
}

.no-pointer-cancel {
    touch-action: none;
}

img,
.agent,
.no-select {
    -webkit-touch-callout: none !important;
    /* Safari */
    -webkit-user-select: none !important;
    /* Safari */
    -moz-user-select: none !important;
    /* Old versions of Firefox */
    -ms-user-select: none !important;
    /* Internet Explorer/Edge */
    user-select: none !important;
    /* Non-prefixed version */
}

/* don't show for test */
#step,
#invite {
    display: none;
}

/* Disable some Google elements */
.punch-viewer-navbar-fixed,
a.ytp-youtube-button.ytp-button.yt-uix-sessionlink {
    display: none !important;
}

#sharing-enabled {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 2vh;
}

#sharing-available {
    display: none;
}

#select-language,
#select-gender {
    font-size: 36px;
    margin-right: 10px;
}


.language-select-speaker-button,
.language-select-speaker-button:hover {
    background-color: transparent;
    padding: 0;
    opacity: 0.3;
    height: 30px;
    cursor: pointer;
}

.language-select-speaker-button img {
    height: 100%;
}


/*************************************/
/*         Audio Editor              */
/*************************************/

#spectrum-container {
    aspect-ratio: 5;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
    background-color: #004400;
}

#timer-container {
    position: absolute;
    height: 40px;
    font-family: monospace;
    color: rgb(0, 128, 0);
}

#status-display {
    display: none;
    color: rgb(0, 128, 0);
    font-size: 0.8em;
    margin-top: 10px;
}

#audio-toolbar {
    padding-top: 10px;
    display: flex;
    gap: 10px;
}

#audio-toolbar button {
    background: transparent;
    width: 60px;
    height: 60px;
    background: transparent url('assets/icons/audio/play.svg') center center no-repeat;
}

#audio-toolbar button.record {
    background-image: url('assets/icons/audio/record.svg');
}

#audio-toolbar button.playing {
    background-image: url('assets/icons/audio/play.svg');
}

#audio-toolbar button.stop {
    background-image: url('assets/icons/audio/stop.svg');
}

#audio-toolbar button:disabled {
    opacity: 0.5;
}

#audio-countdown {
    display: none;
    position: absolute;
    background: rgba(100, 100, 100, 0.9);
    width: 60%;
    border-radius: 50%;
    margin-bottom: 100px;
    aspect-ratio: 1;
    color: white;
    border: 5px solid white;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
}

/*************************************/
/*         Media Queries             */
/*************************************/


@media (min-aspect-ratio: 1/1) {
    #tool-bar {
        display: none;
    }
}

.visible .project-proxy.status-connected-rtc {
    animation: pulse-blue 1s infinite;
    border-bottom: 3px solid aqua;
}

.visible .project-proxy.status-connected-websocket {
    animation: pulse-green 1s infinite;
    border-bottom: 3px solid green;
}

@keyframes pulse-blue {
    0% {
        border-bottom-color: #0099ff;
    }

    50% {
        border-bottom-color: transparent;
    }

    100% {
        border-bottom-color: #0099ff;
    }
}