/*
  Dream Puzzles WebGL page: the game canvas on the whole page and, above it, the loading screen of the Startup scene
  (Content/UI/Screens/Loading.uxml + Loading.uss, colors from Content/UI/Theme/Tokens.uss). Sizes are the design's
  pixels times --s, the scale UI Toolkit uses (loader.js): PC 1440×900 with match 0.5, phone (landscape) 390 high,
  upright a phone 390 wide and a tablet 844 high. Over both, for phones and tablets held upright while the game has no
  upright layout (the puzzle), «Поверните телефон».
*/

@font-face {
    font-family: "DP Lora";
    font-weight: 700;
    font-display: block;
    src: url("fonts/Lora-700.woff2") format("woff2");
}

@font-face {
    font-family: "DP Manrope";
    font-weight: 500;
    font-display: block;
    src: url("fonts/Manrope-500.woff2") format("woff2");
}

@font-face {
    font-family: "DP Manrope";
    font-weight: 800;
    font-display: block;
    src: url("fonts/Manrope-800.woff2") format("woff2");
}

/* The letters of the other languages: a browser downloads these files only when the page shows one of them. */
/* fonts:ext — written by scripts/fonts/build_fonts.py */
@font-face {
    font-family: "DP Manrope";
    font-weight: 500;
    font-display: block;
    src: url("fonts/Manrope-500-ext.woff2") format("woff2");
    unicode-range: U+00C2, U+00C4, U+00C7, U+00CE, U+00D6, U+00DC-00DD, U+00E2, U+00E4, U+00E7, U+00EE, U+00F6, U+00FC-00FD, U+0102-0103, U+011E-011F, U+0130-0131, U+0147-0148, U+015E-015F, U+017D-017E, U+018F, U+0218-021B, U+0259, U+02BB-02BC, U+0492-0493, U+0496-049B, U+04A0-04A3, U+04AA-04AB, U+04AE-04B3, U+04B6-04B7, U+04BA-04BB, U+04C0, U+04CF-04D1, U+04D6-04D9, U+04E2-04E3, U+04E8-04E9, U+04EE-04EF, U+04F2-04F3;
}
@font-face {
    font-family: "DP Manrope";
    font-weight: 800;
    font-display: block;
    src: url("fonts/Manrope-800-ext.woff2") format("woff2");
    unicode-range: U+00C2, U+00C4, U+00C7, U+00CE, U+00D6, U+00DC-00DD, U+00E2, U+00E4, U+00E7, U+00EE, U+00F6, U+00FC-00FD, U+0102-0103, U+011E-011F, U+0130-0131, U+0147-0148, U+015E-015F, U+017D-017E, U+018F, U+0218-021B, U+0259, U+02BB-02BC, U+0492-0493, U+0496-049B, U+04A0-04A3, U+04AA-04AB, U+04AE-04B3, U+04B6-04B7, U+04BA-04BB, U+04C0, U+04CF-04D1, U+04D6-04D9, U+04E2-04E3, U+04E8-04E9, U+04EE-04EF, U+04F2-04F3;
}
@font-face {
    font-family: "DP Lora";
    font-weight: 700;
    font-display: block;
    src: url("fonts/Lora-700-ext.woff2") format("woff2");
    unicode-range: U+00C2, U+00C4, U+00C7, U+00CE, U+00D6, U+00DC-00DD, U+00E2, U+00E4, U+00E7, U+00EE, U+00F6, U+00FC-00FD, U+0102-0103, U+011E-011F, U+0130-0131, U+0147-0148, U+015E-015F, U+017D-017E, U+018F, U+0218-021B, U+0259, U+02BB-02BC, U+0492-0493, U+0496-049B, U+04A0-04A3, U+04AA-04AB, U+04AE-04B3, U+04B6-04B7, U+04BA-04BB, U+04C0, U+04CF-04D1, U+04D6-04D9, U+04E2-04E3, U+04E8-04E9, U+04EE-04EF, U+04F2-04F3;
}
/* fonts:ext end */

:root {
    --s: 1;

    --c-bg: #F4F2EF;
    --c-surface: #FFFFFF;
    --c-text: #1F1B24;
    --c-sub: #4F4A55;
    --c-track: #EAE6E1;
    --c-line: #E3DED7;
    --c-accent: #5B3FC4;
    --c-on-accent: #FFFFFF;
    --c-chip-bg: #EFEAFB;
    --c-chip-text: #3F2A9A;
    --c-scrim: rgba(24, 20, 36, 0.5);
    --c-warn-bg: #FFF1E6;
    --c-warn-text: #8A3B12;

    /* Loading.uss, PC */
    --logo: 112px;
    --logo-radius: 32px;
    --logo-icon: 56px;
    --center-bottom: 40px;
    --title-top: 28px;
    --title-size: 60px;
    --bar-w: 480px;
    --bar-h: 14px;
    --bar-top: 40px;
    --status-top: 14px;
    --status-size: 20px;
    --strip-h: 234px;

    /* «Нет связи» window, PC, large text */
    --dialog-w: 600px;
    --dialog-radius: 28px;
    --circle: 96px;
    --circle-icon: 48px;
    --dialog-title-top: 26px;
    --dialog-title-size: 32px;
    --dialog-text-top: 18px;
    --dialog-text-size: 19px;
    --button-top: 32px;
    --button-h: 64px;
    --button-radius: 18px;
    --button-size: 20px;

    color-scheme: light;
}

