:root {
        --c-primary: #eab308;
        --c-primary-light: #facc15;
        --c-primary-dark: #ca8a04;
        --c-btn-text: #1a1000;
        --c-success: #22c55e;
        --c-success-light: #4ade80;
        --c-success-dark: #16a34a;
        --c-danger: #f87171;
        --c-danger-light: #fca5a5;
        --c-danger-dark: #ef4444;
        --c-nav-bg: #0c1322;
        --c-nav-text: #e2e8f0;
        --c-page-bg: #0f172a;
        --c-surface: #1e293b;
        --c-surface-alt: #162032;
        --c-input-bg: #0f1d2e;
        --c-control-bg: #182235;
        --c-text: #e2e8f0;
        --c-text-muted: #94a3b8;
        --c-border: #2d3f55;
        --c-border-hover: #475569;
        --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
        --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
        --radius: 6px;
        --radius-lg: 10px;
        --radius-xl: 14px;
        --transition: 0.15s ease;
        --c-thumb-grid-bg: #0c1322;
        --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body {
        font-family: var(--font-sans);
        font-size: 14px;
        color: var(--c-text);
        background: var(--c-page-bg);
        min-height: 100vh;
}

table {
        border-spacing: 8px;
}

button {
        min-width: min(13vw, 7em);
}

#header button {
        margin: 0;
        font-size: 0.85em;
        padding: 6px 14px;
}

#header button:not(.important):not(.danger) {
        background-color: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.18);
        color: var(--c-nav-text, #f1f5f9);
}

#header button:not(.important):not(.danger):hover {
        background-color: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.30);
}

#header button:not(.important):not(.danger):active {
        background-color: rgba(255, 255, 255, 0.08);
}

#toolbar button {
        margin: 1px;
}

button.button--normal-size {
        min-width: initial;
}

button.close-button {
        min-width: initial;
        position: absolute;
        top: 8px;
        right: 8px;
}

button a {
        display: inline-block;
        width: 100%;
        color: inherit;
        text-decoration: none;
}

br.wide+* {
        margin-top: 1vh;
}

br.narrow+* {
        margin-top: 0.5vh;
}

input[type=number] {
        width: 6em;
}

#main-container {
        max-width: 100%;
}

#header {
        background-color: var(--c-nav-bg, #1e293b);
        border-radius: var(--radius-lg, 10px);
        border: none;
        margin: 0.5vw;
        padding: 0.6vw 1.2vw;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
        display: flex;
        align-items: center;
        gap: 6px;
}

#header__caption {
        position: relative;
        margin-left: auto;
        padding: 4px 4px 4px 2em;
        color: var(--c-nav-text, #f1f5f9);
        font-weight: 700;
        background-size: auto 100%;
        background-repeat: no-repeat;
        letter-spacing: 0.04em;
        font-size: 0.95em;
        opacity: 0.92;
}

#header__caption img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
}

#workarea-container {
        display: flex;
        flex-wrap: wrap;
}

#toolbar {
        flex-grow: 1;
        flex-basis: 9%;
        background-color: var(--c-surface, #1e293b);
        border-radius: var(--radius-lg, 10px);
        border: 1px solid var(--c-border, #2d3f55);
        margin: 0.5vw;
        padding-top: 0.5vw;
        padding-bottom: 1px;
        box-shadow: var(--shadow-card);
}

.toolbar-group {
        display: inline-block;
        margin: 0.5vw;
        padding: 0 1vw 0.75vw 1vw;
        border-bottom: 1px solid var(--c-border, #d0d4e0);
}

.toolbar-group__checkboxes {
        display: inline-block;
        letter-spacing: 1vw;
}

.checkbox-wrapper {
        display: inline-block;
        min-width: 10vw;
        margin: 5px 1px 5px 1px;
        letter-spacing: initial;
}

.toolbar-group__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
}

.toolbar-group__buttons button {
        flex-grow: 1;
}

#show-colors-button {
        min-width: 0;
        color: transparent;
        background-image: linear-gradient(#cc2200 0%, #cc2200 15%, #1a7a1a 40%, #1a7a1a 60%, #0077cc 80%, #0077cc 100%);
        border-color: transparent;
}

#show-colors-button:active, #show-colors-button:hover {
        background-image: none;
}

