:root {
    color-scheme: dark;
}

[x-cloak] {
    display: none !important;
}

body {
    background: #241815;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* Prevent horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.wood-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(120deg, rgba(93, 64, 55, 0.92), rgba(35, 24, 21, 0.94)),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 0,
            rgba(255, 255, 255, 0.02) 16px,
            rgba(0, 0, 0, 0.08) 34px,
            rgba(255, 255, 255, 0.025) 56px
        );
}

.wood-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(211, 47, 47, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.38));
}

.glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(33, 24, 22, 0.58);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

.ticket-display {
    font-size: clamp(7rem, 22vw, 16rem);
    font-weight: 950;
    line-height: 0.88;
    color: #ffffff;
    text-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

.onboarding-art {
    background:
        linear-gradient(145deg, rgba(211, 47, 47, 0.72), rgba(93, 64, 55, 0.92)),
        repeating-linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.12) 0,
            rgba(255, 255, 255, 0.04) 18px,
            rgba(0, 0, 0, 0.14) 38px,
            rgba(255, 255, 255, 0.04) 62px
        );
}

.booking-guide-video {
    display: grid;
    place-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #111827;
}

.booking-guide-video img {
    aspect-ratio: 16 / 9;
    max-height: min(50vh, 420px);
    object-fit: contain;
    width: 100%;
}

.queue-next-ticket {
    min-height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(211, 47, 47, 0.18), rgba(255, 255, 255, 0.06)),
        rgba(0, 0, 0, 0.22);
    padding: 0.75rem;
    text-align: center;
}

input,
select,
textarea {
    color-scheme: dark;
    font-size: 16px; /* Prevent iOS zoom on focus */
}

option {
    background: #2d211f;
    color: #ffffff;
}

.booking-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.camera-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 280px;
    overflow: hidden;
    background: #0f1418;
}

.camera-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-frame {
    pointer-events: none;
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
}

.camera-frame span {
    position: absolute;
    width: 38px;
    height: 38px;
    border-color: #ffffff;
}

.camera-frame span:nth-child(1) {
    top: -1px;
    left: -1px;
    border-top: 4px solid;
    border-left: 4px solid;
}

.camera-frame span:nth-child(2) {
    top: -1px;
    right: -1px;
    border-top: 4px solid;
    border-right: 4px solid;
}

.camera-frame span:nth-child(3) {
    right: -1px;
    bottom: -1px;
    border-right: 4px solid;
    border-bottom: 4px solid;
}

.camera-frame span:nth-child(4) {
    bottom: -1px;
    left: -1px;
    border-bottom: 4px solid;
    border-left: 4px solid;
}

.camera-status {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.64);
    padding: 0.75rem;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Mobile-first responsive adjustments */
@media (max-width: 640px) {
    .camera-stage {
        aspect-ratio: 3 / 4;
        min-height: 320px;
    }

    .camera-frame {
        inset: 14%;
    }

    .camera-frame span {
        width: 28px;
        height: 28px;
    }

    .queue-next-ticket {
        min-height: 72px;
        padding: 0.625rem;
    }

    /* Ensure tables scroll horizontally */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    thead, tbody, tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    /* Better touch targets */
    button, a, select {
        min-height: 44px;
    }

    /* Adjust glass panel padding on mobile */
    .glass-panel {
        border-radius: 6px;
    }
}

/* Fix for very small screens */
@media (max-width: 380px) {
    .camera-stage {
        min-height: 260px;
    }

    .queue-next-ticket {
        min-height: 64px;
    }
}

/* Safe area for notch devices */
@supports (padding: env(safe-area-inset-bottom)) {
    #installBar {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
}