/* BRAND-004 WebGL template.

   Supersedes BRAND-001 (TASK-412) and BRAND-002 (TASK-429), whose whole argument was about how to
   live with TWO loading screens in a row: this page's bar for the download, then the in-game one
   for the menu scene. BRAND-001 tried to hide the seam by drawing no bar here at all; BRAND-002
   accepted the seam and put Unity's stock bar back, on the grounds that a still image reads as a
   hung page. Both were working around the same constraint.

   BRAND-004 removes the constraint instead: on WebGL there is now only ONE loading screen, and it
   is this one. LoadingScreenController skips the in-game overlay under UNITY_WEBGL and instead
   calls back out to the page (Assets/Plugins/WebGL/HorseQuestLoadingScreen.jslib) once the main
   menu has painted. So this page holds the key art and the bar from the first byte of the download
   until the menu is actually on screen, and there is no second 0..100% and no seam to hide.

   That is why the styling below is a deliberate PORT of Assets/_Project/UI/LoadingScreen.uss
   rather than the stock Unity bar. BRAND-001's warning that "an imitation draws attention to the
   seam" was right while a seam existed; with the in-game screen gone on this platform there is
   nothing left to compare this against, so matching the game's own art is now the whole point.
   Keep the two files in step: same track, same fill colour, same seahorse, same caption.

   What could NOT be ported, and is accepted as a difference from the native platforms:
   the 3D die that tumbles beside the caption. LoadingDieRenderer draws a real mesh into a
   RenderTexture, and the engine is the very thing being downloaded here. The caption on this page
   is the label alone. Windows/macOS/Linux still show the die, via the in-game screen.

   Unity's own branding stays gone, unchanged from BRAND-001: no logo, no footer strip, no
   'Unity Web Player' in the tab, no Unity favicon, and the 'Made with Unity' splash stays off
   (BRAND-003/TASK-430 turned it back on and it was rejected on sight). The six stock bar and logo
   PNGs were deleted along with the rules that referenced them — nothing else pointed at them, and
   unreferenced art ships to every player. */

/* The page around the canvas is left alone — stock behaviour. BRAND-004 briefly filled it with the
   deep-water navy so the letterbox would not be a bright frame around the key art; that was shown
   and rejected. The surround stays as it was. */
body {
    padding: 0;
    margin: 0;
}

#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
.unity-mobile #unity-canvas { width: 100%; height: 100% }

/* Never seen: #horsequest-loading covers the canvas for the whole load and only uncovers it once
   the menu has painted. Black is here purely so a failure to reach that point is not a white flash.

   Do NOT reinstate the stock template's inline canvas.style.background assignment from the
   BACKGROUND_FILENAME macro — an inline style beats this rule, and Unity emits a flat grey jpeg
   for that macro whether or not the WebGL 'background image' player setting is set. */
#unity-canvas {
    background-color: #000000;
}

/* ---------------------------------------------------------------------------------------------
   The loading screen. Ported from Assets/_Project/UI/LoadingScreen.uss — see the note above.
   Sits inside #unity-container rather than over the viewport so it covers exactly the canvas box,
   at every size the canvas takes on desktop and mobile.
   --------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('BeVietnamPro-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    /* The caption must not be invisible while 134 KB of font downloads behind a multi-megabyte
       wasm blob. swap shows it in the fallback immediately and restyles when the font lands. */
    font-display: swap;
}

#horsequest-loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* low on screen: castle, logo and the four pieces all live above */
    align-items: center;
    background-color: rgb(16, 62, 110); /* deep water — shows only if the art fails to load */
    background-image: url('background-loading.webp');
    background-size: cover;             /* never stretch or letterbox the key art */
    background-position: center center;
    opacity: 1;
    transition: opacity 300ms linear;   /* matches LoadingScreenController.FadeOutSeconds */
}

/* Set by index.html once the menu has painted; the element is removed when the fade ends. */
#horsequest-loading.horsequest-loading-done {
    opacity: 0;
    /* The overlay outlives its own fade, so without this it would spend those 300ms
       swallowing clicks aimed at the menu the player can already see underneath. */
    pointer-events: none;
}

