/* /var/www/html/style.css */

/* =========================
RESET
========================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: radial-gradient(circle at top, #0f1a24, #05080c);
    color: #e6e6e6;
    overflow: hidden;
}

/* =========================
🔥 GAME LAYER (BAKGRUND)
========================= */
#app {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
}

/* 🔥 disable game clicks när editor OFF */
body:not(.editor-on) #app {
    pointer-events: none;
}

/* =========================
🔥 UI ROOT (blockera INTE editor)
========================= */
#leftPanel {
    position: fixed;
    inset: 0;
    z-index: 10000;

    pointer-events: none; /* 🔥 KRITISK FIX */
}

/* =========================
🔥 UI ELEMENT (clickable)
========================= */
#authWrapper,
.card,
#playerUI {
    pointer-events: auto;
}

/* =========================
AUTH WRAPPER
========================= */
#authWrapper {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    overflow-y: auto;
}

/* =========================
CARD
========================= */
.card {
    background: linear-gradient(180deg, #1a2430, #0a0e13);
    border: 1px solid rgba(201,163,74,0.5);

    padding: 36px;
    width: 420px;
    max-width: 95%;

    border-radius: 20px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    backdrop-filter: blur(14px);

    box-shadow:
        0 0 80px rgba(0,0,0,1),
        0 0 50px rgba(255,215,0,0.3),
        inset 0 0 20px rgba(255,215,0,0.08);

    animation: fadeIn 0.4s ease;

    max-height: 95vh;
    overflow-y: auto;
}

/* =========================
TITLE
========================= */
.card h2 {
    text-align: center;
    margin: 0 0 10px;
    font-size: 26px;
}

/* =========================
STATUS
========================= */
#statusBox {
    font-size: 13px;
    text-align: center;
    min-height: 20px;
    padding: 8px;
}

/* =========================
INPUT
========================= */
.inputGroup input,
#view-register input {
    width: 100%;
    padding: 16px;
    font-size: 16px;

    background: rgba(12,17,23,0.95);
    border: 1px solid #2a2f36;
    border-radius: 10px;

    color: #fff;
}

/* =========================
BUTTON
========================= */
.card button {
    width: 100%;
    padding: 16px;
    font-size: 16px;

    background: linear-gradient(90deg, #c9a34a, #ffd700);
    border: none;
    border-radius: 10px;

    cursor: pointer;
}

/* =========================
LINK
========================= */
.link {
    text-align: center;
    font-size: 14px;
    color: #ffd700;
    cursor: pointer;
}

/* =========================
🔥 EDITOR (VIKTIGAST)
========================= */

/* overlay får aldrig blockera */
#editorOverlay {
    pointer-events: none;
    z-index: 5000;
}

/* editor panel */
#editor-panel {
    z-index: 20000;
}

/* 🔥 ALLA OBJECT KLICKBARA */
.text-object,
.button-object,
.image-object,
.effect-object {
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* =========================
PLAYER UI
========================= */
#playerUI {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    pointer-events: auto;
}

/* =========================
MOBILE
========================= */
@media (max-width: 600px) {
    .card {
        width: 90%;
        padding: 24px;
    }
}

/* =========================
ANIMATIONS
========================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}