/* HUD Layout editor (launcher) */
.hudedit-root {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: #0b0b0b;
    color: #fff;
    font-family: system-ui, Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.hudedit-top, .hudedit-bottom {
    position: absolute;
    left: 0; right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
    flex: 0 0 auto;
    min-height: 44px;
    box-sizing: border-box;
}
.hudedit-top { top: 0; background: rgba(20, 20, 20, 0.92); }
.hudedit-bottom { bottom: 0; border-bottom: 0; border-top: 1px solid #2a2a2a; background: rgba(20, 20, 20, 0.92); }

.hudedit-title { font-weight: bold; letter-spacing: 2px; font-size: 14px; }
.hudedit-status { flex: 1; font-size: 12px; text-align: center; color: #9be79b; }
.hudedit-selname { font-weight: bold; font-size: 13px; min-width: 120px; }

.hudedit-root .hudedit-btn {
    background: #1c1c1c;
    color: #fff;
    border: 1px solid #333;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    width: auto;
    transition: none;
    text-transform: none;
    letter-spacing: 0;
}
.hudedit-root .hudedit-btn:hover { background: #2a2a2a; }
.hudedit-root .hudedit-btn:disabled { opacity: .4; cursor: default; }
.hudedit-root .hudedit-btn.off { border-color: #e6c300; color: #e6c300; }
.hudedit-root .hudedit-save { background: #2b6e2b; border-color: #3a8f3a; }
.hudedit-root .hudedit-save:hover { background: #358535; }

.hudedit-size { display: flex; align-items: center; gap: 6px; font-size: 12px; flex: 1; }
.hudedit-size input { flex: 1; max-width: 260px; }

/* palco = tela do jogo */
.hudedit-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px,
        #1e1e1e;
}

.hudedit-item {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    cursor: grab;
    touch-action: none;
}
.hudedit-item.round { border-radius: 50%; }
.hudedit-item span {
    position: absolute;
    left: 0; right: 0; bottom: -16px;
    text-align: center;
    font-size: 10px;
    color: #ccc;
    text-shadow: 0 0 2px #000;
    pointer-events: none;
    white-space: nowrap;
}
.hudedit-item img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}
.hudedit-item.round img { border-radius: 50%; }

.hudedit-item.kind-ghost { border-style: dashed; background: rgba(255, 255, 255, 0.08); }
.hudedit-item.kind-zone {
    border: 2px dashed rgba(255, 80, 80, 0.8);
    background: rgba(255, 60, 60, 0.12);
    border-radius: 12px;
}
.hudedit-item.kind-zone span { position: static; font-size: 14px; color: #ff8a8a; }
.hudedit-item.kind-joy { border-radius: 50%; }
.hudedit-knob {
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

/* Wheel preview no editor */
.hudedit-item.kind-wheel {
    border: 2px dashed rgba(255, 255, 255, 0.6);
    background: rgba(15, 18, 24, 0.6);
    border-radius: 50%;
}

.hudedit-wheel-preview {
    position: relative;
    width: 100%;
    height: 100%;
}

.hudedit-wheel-trash {
    position: absolute;
    left: -20px;
    bottom: -20px;
    width: 44px !important;
    height: 44px !important;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
}

.hudedit-item.selected { border-color: #4da3ff; box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.35); }

/* desligado */
.hudedit-item.mh-off {
    opacity: 0.35;
    border: 2px dashed #e6c300 !important;
    background: rgba(230, 195, 0, 0.08);
}
.hudedit-item.mh-off img { opacity: 0.4; }