.loading-bar-area {
    width: 54%;
    max-width: 820px;
    min-width: 260px;
    margin-bottom: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fixed width and left-aligned, exactly as in the USS: the trailing dots cycle . -> .. -> ...,
   and a centred caption would twitch sideways every time one appears. */
.loading-label-stack {
    position: relative;
    width: 260px;
    height: 58px;
    margin-bottom: 14px;
}

/* Three stacked copies of the same word, because CSS text-stroke paints OVER the fill and there
   is no outline-behind-text property that is safe across browsers:
     .loading-label-shadow  navy, stroked navy, offset down-right  -> the drop shadow
     .loading-label-outline navy, stroked navy, in place           -> the 5px outline
     .loading-label         white, no stroke, in place             -> the face
   The USS gets the same look from -unity-text-outline-width plus one offset copy. The stroke is
   10px here rather than 5px because -webkit-text-stroke straddles the glyph edge — half of it
   lands inside the letter — so 10px centred reads as the USS's 5px outside. */
.loading-label {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    font-family: 'Be Vietnam Pro', 'Trebuchet MS', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 46px;
    line-height: 58px;
    letter-spacing: -1px;
    text-align: left;
    white-space: pre;                /* the dots are trailing spaces' worth of layout; do not trim */
    color: rgb(255, 255, 255);
}

.loading-label-outline,
.loading-label-shadow {
    color: rgb(8, 42, 88);
    -webkit-text-stroke: 10px rgb(8, 42, 88);
}

.loading-label-shadow {
    transform: translate(3px, 5px);
}

/* Drop shadow under the track: a dark rounded slab, since the USS has no box-shadow and this is
   a port of it. Keeping the same construction means the two screens cannot drift apart. */
.loading-track-shadow {
    width: 100%;
    padding-bottom: 6px;
    border-radius: 26px;
    background-color: rgba(6, 32, 66, 0.45);
    box-sizing: border-box;
}

.loading-track {
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(9, 44, 88);
    border: 5px solid rgb(255, 255, 255);
    box-sizing: border-box;
    overflow: visible;              /* the seahorse rides taller than the bar */
}

.loading-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;                       /* driven by index.html */
    min-width: 30px;                /* keeps the pill from collapsing to a sliver at 0% */
    border-radius: 15px;
    background-color: rgb(37, 165, 232);
    overflow: hidden;               /* gloss and bubbles are clipped to the filled portion */
}

/* Top-half sheen: the plastic highlight every piece in the key art carries. */
.loading-gloss {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 45%;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.28);
}

.loading-bubble {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
}

.bubble-a { width: 9px;  height: 9px;  left: 16%; top: 52%; }
.bubble-b { width: 6px;  height: 6px;  left: 44%; top: 26%; }
.bubble-c { width: 11px; height: 11px; left: 73%; top: 44%; }

/* left and transform are set here as well as from script, for the same reason the USS sets them:
   the seahorse cannot be positioned until the track has a resolved width, and without these it
   hangs below the bar for the first frames and then jumps into place. */
.loading-seahorse {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 84px;
    height: 76px;
    background-image: url('loading-seahorse.png');
    background-size: contain;       /* the sprite carries its own alpha silhouette */
    background-position: center center;
    background-repeat: no-repeat;
}

/* The player asked the OS to stop animating things. index.html also holds the caption at its full
   three dots and stops the seahorse's bob, exactly as GameSettingsService.ReducedMotion does
   in-game — a pulsing string is motion too, even though nothing moves on screen. */
@media (prefers-reduced-motion: reduce) {
    #horsequest-loading {
        transition: none;
    }
}

/* The key art is drawn for a wide canvas. Below roughly a phone in portrait the bar would be
   wider than the readable part of it, so the area gives up its 54% and the caption shrinks. */
@media (max-width: 560px) {
    .loading-bar-area { width: 78%; margin-bottom: 10%; }
    .loading-label-stack { width: 180px; height: 40px; }
    .loading-label { font-size: 32px; line-height: 40px; }
    .loading-label-outline,
    .loading-label-shadow { -webkit-text-stroke-width: 7px; }
    .loading-track { height: 28px; border-width: 4px; }
    .loading-seahorse { width: 58px; height: 53px; }
}

#unity-warning {
    position: fixed;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none;
    border-radius: 8px;
    font-family: arial;
}