* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --app-base-width: 1920;
    --app-base-height: 1080;
    --app-scale: 1;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: #0a0a0a;
    background-image: url('../images/site-items/bg-image.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
}

#app {
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
}

body.mobile-view #app {
    justify-content: flex-start;
    padding: 0;
}

.app-stage {
    width: 1920px;
    transform: scale(var(--app-scale));
    transform-origin: top center;
}

.global-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, rgba(20, 22, 28, 0.9), rgba(7, 7, 10, 0.95));
    color: #f7f7f8;
    z-index: 9999;
    gap: 12px;
    text-align: center;
    backdrop-filter: blur(4px);
}

.global-loader-spin {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(from 180deg, #ff4d4f, #ff9b4d, #ffd24d, #ff4d4f);
    mask: radial-gradient(circle 52% at 50% 50%, transparent 65%, black 66%);
    animation: spin 1s linear infinite, pulse 1.4s ease-in-out infinite;
    box-shadow: 0 12px 42px rgba(0, 0, 0, 0.35);
}

.global-loader-spin::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 60%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(0.98); }
    50% { transform: scale(1.03); }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Explicit dimensions for images to prevent CLS */
.bg-image {
    width: 1920px;
    height: 1080px;
}

.gender-icon,
.toggle-icon-left,
.toggle-icon-right,
.display-roll,
.relationship-slider-knob img,
.nccs-slider-knob img,
.zone-roll-img,
.town-roll-img {
    width: auto;
    height: auto;
}

.noscript-notice {
    padding: 2rem;
    text-align: center;
    background: #1a1a1a;
    color: white;
    min-height: 100vh;
}

.noscript-notice h2 {
    margin-bottom: 1rem;
}

.noscript-notice p {
    margin-bottom: 1rem;
}

.app-error {
    padding: 2rem;
    text-align: center;
    background: #1a1a1a;
    color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.app-error h2 {
    margin-bottom: 1rem;
}

.u-hidden {
    display: none !important;
}

.u-display-flex {
    display: flex !important;
}

.u-display-block {
    display: block !important;
}

.u-display-inline-block {
    display: inline-block !important;
}

.u-display-inline {
    display: inline !important;
}

.u-display-grid {
    display: grid !important;
}

/* Print styles */
@media print {
    .global-loader,
    .screenshot-download-btn {
        display: none !important;
    }
}