/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

:root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
}

html,
body {
    overscroll-behavior-x: none;
}

body {
    -webkit-touch-callout: none;
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;
    /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;
    /* prevent copy paste, to allow, change 'none' to 'text' */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 12px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f3fb;
}

canvas {
    width: 100%;
    height: 100%;
}

#loader-screen {
    height: 100%;
    width: 100%;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: url('../boot/loading_screen.jpg') no-repeat center;
    background-size: cover;
    pointer-events: all;
}

#loader-screen[hidden] {
    display: none !important;
}

#loader-ui {
    position: absolute;
    left: 50%;
    /* 80px from a 720px reference height => 80/720 = 11.111111% of viewport height */
    bottom: calc(10vh + var(--safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(600px, calc(100vw - 24px));
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1000 / 220;
    background: url('../boot/progress_paper.png') no-repeat center;
    background-size: 100% 100%;
    filter: drop-shadow(0 0px 32px rgba(0, 0, 0, 1));
}

#loader-ui-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

#loader-progress {
    /* Progress bar is sized relative to the paper underlay */
    width: 50%;
    position: absolute;
    left: 50%;
    bottom: 25%;
    transform: translateX(-50%);
    aspect-ratio: 443 / 46;
    height: auto;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
    padding: 0 6px;
    background: url('../boot/progress_bar.png') no-repeat center;
    background-size: 100% 100%;
    background-origin: border-box;
}

#loader-progress-fill {
    width: 0%;
    height: 100%;
    background: url('../boot/progress_bar_fill.png') no-repeat left center;
    background-size: auto 74%;
    transition: width 120ms linear;
}

#loader-label {
    width: 50%;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 20px;
    color: rgba(40, 26, 16, 0.92);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}