.join-buttons-div {
        display: inline-block;
        white-space: nowrap;
}

.toolbar-group select {
        min-width: 13vw;
        max-width: 10em;
        margin: 1px;
        text-overflow: ellipsis;
}

.group-header {
        display: inline-block;
        min-width: 9vw;
        color: var(--c-primary-dark, #005fa3);
}

.toolbar-group .group-header {
        display: block;
        padding: 8px 0 7px 10px;
        font-size: 0.68em;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--c-text-muted, #64748b);
        /* border-left: 3px solid var(--c-primary, #2563eb); */
        margin-bottom: 4px;
}

#editor-container {
        flex-grow: 7;
        overflow-x: hidden;
        background-color: var(--c-surface, #1e293b);
        border-radius: var(--radius-lg, 10px);
        border: 1px solid var(--c-border, #2d3f55);
        box-shadow: var(--shadow-card);
        margin: 0.5vw;
}

#gamepad-container {
        text-align: center;
        overflow-x: auto;
        border-bottom: 1px solid var(--c-border, #d0d4e0);
        margin-left: 0.5vw;
        margin-right: 0.5vw;
}

#gamepad-container__scroll-frame {
        display: inline-block;
        padding: 1vw 0.5vw 1vw 0.5vw;
}

#screenpad {
        background-color: #888e9e;
        position: relative;
        width: 874px;
        height: 402px;
        padding: 0;
        border-radius: 6px;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.14);
}

#screenpad.scheme-1, #screenpad.scheme-2 {
        background-color: #000;
}

.screenpad-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
}

.hide-offscreen {
        overflow: hidden;
}

.show-offscreen {
        overflow: visible;
        margin: 100px;
}

.selection-box {
        position: absolute;
        background-color: rgba(0, 119, 204, 0.15);
        z-index: 1;
        box-sizing: border-box;
        border: 1px solid rgba(0, 119, 204, 0.6);
        display: none;
}

.rect {
        position: absolute;
        background-size: 100% 100%;
        text-align: center;
        cursor: grab;
        text-shadow: 1px 1px #aac;
        -webkit-user-select: none;
        user-select: none;
}

#screenpad.scheme-1 .rect {
        color: #69e;
        text-shadow: 1px 1px #034;
}

#screenpad.scheme-2 .rect {
        color: #6e9;
        text-shadow: 1px 1px #043;
}

.rect.selected {
        background-color: rgba(0, 119, 204, 0.25);
        box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.5);
        overflow: visible;
}

.resize-handle {
        position: absolute;
        width: 8px;
        height: 8px;
        background: white;
        border: 2px solid rgba(0, 119, 204, 0.9);
        border-radius: 2px;
        box-sizing: border-box;
        z-index: 20;
        pointer-events: all;
}

.resize-handle--nw { top: -4px; left: -4px; cursor: nw-resize; }
.resize-handle--n  { top: -4px; left: calc(50% - 4px); cursor: n-resize; }
.resize-handle--ne { top: -4px; right: -4px; cursor: ne-resize; }
.resize-handle--e  { top: calc(50% - 4px); right: -4px; cursor: e-resize; }
.resize-handle--se { bottom: -4px; right: -4px; cursor: se-resize; }
.resize-handle--s  { bottom: -4px; left: calc(50% - 4px); cursor: s-resize; }
.resize-handle--sw { bottom: -4px; left: -4px; cursor: sw-resize; }
.resize-handle--w  { top: calc(50% - 4px); left: -4px; cursor: w-resize; }

#screenpad.scheme-1 .rect.selected, #screenpad.scheme-2 .rect.selected {
        background-color: rgba(0, 160, 220, 0.3);
        box-shadow: 0 0 0 2px rgba(0, 160, 220, 0.5);
}

.show-borders .rect:after {
        content: '';
        border: 2px solid rgba(220, 38, 38, 0.85);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        background-color: rgba(220, 38, 38, 0.07);
}

