/* ========================================================
   CHEF'S RUSH: KITCHEN FRENZY - CORE DESIGN SYSTEM
   Curated palette, glassmorphism, responsive container, tactile juice.
======================================================== */

:root {
    /* Color Palette */
    --color-bg-deep: #12151E;
    --color-bg-surface: #1A1F2C;
    --color-bg-card: rgba(35, 43, 62, 0.85);
    --color-border-card: rgba(255, 255, 255, 0.12);

    --color-primary: #FF5E36;      /* Energetic Coral Flame */
    --color-primary-hover: #FF7552;
    --color-primary-glow: rgba(255, 94, 54, 0.4);

    --color-gold: #FFD166;         /* Coins & Gold Badges */
    --color-gold-glow: rgba(255, 209, 102, 0.5);

    --color-mint: #2EC4B6;         /* Fresh Success Mint */
    --color-mint-glow: rgba(46, 196, 182, 0.4);

    --color-crimson: #E63946;      /* Urgency & Burnt Alarm */
    --color-crimson-glow: rgba(230, 57, 70, 0.4);

    --color-text-main: #FFFFFF;
    --color-text-muted: #A0AABF;
    --color-text-dark: #1E232F;

    /* Elevation & Shadows */
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--color-primary-glow);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Fonts */
    --font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

html, body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
    background: var(--color-bg-deep);
    font-family: var(--font-family);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ambient Radial Lighting Behind Game Container */
body::before {
    content: '';
    position: absolute;
    width: 120vw;
    height: 120vh;
    background: radial-gradient(circle at 50% 40%, rgba(255, 94, 54, 0.12) 0%, rgba(46, 196, 182, 0.08) 45%, transparent 70%);
    pointer-events: none;
}

/* Responsive Adaptive Viewport Container (Desktop / Tablet / Mobile) */
#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 960px;
    max-height: 640px;
    background: linear-gradient(180deg, #1C2232 0%, #131722 100%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


@media (max-width: 960px), (max-height: 640px) {
    #game-container {
        border-radius: 0;
        max-width: 100vw;
        max-height: 100dvh;
        width: 100vw;
        height: 100dvh;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/* ========================================================
   TACTILE BUTTON SYSTEM (NORMAL, HOVER, PRESSED, DISABLED)
======================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    outline: none;
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), var(--shadow-soft);
}

.btn:hover {
    transform: translateY(-2px) scale(1.02);
}

.btn:active {
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.btn:disabled, .btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.8);
    transform: none !important;
    box-shadow: none !important;
}

/* Button Color Variants */
.btn-primary {
    background: linear-gradient(180deg, #FF7552 0%, #FF5E36 100%);
    color: #FFF;
    border-bottom: 3px solid #D63E17;
}

.btn-primary:hover {
    box-shadow: 0 8px 20px var(--color-primary-glow), 0 6px 0 #D63E17;
}

.btn-gold {
    background: linear-gradient(180deg, #FFE082 0%, #FFD166 100%);
    color: #4A3300;
    border-bottom: 3px solid #CCA033;
}

.btn-gold:hover {
    box-shadow: 0 8px 20px var(--color-gold-glow), 0 6px 0 #CCA033;
}

.btn-mint {
    background: linear-gradient(180deg, #4EE2D5 0%, #2EC4B6 100%);
    color: #033E39;
    border-bottom: 3px solid #1E9488;
}

.btn-mint:hover {
    box-shadow: 0 8px 20px var(--color-mint-glow), 0 6px 0 #1E9488;
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Icon size defaults */
.icon-svg {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
}