.theme-dark {
    --c-bg: #131628;
    --c-surface: #1D2137;
    --c-text: #F3F4F8;
    --c-sub: #BEC2DA;
    --c-track: #2C3152;
    --c-line: #2E3352;
    --c-accent: #BBAAFF;
    --c-on-accent: #131628;
    --c-chip-bg: #2A2F55;
    --c-chip-text: #DCD3FF;
    --c-scrim: rgba(4, 5, 12, 0.66);
    --c-warn-bg: #3A2A1E;
    --c-warn-text: #FFC9A3;

    color-scheme: dark;
}

/* Loading.uss, phone (landscape): logo, bar and status at the left, the covers' place at the right */
.platform-mobile {
    --logo: 76px;
    --logo-radius: 24px;
    --logo-icon: 38px;
    --center-bottom: 0px;
    --title-top: 14px;
    --title-size: 36px;
    --bar-w: 260px;
    --bar-h: 12px;
    --bar-top: 20px;
    --status-top: 14px;
    --status-size: 18px;
    --center-w: 300px;
    --strip-w: 384px;
    --strip-min-w: 276px;
    --strip-left: 50px;
    --side: 16px;

    /* «Нет связи» window, phone: the icon at the left of the texts (NoConnection.uss) */
    --dialog-w: 520px;
    --circle: 72px;
    --circle-icon: 36px;
    --dialog-title-top: 0px;
    --dialog-title-size: 26px;
    --dialog-text-top: 6px;
    --dialog-text-size: 18px;
    --button-top: 20px;
    --button-h: 56px;
    --button-radius: 16px;
    --button-size: 19px;
}

/* Loading.uss, upright («М1», with .platform-mobile): logo, bar and status in the middle, the covers' place under them */
.platform-portrait {
    --logo: 92px;
    --logo-radius: 28px;
    --logo-icon: 46px;
    --center-bottom: 20px;
    --title-top: 22px;
    --title-size: 40px;
    --bar-top: 30px;
    --status-top: 22px;
    --strip-h: 188px;

    /* «Нет связи», upright: a sheet from the bottom, the icon over the texts (NoConnection.uss, «М1a») */
    --circle: 72px;
    --circle-icon: 36px;
    --dialog-title-top: 16px;
    --dialog-title-size: 26px;
    --dialog-text-top: 16px;
    --dialog-text-size: 18px;
    --button-top: 22px;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--c-bg);
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.game-canvas {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--c-bg);
    outline: none;
    touch-action: none;
}

/* ---------- Loading screen ---------- */

.loader {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: "DP Manrope", system-ui, sans-serif;
    font-weight: 500;
    opacity: 1;
    transition: opacity 300ms ease-out;
}

.loader--hiding {
    opacity: 0;
    pointer-events: none;
}

.loader--hidden {
    display: none;
}

.loader__center {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: calc(var(--s) * var(--center-bottom));
}

.loader__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(var(--s) * var(--logo));
    height: calc(var(--s) * var(--logo));
    border-radius: calc(var(--s) * var(--logo-radius));
    background: var(--c-chip-bg);
}

.loader__logo svg {
    width: calc(var(--s) * var(--logo-icon));
    height: calc(var(--s) * var(--logo-icon));
    fill: none;
    stroke: var(--c-chip-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loader__title {
    margin: calc(var(--s) * var(--title-top)) 0 0;
    font-family: "DP Lora", Georgia, serif;
    font-weight: 700;
    font-size: calc(var(--s) * var(--title-size));
    line-height: normal;
    white-space: nowrap;
}

.loader__bar {
    flex-shrink: 0;
    width: calc(var(--s) * var(--bar-w));
    height: calc(var(--s) * var(--bar-h));
    margin-top: calc(var(--s) * var(--bar-top));
    border-radius: calc(var(--s) * var(--bar-h) / 2);
    background: var(--c-track);
    overflow: hidden;
}

.loader__fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--c-accent);
    transition: width 300ms ease;
}

.loader__status {
    margin: calc(var(--s) * var(--status-top)) 0 0;
    font-size: calc(var(--s) * var(--status-size));
    line-height: normal;
    color: var(--c-sub);
    white-space: nowrap;
}

/* Percent and megabytes of the download: zero height, so the screen keeps the layout of the game's, which has no
   such line; the text hangs below the status. */