#screenpad.scheme-1.show-borders .rect:after {
        border-color: rgba(220, 38, 38, 0.85);
}

#screenpad.scheme-2.show-borders .rect:after {
        border-color: rgba(220, 38, 38, 0.85);
}

.show-borders .rect.radial:after {
        border-radius: 50%;
}

.show-borders .rect div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        pointer-events: none;
        background-color: none;
}

.hide-names .rect, #screenpad.scheme-1.hide-names .rect, #screenpad.scheme-2.hide-names .rect {
        color: transparent;
        font-size: 1px;
        text-shadow: none;
}

#game-screenshot {
        position: absolute;
        background-color: #aac;
        width: 600px;
        height: 338px;
        top: 32px;
        left: 137px;
        background-size: 100% 100%;
}

#screenpad.scheme-1 #game-screenshot, #screenpad.scheme-2 #game-screenshot {
        background-color: #667;
}

.hide-offscreen #game-screenshot {
        overflow: hidden;
}

.show-offscreen #game-screenshot {
        overflow: visible;
}

#editor {
        background-color: var(--c-surface, #fff);
        border-radius: var(--radius-lg, 8px);
        padding: 8px 1vw;
        white-space: nowrap;
        overflow-x: hidden;
        overflow-y: visible;
}

#editor * {
        box-sizing: border-box;
}

#editor>div {
        padding-top: 4px;
        padding-bottom: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
}

#editor span {
        width: 4%;
        text-align: center;
        overflow-x: hidden;
        padding-top: 0.4vw;
        padding-bottom: 0.4vw;
        margin: 0;
        color: var(--c-text-muted, #58627a);
        font-weight: 600;
        font-size: 0.8em;
}

#editor input[type=range] {
        width: 70%;
}

#editor input[type=number] {
        width: 16%;
        margin-left: 1%;
        margin-right: 1%;
}

#editor button {
        min-width: 0;
        width: 7%;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 0.75em;
}

.editor-btn-spacer {
        min-width: 0;
        width: 7%;
        flex-shrink: 0;
        display: inline-block;
}

#fill-screen-button {
        width: auto;
        margin-left: auto;
        font-size: 0.75em;
}

.dialog-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.45);
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 100;
}

.modal-dialog {
        background-color: var(--c-surface, #fff);
        border-radius: var(--radius-xl, 14px);
        max-height: 100%;
        min-width: 250px;
        max-width: 500px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        box-shadow: var(--shadow-modal);
}

.modal-dialog__header-box {
        position: relative;
        padding: 14px 48px 14px 20px;
        background-color: var(--c-primary-dark, #005fa3);
        color: white;
        font-weight: 600;
        letter-spacing: 0.02em;
}

.modal-dialog__header-box .close-button {
        background-color: transparent;
        border-color: transparent;
        opacity: 0.7;
        transition: opacity var(--transition, 0.15s ease);
}

.modal-dialog__header-box .close-button:hover {
        background-color: rgba(255, 255, 255, 0.15);
        opacity: 1;
}

.modal-dialog__header-box .close-button:active {
        background-color: rgba(255, 255, 255, 0.25);
}

.modal-dialog__content-box {
        padding: 2vh 3vw 2vh 3vw;
        position: relative;
}

.dialog-content-box__section:not(:last-child) {
        padding-bottom: 3vh;
}

.dialog-content-box__expandable {
        padding-top: 1vh;
}

.modal-dialog__content-box input[type=number] {
        min-width: 90px;
}

.modal-dialog__footer-box {
        padding: 10px 20px;
        overflow: hidden;
        border-top: 1px solid var(--c-border, #cbd5e1);
        background-color: var(--c-surface-alt, #f8fafc);
        border-radius: 0 0 var(--radius-xl, 14px) var(--radius-xl, 14px);
}

.modal-dialog__footer-box button {
        float: right;
        min-width: 30%;
        padding-left: 6px;
        padding-right: 6px;
        margin: 3px 2px 3px 6px;
}

.modal-dialog table {
        margin: -1vw;
}

#button-properties-table td {
        white-space: nowrap;
}

#button-properties-table input, #button-properties-table select {
        width: 85%;
        box-sizing: border-box;
}

#button-properties-table select.miniselect {
        width: 2em;
        overflow: hidden;
        min-width: 2em;
        color: transparent;
        background-position: center center;
        padding-right: 2em;
}

#button-properties-table textarea {
        width: 85%;
        box-sizing: border-box;
        margin-top: 6px;
}

