/*
 * The Telegram webview is not a normal browser tab: it bounces on overscroll, offers text
 * selection on long-press, and reports a viewport height that changes mid-gesture. Everything
 * here exists to take those behaviours away, so the canvas is the only thing that moves.
 *
 * --app-height is written by src/telegram/bootstrap.ts from viewport.stableHeight().
 * Its 100dvh fallback keeps the page correct in a plain browser, where no SDK is running.
 *
 * --paper is the game's page colour (src/game/palette.ts), written by src/main.ts once the
 * light/dark choice is made. The page shows it before any script has run — the plain HTML/CSS
 * render is always the first paint — so the fallback below guesses it from prefers-color-scheme,
 * using the same two paper colours as the palette. The guess and the real choice only differ when
 * Telegram's theme disagrees with the system setting; otherwise the first paint, Phaser's first
 * frame and Telegram's own header (painted to match, see telegram/theme.ts) are all one colour, and
 * there is no flash between them.
 */

:root {
    --app-height: 100dvh;
    --safe-top: 0px;
    --safe-right: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;

    --paper-fallback: #fbf7ec;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper-fallback: #1a2130;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: var(--app-height);
    overflow: hidden;
    background: var(--paper, var(--paper-fallback));

    /* No rubber-banding, no pull-to-refresh, no accidental swipe-to-close. */
    overscroll-behavior: none;
    touch-action: none;

    /* A long press during play must not pop a selection or callout menu. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

#app,
#game-container {
    width: 100%;
    height: 100%;
}

#game-container {
    display: block;
    position: relative;
}

#game-container canvas {
    display: block;
    touch-action: none;
}

/*
 * The name dialog (src/game/ui/nameDialog.ts) — the one piece of UI that is HTML, because a name is
 * typed and only a real text field brings the keyboard, the input method and the caret. It is drawn
 * to match the canvas around it: the results card, the chunky buttons. Every colour is a --nd-*
 * variable set from the game's palette; lengths are CSS px, since this is not the canvas.
 *
 * The card sits in the upper part of the screen rather than the middle, so on a phone whose
 * keyboard covers the lower half it stays in view without the page having to scroll.
 */

.name-dialog {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: max(14vh, calc(var(--safe-top) + 24px)) 16px 16px;
    background: var(--nd-scrim);
    font-family: var(--nd-font);
    touch-action: manipulation;
    animation: name-dialog-in 160ms ease-out;
}

@keyframes name-dialog-in {
    from {
        opacity: 0;
    }
}

.name-dialog__card {
    width: min(100%, 340px);
    padding: 22px 20px 20px;
    background: var(--nd-card);
    border: 2.5px solid var(--nd-ink);
    border-radius: 22px;
    box-shadow: 4px 6px 0 var(--nd-shadow);
    color: var(--nd-text);
    text-align: center;
}

.name-dialog__title {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
}

.name-dialog__hint {
    margin: 6px 0 16px;
    color: var(--nd-soft);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.name-dialog__input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: var(--nd-paper);
    border: 2.5px solid var(--nd-ink);
    border-radius: 14px;
    color: var(--nd-text);
    font: 800 20px var(--nd-font);
    text-align: center;
    outline: none;
    /* The page turns selection off for the game; a text field needs it back. */
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

.name-dialog__input::placeholder {
    color: var(--nd-soft);
    opacity: 0.7;
}

.name-dialog__input:focus {
    border-color: var(--nd-primary-dark);
    box-shadow: 0 0 0 3px var(--nd-focus);
}

.name-dialog__error {
    min-height: 19px;
    margin: 8px 0 12px;
    color: var(--nd-error);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.name-dialog__actions {
    display: flex;
    gap: 12px;
}

.name-dialog__button {
    flex: 1;
    padding: 11px 8px 12px;
    border: 2.2px solid var(--nd-ink);
    border-radius: 999px;
    font: 800 18px var(--nd-font);
    cursor: pointer;
    transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}

.name-dialog__button:active:not(:disabled) {
    transform: translateY(3px);
}

.name-dialog__button:disabled {
    opacity: 0.55;
}

.name-dialog__save {
    background: linear-gradient(var(--nd-primary), var(--nd-primary-dark) 160%);
    box-shadow: 0 4px 0 var(--nd-primary-dark);
    color: var(--nd-on-primary);
    text-shadow: 0 0 2px var(--nd-primary-dark), 0 1px 1px var(--nd-primary-dark);
}

.name-dialog__save:active:not(:disabled) {
    box-shadow: 0 1px 0 var(--nd-primary-dark);
}

.name-dialog__dismiss {
    background: var(--nd-secondary);
    box-shadow: 0 4px 0 var(--nd-secondary-dark);
    color: var(--nd-text);
}

.name-dialog__dismiss:active:not(:disabled) {
    box-shadow: 0 1px 0 var(--nd-secondary-dark);
}