/*

Custom style

You can override the default class or style here

This file will not be overwritten by the updater

*/

/* Mobile Controls Styles */
.game-iframe-container {
    position: relative !important;
}

.mobile-controls-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.mobile-controls-container.active {
    pointer-events: auto;
}

.mobile-controls-toggle {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #f1f5f9; /* Tailwind slate-100 to match Astro theme */
}

.mobile-controls-toggle input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
    accent-color: #8b5cf6; /* Tailwind violet-500 to match Astro theme */
}

.mobile-controls-toggle label {
    vertical-align: middle;
    cursor: pointer;
}

.virtual-joystick-base {
    z-index: 1001;
}

.virtual-joystick-stick {
    z-index: 1002;
}

.touch-button {
    z-index: 1001;
    cursor: pointer;
}

.virtual-joystick-base,
.touch-button {
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Virtual Mouse Cursor */
.virtual-mouse-cursor {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-3px, -3px); /* Align hotspot to top-left corner */
    will-change: left, top;
    transition: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0 L16,16 L10,16 L12,24 L8,22 L6,14 L0,8 Z" fill="white" stroke="black" stroke-width="1"/></svg>');
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

@media (max-width: 768px) {
    .virtual-joystick-base {
        width: 80px !important;
        height: 80px !important;
    }

    .touch-button {
        width: 60px !important;
        height: 40px !important;
    }
}