/* =========================================================
   Gyroxen UI settings v1
   ========================================================= */

.gx-ui-overlay {
    position: fixed;
    z-index: 5000;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    color: #eafcff;
    font-family: "Courier New", monospace;
    touch-action: none;
}

.gx-ui-overlay[hidden] { display: none !important; }

.gx-ui-shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 3, 8, .80);
    backdrop-filter: blur(5px);
}

.gx-ui-overlay.mode-display .gx-ui-shade,
.gx-ui-overlay.mode-controls .gx-ui-shade {
    background: rgba(0, 3, 8, .28);
    backdrop-filter: none;
    pointer-events: none;
}

.gx-ui-panel,
.gx-editor-toolbar,
.gx-tutorial-card {
    position: absolute;
    z-index: 4;
    border: 1px solid rgba(75, 232, 255, .62);
    background: linear-gradient(145deg, rgba(5, 20, 29, .97), rgba(19, 7, 20, .97));
    box-shadow: 0 0 36px rgba(40, 208, 255, .20);
}

.gx-ui-panel {
    left: 50%;
    top: 50%;
    width: min(480px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    transform: translate(-50%, -50%);
    padding: clamp(16px, 3vw, 26px);
    overflow: auto;
    touch-action: pan-y;
}

.gx-ui-panel h2,
.gx-editor-toolbar h2,
.gx-tutorial-card h2 {
    margin: 0;
    color: #67efff;
    line-height: 1.05;
    text-shadow: 0 0 15px rgba(70, 225, 255, .35);
}

.gx-ui-panel h2 {
    margin-bottom: 16px;
    font-size: clamp(22px, 5vw, 34px);
}

.gx-menu-actions {
    display: grid;
    gap: 9px;
}

.gx-ui-button,
.gx-editor-toolbar button,
.gx-tutorial-card button {
    min-height: 44px;
    border: 1px solid rgba(83, 231, 250, .56);
    border-radius: 4px;
    padding: 10px 14px;
    color: #eaffff;
    background: linear-gradient(180deg, rgba(23, 77, 91, .82), rgba(7, 26, 35, .94));
    font: 700 13px/1.25 "Courier New", monospace;
    cursor: pointer;
    touch-action: manipulation;
}

.gx-ui-button:hover,
.gx-ui-button:focus-visible,
.gx-editor-toolbar button:hover,
.gx-editor-toolbar button:focus-visible,
.gx-tutorial-card button:hover,
.gx-tutorial-card button:focus-visible {
    outline: none;
    border-color: #75f2ff;
    box-shadow: 0 0 16px rgba(70, 225, 255, .22);
}

.gx-ui-button.primary {
    border-color: rgba(91, 255, 156, .72);
    color: #d5ffe4;
}

.gx-ui-button.warning {
    border-color: rgba(255, 105, 139, .64);
    color: #ffd8e1;
}

.gx-ui-button .gx-button-state {
    color: #77f2ff;
}

.gx-editor-toolbar {
    left: 50%;
    top: calc(8px + var(--safe-top));
    width: min(980px, calc(100vw - 16px));
    transform: translateX(-50%);
    padding: 10px 12px;
}

.gx-editor-toolbar h2 {
    margin-bottom: 8px;
    font-size: 16px;
}

.gx-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.gx-toolbar-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    color: #c3e2e8;
    font-size: 12px;
}

.gx-toolbar-row input[type="range"] {
    width: min(330px, 48vw);
    accent-color: #56eaff;
    touch-action: pan-x;
}

.gx-toolbar-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #56eaff;
}

.gx-toolbar-spacer { flex: 1 1 auto; }

.gx-editor-help {
    margin: 7px 0 0;
    color: #8fb3bd;
    font-size: 10px;
    line-height: 1.35;
}

.gx-game-edit-frame,
.gx-control-edit-box {
    position: fixed;
    z-index: 3;
    border: 2px dashed rgba(91, 238, 255, .95);
    box-shadow:
        0 0 18px rgba(50, 224, 255, .28),
        inset 0 0 18px rgba(50, 224, 255, .06);
    pointer-events: auto;
    touch-action: none;
}

.gx-game-edit-frame::before,
.gx-control-edit-box::before {
    content: attr(data-label);
    position: absolute;
    left: -2px;
    bottom: 100%;
    max-width: 80vw;
    padding: 4px 7px;
    color: #041015;
    background: #63efff;
    font: 800 10px/1.2 "Courier New", monospace;
    white-space: nowrap;
}

.gx-control-edit-box.action-box {
    --gx-edit-color: #ff73d7;
    --gx-edit-glow: rgba(255, 80, 204, .26);
    border-color: var(--gx-edit-color);
    box-shadow:
        0 0 18px var(--gx-edit-glow),
        inset 0 0 18px rgba(255, 255, 255, .045);
}

.gx-control-edit-box.dash-box {
    --gx-edit-color: #ff73d7;
    --gx-edit-glow: rgba(255, 80, 204, .28);
}

.gx-control-edit-box.shoot-box {
    --gx-edit-color: #ffd45e;
    --gx-edit-glow: rgba(255, 204, 60, .27);
}

.gx-control-edit-box.jump-box {
    --gx-edit-color: #68f3ff;
    --gx-edit-glow: rgba(64, 224, 255, .28);
}

.gx-control-edit-box.action-box::before {
    background: var(--gx-edit-color);
}

