:root {
    --ws-gradient-top: #1e3c72;
    --ws-gradient-mid: #2a5298;
    --ws-gradient-bottom: #4776b9;
}

html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    background: linear-gradient(165deg, var(--ws-gradient-top) 0%, var(--ws-gradient-mid) 60%, var(--ws-gradient-bottom) 100%);
    background-attachment: fixed;
    padding-bottom: env(safe-area-inset-bottom);
}

.app-container {
    max-width: 640px;
}

.card {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.display-emoji {
    font-size: 4rem;
    line-height: 1.1;
}

.temp-display {
    font-size: clamp(3.25rem, 16vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat {
    height: 100%;
}

.hourly-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.hourly-item {
    min-width: 5.25rem;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.daily-row .daily-name {
    width: 3.5rem;
}