#button-properties-table .vertical-align-top {
        vertical-align: top;
        padding-top: 6px;
}

#overlay-create-dialog textarea {
        box-sizing: border-box;
        width: 100%;
        height: 9em;
}

#cfg-viewer-textarea {
        box-sizing: border-box;
        width: 100%;
        height: 60vh;
        font-family: monospace;
        font-size: 12px;
        resize: vertical;
        white-space: pre;
}


#button-image-upload-wrapper {
        width: auto;
        display: block;
        margin-top: 5px;
}

#button-image-upload-wrapper label {
        width: auto;
        max-width: none;
        font-size: 0.8em;
        padding: 3px 10px;
}

#image-name {
        padding-right: 1em;
        background-size: auto 150%;
        background-repeat: no-repeat;
        background-position: right center;
}

#footer {
        position: relative;
        display: flex;
        justify-content: center;
        border-radius: var(--radius-lg, 10px);
        border: 1px solid var(--c-border, #2d3f55);
        background-color: var(--c-surface, #1e293b);
        margin: 0.5vw;
        box-shadow: var(--shadow-card);
}

#footer a {
        font-size: 0.85em;
        padding: 1vw;
        color: var(--c-primary, #0077cc);
        text-decoration: none;
        font-weight: 500;
        transition: color var(--transition, 0.15s ease);
}

#footer a:hover {
        color: var(--c-primary-dark, #005fa3);
}

#version {
        position: absolute;
        top: 1vw;
        right: 1vw;
        font-size: 0.8em;
        color: var(--c-border-hover, #9aa0b8);
}

#aspect-hint {
        color: var(--c-border-hover, #9aa0b8);
}

#aspect-hint-image {
        max-width: 100%;
        max-height: 50vh;
}

.aspect-hint-text-container {
        overflow: hidden;
}

.aspect-hint-text-container span {
        min-width: 36%;
        text-align: center;
        float: right;
}

#color-scheme-0-label {
        color: #000;
        text-shadow: 1px 1px #aac;
        background-color: #999;
        padding: 2px 8px;
        border-radius: var(--radius, 5px);
}

#color-scheme-1-label {
        color: #69e;
        text-shadow: 1px 1px #034;
        background-color: black;
        padding: 2px 8px;
        border-radius: var(--radius, 5px);
}

#color-scheme-2-label {
        color: #6e9;
        text-shadow: 1px 1px #043;
        background-color: black;
        padding: 2px 8px;
        border-radius: var(--radius, 5px);
}

.small-warning {
        font-size: 0.7em;
        color: var(--c-danger, #cc2200);
}

.hidden {
        display: none;
}

.toolbar-mod-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 4px 0;
}

.toolbar-mod-row label {
        flex: 1;
        font-size: 0.85em;
        color: var(--c-text-muted, #64748b);
        white-space: nowrap;
}

.toolbar-mod-row input[type=number] {
        width: 5.5em;
        flex-shrink: 0;
}

#image-thumbnail-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        max-height: 220px;
        overflow-y: auto;
        padding: 6px;
        background-color: var(--c-thumb-grid-bg, #3a3f4a);
        border-radius: 4px;
        margin-top: 4px;
}

.image-thumb {
        width: 40px;
        height: 40px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 4px;
        flex-shrink: 0;
        box-sizing: border-box;
}

.image-thumb:hover {
        border-color: var(--c-primary, #1a73e8);
        background-color: rgba(255, 255, 255, 0.12);
}

.image-thumb--selected {
        border-color: var(--c-primary, #1a73e8);
        background-color: rgba(26, 115, 232, 0.35);
}