.gx-control-edit-box {
    cursor: move;
}

.gx-resize-handle {
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2px solid #031017;
    border-radius: 50%;
    background: #6af1ff;
    box-shadow: 0 0 10px rgba(84, 232, 255, .8);
    touch-action: none;
}

.action-box .gx-resize-handle {
    background: var(--gx-edit-color);
    box-shadow: 0 0 10px var(--gx-edit-glow);
}

.gx-resize-handle[data-dir="n"]  { left: 50%; top: -9px; transform: translateX(-50%); cursor: ns-resize; }
.gx-resize-handle[data-dir="s"]  { left: 50%; bottom: -9px; transform: translateX(-50%); cursor: ns-resize; }
.gx-resize-handle[data-dir="e"]  { right: -9px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.gx-resize-handle[data-dir="w"]  { left: -9px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.gx-resize-handle[data-dir="ne"] { right: -9px; top: -9px; cursor: nesw-resize; }
.gx-resize-handle[data-dir="nw"] { left: -9px; top: -9px; cursor: nwse-resize; }
.gx-resize-handle[data-dir="se"] { right: -9px; bottom: -9px; cursor: nwse-resize; }
.gx-resize-handle[data-dir="sw"] { left: -9px; bottom: -9px; cursor: nesw-resize; }

.gx-game-edit-frame .gx-resize-handle[data-dir="n"],
.gx-game-edit-frame .gx-resize-handle[data-dir="s"],
.gx-game-edit-frame .gx-resize-handle[data-dir="e"],
.gx-game-edit-frame .gx-resize-handle[data-dir="w"] {
    display: none;
}

.gx-tutorial-card {
    left: 50%;
    top: 50%;
    width: min(560px, calc(100vw - 28px));
    transform: translate(-50%, -50%);
    padding: clamp(18px, 4vw, 30px);
}

.gx-tutorial-step {
    min-height: 150px;
}

.gx-tutorial-card h2 {
    margin-bottom: 13px;
    font-size: clamp(21px, 5vw, 32px);
}

.gx-tutorial-card p {
    margin: 0;
    color: #bad5dc;
    font-size: 13px;
    line-height: 1.55;
}

.gx-tutorial-visual {
    display: grid;
    place-items: center;
    min-height: 78px;
    margin: 14px 0;
    border: 1px dashed rgba(80, 232, 255, .42);
    color: #72efff;
    background: rgba(8, 29, 38, .62);
    font-size: 30px;
}

.gx-tutorial-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.gx-tutorial-progress {
    margin-top: 11px;
    color: #799da6;
    font-size: 10px;
    text-align: center;
}

body.gx-display-editing #game-viewport {
    box-shadow: 0 0 42px rgba(70, 231, 255, .35);
}

body.gx-ui-open #fullscreen-hint {
    display: none !important;
}

@media (max-height: 500px) and (orientation: landscape) {
    .gx-ui-panel {
        width: min(620px, calc(100vw - 18px));
        padding: 12px;
    }

    .gx-ui-panel h2 { margin-bottom: 9px; font-size: 20px; }
    .gx-menu-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .gx-ui-button { min-height: 38px; padding: 7px 9px; font-size: 11px; }

    .gx-editor-toolbar {
        left: calc(8px + var(--safe-left));
        right: calc(8px + var(--safe-right));
        top: calc(6px + var(--safe-top));
        width: auto;
        transform: none;
        padding: 7px 9px;
    }

    .gx-editor-toolbar h2 { display: none; }
    .gx-toolbar-row { gap: 5px 8px; }
    .gx-toolbar-row label { min-height: 32px; font-size: 10px; }
    .gx-editor-toolbar button { min-height: 32px; padding: 5px 8px; font-size: 10px; }
    .gx-editor-help { display: none; }

    .gx-tutorial-card {
        width: min(650px, calc(100vw - 18px));
        padding: 14px;
    }
    .gx-tutorial-step { min-height: 105px; }
    .gx-tutorial-card h2 { font-size: 19px; margin-bottom: 7px; }
    .gx-tutorial-card p { font-size: 11px; line-height: 1.4; }
    .gx-tutorial-visual { min-height: 48px; margin: 8px 0; font-size: 22px; }
    .gx-tutorial-actions { margin-top: 8px; }
}

/* =========================================================
   Gyroxen UI editor v1.2: separate pause and edit menus
   ========================================================= */

.gx-ui-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Muokkaustilassa näytetään taustalla varsinainen pelikuva, ei alku- tai loppuvalikkoa. */
body.gx-editor-active #start-menu,
body.gx-editor-active #end-menu {
    display: none !important;
}

/* Pause-valikko ei käynnisty eikä näy alkuvalikossa. */
.gx-ui-overlay.mode-pause .gx-ui-shade {
    background: rgba(0, 3, 8, .74);
}

.gx-ui-overlay.mode-editor .gx-ui-shade {
    background: rgba(0, 3, 8, .74);
}

.gx-ui-overlay.mode-display .gx-ui-shade,
.gx-ui-overlay.mode-controls .gx-ui-shade {
    background: rgba(0, 3, 8, .20);
}

#gx-pause-menu .gx-menu-actions,
#gx-editor-menu .gx-menu-actions {
    grid-template-columns: 1fr;
}

@media (max-height: 500px) and (orientation: landscape) {
    #gx-pause-menu .gx-menu-actions,
    #gx-editor-menu .gx-menu-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}