/* base.css - Core styles, variables, resets, and fonts */
/* Google Font for retro pixelated style */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* CSS variables for consistent theming */
:root {
    /* Updated color palette from original styles.css */
    --main-gold: #ffc825; /* Slightly warmer gold */
    --dark-bg: #121215; /* Deeper, slightly blue-tinted black */
    --light-text: #f0f0f0;
    --dark-ui: #1e1e24; /* Slightly lighter than bg, blue tint */
    --grey-border: #555;

    /* PHASE 2: Thematic Variables */
    --ui-border-image: url('/assets/ui/stone-border-9slice.png');

    /* PHASE 1: Animation timing variables */
    --button-transition: 0.1s ease;
    --shake-intensity: 5px;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevent body scrolling */
}

/* General body styling */
body {
    background-color: var(--dark-bg);
    color: var(--light-text);
    font-family: 'Press Start 2P', cursive;
    display: flex;
    justify-content: center; /* Center the game wrapper */
    align-items: flex-start; /* Align to top */
    padding: 5px;
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation; /* Disable double-tap to zoom */
}

h1 {
    font-size: clamp(2rem, 8vw, 3rem);
}

h2 {
    text-align: center;
    color: var(--main-gold);
    text-shadow: 2px 2px 4px #000;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: clamp(13px, 2.6vmin, 1.1rem);
}

/* Loading Spinner */
.loading-spinner {
    font-size: 2rem;
    animation: spin 1s linear infinite;
}

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