:root {
    --bg-primary: #17120d;
}

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

html,
body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background:
        linear-gradient(180deg, rgba(23, 18, 13, 0.28), rgba(23, 18, 13, 0.94) 70%),
        url('assets/art/civilization-bg.webp') center top / cover fixed,
        var(--bg-primary);
    color: #eaeaea;
    -webkit-font-smoothing: antialiased;
}

#app {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

#app::before {
    content: '';
    position: fixed;
    inset: 0;
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(18, 14, 10, 0.56), rgba(18, 14, 10, 0.86));
    pointer-events: none;
}