* {
    box-sizing: border-box;
}

:root {
    --vh: 1vh; /* Fallback for viewport height */
}

html,
body {
    margin: 0;
    padding: 0;
    background: #000000;
    width: 100%;
    height: 100%;
    position: static;
    overflow: hidden;
    font-family: 'Coolvetica', sans-serif;
}

body:has(.ios-scroll-overlay.active) {
    height: calc(100% + 150px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

html:has(.ios-scroll-overlay.active) {
    overflow: auto !important;
}

/* Невидимий блок у потоці, щоб body мав висоту для скролу (root і overlay — absolute) */
.ios-scroll-spacer {
    display: none;
}

body:has(.ios-scroll-overlay.active) .ios-scroll-spacer {
    display: block !important;
    height: calc(100vh + 150px);
    width: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* iPhone fullscreen: overlay поверх гри, приймає touch і дозволяє pan-y = скрол вікна */
.ios-scroll-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: none;
    pointer-events: none;
}

.ios-scroll-overlay.active {
    display: block !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    min-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
}

.ios-scroll-overlay.active.locked {
    pointer-events: none !important;
    z-index: -1 !important;
}

html.ios-fullscreen,
body.ios-fullscreen {
    position: static !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

/* top/left задаються з JS (visualViewport.offsetTop/offsetLeft), щоб гра не зміщувалась за межі екрану */
body.ios-fullscreen #root {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    box-sizing: border-box;
}

body.ios-fullscreen canvas {
    width: 100% !important;
    height: 100% !important;
}

#root {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}