@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    --color-sky: #87CEEB;
    --color-sky-deep: #3BA8E0;
    --color-water: #2196F3;
    --color-water-light: #64B5F6;
    --color-water-pale: #E3F2FD;
    --color-water-dark: #1565C0;
    --color-water-fill: rgba(30, 136, 229, 0.8);
    --color-grass: #66BB6A;
    --color-grass-dark: #2E7D32;
    --color-grass-light: #A5D6A7;
    --color-earth-dry: #A1887F;
    --color-sun: #FFD54F;
    --color-accent-orange: #FF8F00;
    --color-accent-warm: #FF7043;
    --color-accent-pink: #EC407A;
    --color-accent-teal: #00ACC1;
    --color-white: #FFFFFF;
    --color-bg-panel: rgba(255, 255, 255, 0.94);
    --color-text-dark: #1A237E;
    --color-text-medium: #37474F;
    --color-text-light: #78909C;
    --color-pipe: #90A4AE;
    --color-pipe-dark: #546E7A;

    --font-heading: 'Fredoka One', cursive;
    --font-body: 'Nunito', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.14);
    --shadow-lg: 0 14px 42px rgba(0, 0, 0, 0.18);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.24);

    --transition-fast: 0.15s ease;
    --transition-medium: 0.35s ease;
    --transition-slow: 0.6s ease;

    --tile-size: clamp(68px, 13cqw, 96px);
    --tile-gap: clamp(6px, 1.2cqw, 12px);
    --board-padding: clamp(14px, 2.5cqw, 24px);
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(160deg, #0d2b5a 0%, #1a4a8a 50%, #0d3320 100%);
    container-type: size;
}

.scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
    z-index: 10;
}

.scene--active {
    opacity: 1;
    pointer-events: all;
}

.scene--fade-out {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s ease !important;
}

.scene--fade-in {
    animation: sceneFadeIn 0.6s ease forwards;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
    user-select: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.btn:active {
    transform: translateY(1px) scale(0.97);
}

.btn--play {
    background: linear-gradient(135deg, #FF8F00, #E65100);
    color: white;
    font-size: clamp(1.3rem, 3cqw, 1.8rem);
    padding: 18px 52px;
    box-shadow: 0 8px 28px rgba(230, 81, 0, 0.5);
    letter-spacing: 1px;
}

.btn--play:hover {
    box-shadow: 0 12px 38px rgba(230, 81, 0, 0.6);
}

.btn--primary {
    background: linear-gradient(135deg, #1E88E5, #1565C0);
    color: white;
    box-shadow: 0 4px 18px rgba(33, 150, 243, 0.4);
}

.btn--secondary {
    background: linear-gradient(135deg, #43A047, #2E7D32);
    color: white;
    box-shadow: 0 4px 18px rgba(67, 160, 71, 0.4);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.28);
}

.hidden {
    display: none !important;
}

.visually-hidden {
    opacity: 0;
    pointer-events: none;
}

#water-particles-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

#company-logo-overlay {
    position: fixed;
    top: 2.5vh;
    right: 3vw;
    z-index: 200;
    pointer-events: none;
}

#company-logo-overlay img {
    width: 190px;
    height: 44px;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}