body {
  cursor: default;
  padding: 0;
  border: 0;
  margin: 0;

  text-align: center;
  background-color: white;
  font-family: Helvetica, Verdana, Arial, sans-serif;
}

body, canvas, div {
  outline: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

canvas {
  background-color: rgba(0, 0, 0, 0);
}

#GameDiv {
    margin: 0 auto;
    position:relative;
    border:5px solid black;
    border-radius: 10px;
    box-shadow: 0 5px 50px #333
}

#Cocos3dGameContainer, #GameCanvas {
  width: 100%;
  height: 100%;
}

:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}
/* ---------------------------------------------------------------------------
 * Invert overrides. Everything above is the stock Cocos web template.
 *
 * `Viewport.claimPage()` removes the project heading and the "Created with
 * Cocos Creator" footer at runtime, but onLoad only reaches it once the engine
 * has booted — a second or two of white page with both captions on it. These
 * rules hide them before the first paint; claimPage still takes them out of the
 * document, so they are gone rather than merely invisible.
 *
 * style.css is stock boilerplate with no generated values in it, which is why
 * this is the file to fork. index.html carries the canvas size and the SystemJS
 * bootstrap, so a copy of that one would need re-syncing on every build change.
 * ------------------------------------------------------------------------- */
h1.header,
p.footer {
  display: none;
}

html,
body {
  background: #0B0716;
}

/* Fill the window, and keep filling it.
 *
 * The desktop build ships `screen.exactFitScreen: false`, which makes the
 * engine take its window size from the *frame element* rather than from the
 * browser window (SubFrame vs BrowserWindow in its screen adapter). The
 * template then pins that element with an inline `width: 1456px; height: 820px`,
 * so the game stayed one fixed size no matter how the window was dragged.
 *
 * Sizing the frame here turns that same SubFrame path into a responsive one:
 * the engine already listens for `resize` unconditionally and re-reads
 * `clientWidth`/`clientHeight`, so it follows. `!important` is what beats the
 * template's inline style; `Viewport.claimPage()` clears that inline size too,
 * so the DOM is not left claiming something untrue.
 *
 * `dvh` after `vh` so mobile browsers exclude the collapsing URL bar where they
 * support it, and fall back where they do not.
 *
 * The design resolution is fit-height, so the playfield stays 820 units tall and
 * the width follows the window's aspect — which is what the game was written
 * against from the prototype onward.
 */
#GameDiv {
  /* The template frames the canvas in a black border with a drop shadow, which
     only read against the white page the captions sat on. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 !important;
  /* `Viewport.fitFrame()` writes these in exact pixels on every resize; the
     viewport units are what gets used until it first runs, and on any build
     where the script has not loaded yet. The custom property is how the two
     cooperate: this rule has to be `!important` to beat the template's inline
     `width: 1456px`, and an inline style written by script would then lose
     to it. */
  width: var(--invert-frame-w, 100vw) !important;
  height: var(--invert-frame-h, 100dvh) !important;
  /* A floor, because the frame now follows the window. `syncRenderTarget` bails
     on a 0x0 target and the engine's swapchain does not recover from one on its
     own (see the README's engine notes), so a collapsed or headless window must
     not be able to drag the frame to nothing. These match the clamps in
     `InvertGame.applyLayout`. */
  min-width: 200px !important;
  min-height: 320px !important;
}

html,
body {
  height: 100%;
  overflow: hidden;
}