.loader__meta {
    position: relative;
    top: calc(var(--s) * 6px);
    height: 0;
    margin: 0;
    font-size: calc(var(--s) * var(--status-size) * 0.8);
    line-height: normal;
    color: var(--c-sub);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Album covers in the game; empty here, it keeps the layout of the game's screen. */
.loader__strip {
    flex-shrink: 0;
    height: calc(var(--s) * var(--strip-h));
}

/* The game pads the sides for the cutout, at least 16 px (UiHost); a browser page has no cutout to mind. */
.platform-mobile .loader {
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--s) * var(--side));
}

.platform-mobile .loader__center {
    flex: 0 0 auto;
    width: calc(var(--s) * var(--center-w));
}

.platform-mobile .loader__strip {
    flex: 0 1 calc(var(--s) * var(--strip-w));
    min-width: calc(var(--s) * var(--strip-min-w));
    height: auto;
    margin-left: calc(var(--s) * var(--strip-left));
}

/* Upright: back to the column, the covers' place at the bottom */
.platform-portrait .loader {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.platform-portrait .loader__center {
    flex: 1 1 auto;
    width: auto;
}

.platform-portrait .loader__strip {
    flex: 0 0 auto;
    min-width: 0;
    height: calc(var(--s) * var(--strip-h));
    margin-left: 0;
}

/* ---------- Error window ---------- */

.loader__scrim {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-scrim);
}

.loader__scrim[hidden] {
    display: none;
}

.loader__dialog {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--s) * var(--dialog-w));
    max-width: calc(100% - 32px);
    padding: calc(var(--s) * 44px) calc(var(--s) * 48px) calc(var(--s) * 48px);
    border-radius: calc(var(--s) * var(--dialog-radius));
    background: var(--c-surface);
    text-align: center;
}

.platform-mobile .loader__dialog {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: calc(var(--s) * 18px);
    align-items: center;
    max-height: calc(100% - 16px);
    padding: calc(var(--s) * 24px);
    text-align: left;
}

.platform-mobile .loader__icon-circle {
    grid-row: 1 / span 2;
}

.platform-mobile .loader__dialog-title {
    align-self: end;
}

.platform-mobile .loader__dialog-text {
    align-self: start;
}

.platform-mobile .loader__button {
    grid-column: 1 / -1;
}

/* Upright: a sheet from the bottom with its handle, the icon over the centred texts */
.platform-portrait .loader__scrim {
    align-items: flex-end;
}

.platform-portrait .loader__dialog {
    display: flex;
    width: 100%;
    max-width: none;
    max-height: 100%;
    padding: calc(var(--s) * 12px) calc(var(--s) * 20px) calc(var(--s) * 34px);
    border-radius: calc(var(--s) * var(--dialog-radius)) calc(var(--s) * var(--dialog-radius)) 0 0;
    text-align: center;
}

.platform-portrait .loader__dialog::before {
    content: "";
    flex-shrink: 0;
    width: calc(var(--s) * 44px);
    height: calc(var(--s) * 5px);
    margin-bottom: calc(var(--s) * 16px);
    border-radius: calc(var(--s) * 3px);
    background: var(--c-line);
}

.platform-portrait .loader__icon-circle {
    margin-top: calc(var(--s) * 8px);
}

.platform-portrait .loader__dialog-title,
.platform-portrait .loader__dialog-text {
    align-self: auto;
}

.loader__icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(var(--s) * var(--circle));
    height: calc(var(--s) * var(--circle));
    border-radius: 50%;
    background: var(--c-warn-bg);
}

.loader__icon {
    display: none;
    width: calc(var(--s) * var(--circle-icon));
    height: calc(var(--s) * var(--circle-icon));
    fill: none;
    stroke: var(--c-warn-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loader__dialog-title {
    margin: calc(var(--s) * var(--dialog-title-top)) 0 0;
    font-family: "DP Lora", Georgia, serif;
    font-weight: 700;
    font-size: calc(var(--s) * var(--dialog-title-size));
    line-height: normal;
}

.loader__dialog-text {
    margin: calc(var(--s) * var(--dialog-text-top)) 0 0;
    font-size: calc(var(--s) * var(--dialog-text-size));
    line-height: normal;
    color: var(--c-sub);
}

.loader__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--s) * 10px);
    width: 100%;
    height: calc(var(--s) * var(--button-h));
    margin-top: calc(var(--s) * var(--button-top));
    padding: 0 calc(var(--s) * 26px);
    border: 0;
    border-radius: calc(var(--s) * var(--button-radius));
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: "DP Manrope", system-ui, sans-serif;
    font-weight: 800;
    font-size: calc(var(--s) * var(--button-size));
    cursor: pointer;
    transition: opacity 120ms, transform 120ms;
}

.loader__button:hover { opacity: 0.92; }
.loader__button:active { transform: scale(0.98); }
.loader__button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.loader__button svg {
    flex-shrink: 0;
    width: calc(var(--s) * 24px);
    height: calc(var(--s) * 24px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Window by the kind of error (loader.js fail): its icon; reloading won't help an unsupported browser. */
.loader--error .loader__icon--error,
.loader--network .loader__icon--network,
.loader--unsupported .loader__icon--unsupported {
    display: block;
}

.loader--unsupported .loader__button {
    display: none;
}