/* -----------------------------------------------------------------------------
   The player shell.

   Two rules do most of the mobile work: `overscroll-behavior: none` with a fixed
   body stops iOS rubber-banding the page while a thumb is on a joystick, and
   `touch-action: none` on the whole page stops the browser scrolling and zooming
   it instead of sending the gesture to the game.
   -------------------------------------------------------------------------- */

:root {
    --sb-bg: #12141a;
    --sb-fg: #e8eaf0;
    --sb-dim: #8b90a0;
    --sb-accent: #5b8dd9;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    /* The page, not just the canvases. A pinch or a double tap zooms from whatever
       the finger lands on, and the bare page while the engine downloads, the
       loading screen, the buttons, the hints and an iframe over the game (the
       Darks Games friends panel) all let one through.
       Once zoomed, the canvases refuse the pinch that would undo it, and Chrome
       restores the zoom on a reload, so the player was stuck. The restriction
       holds for everything on the page, so this one rule covers every overlay; a
       list that scrolls still pans. Safari's own pinch events, its double-tap
       zoom (which ignores this rule) and any zoom that slips through are
       handled in Runtime.js, _holdPageGestures. */
    touch-action: none;
    background: var(--sb-bg);
    color: var(--sb-fg);
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

body { position: fixed; inset: 0; }

#game {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--sb-bg);
}

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

/* ---- Loading overlay ---------------------------------------------------- */

.sb-loading {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--sb-bg);
    transition: opacity 350ms ease;
}

.sb-loading.is-done { opacity: 0; pointer-events: none; }

.sb-loading-inner { text-align: center; max-width: min(90vw, 540px); }

.sb-loading-mark {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.sb-loading-status { color: var(--sb-dim); margin-bottom: 20px; }

.sb-loading-bar {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

/* An indeterminate sweep: the engine reports progress in stages, not fractions. */
.sb-loading-bar i {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 2px;
    background: var(--sb-accent);
    animation: sb-sweep 1.15s ease-in-out infinite;
}

@keyframes sb-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(365%); }
}

.sb-loading-error {
    margin: 14px 0 0;
    padding: 12px 14px;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #ffb4a8;
    background: rgba(255, 90, 70, 0.09);
    border: 1px solid rgba(255, 90, 70, 0.28);
    border-radius: 6px;
}

/* ---- Stats -------------------------------------------------------------- */

.sb-stats {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    z-index: 20;
    padding: 5px 9px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.45);
    color: #b9c4d6;
    font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    pointer-events: none;
    white-space: nowrap;
}

/* ---- Debug drawing (Debug and Development builds, F1) --------------------- */

.sb-debug {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.sb-debug[hidden] { display: none; }

/* ---- Fullscreen + install buttons ---------------------------------------- */

/* The install button sits to the left of fullscreen. display:grid outranks the
   UA's [hidden] rule, so hidden is said again: the button is hidden until the
   module decides the game is installable here (runtime/installHint.js). */
#install { right: calc(58px + env(safe-area-inset-right, 0px)); }
#fullscreen[hidden], #install[hidden] { display: none; }

#fullscreen, #install {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 30;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--sb-fg);
    font-size: 17px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

#fullscreen:hover, #install:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Orientation hint --------------------------------------------------- */

/* A banner, not a blocking overlay: the game is perfectly playable in portrait,
   and covering it to say so would be worse than saying nothing. Tapping it
   dismisses it for the game, it hides itself after a few seconds, rotating
   clears it, and "RotateHint": false turns it off (runtime/rotateHint.js). */
#rotate-hint, #install-hint {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 40;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    max-width: calc(100vw - 32px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    background: rgba(18, 20, 26, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

body.wants-landscape #rotate-hint { display: flex; }

#rotate-hint div {
    font-size: 20px;
    animation: sb-rotate 2.4s ease-in-out infinite;
}

#rotate-hint p { color: var(--sb-dim); margin: 0; font-size: 12.5px; white-space: nowrap; }

/* The install banner: same shape, shown by the install button when the browser
   has no prompt of its own (runtime/installHint.js). Its text is a sentence, so
   it may wrap. */
body.shows-install-hint #install-hint { display: flex; }
#install-hint div { font-size: 20px; }
#install-hint p { color: var(--sb-fg); margin: 0; font-size: 12.5px; text-align: center; }

@keyframes sb-rotate {
    0%, 45%  { transform: rotate(0deg); }
    55%, 100%{ transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sb-loading-bar i,
    #rotate-hint div { animation: none; }
}