:root {
  --app-width: 390px;
  --app-height: 732px;
  --top-space: 90px;

  --glass-pad-x: 40px;
  --glass-pad-y: 40px;

  --stage-scale: 1;

  /*
    Easy background tuning:
    Higher = darker.
    Try +0.05 changes only.
  */
  --bg-centre-dim: 0.25;
  --bg-mid-dim: 0.55;
  --bg-edge-dim: 0.75;
}

/* Base reset */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  background: #050505;
}

body {
  overflow: hidden;
  min-height: 100svh;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: var(--top-space);

  font-family: Helvetica, Arial, sans-serif;

  background-image: url("https://albert.concordsystems.co/images/back-25.jpg?");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 15%;

  position: relative;
  isolation: isolate;
}

/* Dark overlay over the full page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(8, 10, 15, var(--bg-centre-dim)) 0%,
      rgba(8, 10, 15, var(--bg-mid-dim)) 50%,
      rgba(3, 4, 8, var(--bg-edge-dim)) 100%
    ),
    linear-gradient(
      135deg,
      rgba(4, 8, 16, 0.34),
      rgba(18, 24, 38, 0.24)
    );
}

/* Frosted-glass panel behind the app */
body::after {
  content: "";
  position: fixed;
  z-index: 1;
  pointer-events: none;

  left: 50%;
  top: calc(var(--top-space) - var(--glass-pad-y));

  width: calc(var(--app-width) + (var(--glass-pad-x) * 2));
  height: calc(var(--app-height) + (var(--glass-pad-y) * 2));

  transform: translateX(-50%) scale(var(--stage-scale));
  transform-origin: top center;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );

  border: 1px solid rgba(255, 255, 255, 0.14);

  backdrop-filter: blur(7px) saturate(105%);
  -webkit-backdrop-filter: blur(7px) saturate(105%);

  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Expo app pane */
#root {
  display: flex;
  flex: none;

  width: var(--app-width);
  height: var(--app-height);

  position: relative;
  z-index: 2;

  overflow: hidden;

  background: #ffffff;

  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.62);

  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.50),
    0 5px 14px rgba(0, 0, 0, 0.30);

  transform: scale(var(--stage-scale));
  transform-origin: top center;
}

/* Subtle inner edge */
#root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Smaller browser windows */
@media (max-width: 520px), (max-height: 850px) {
  :root {
    --top-space: 24px;
    --glass-pad-x: 16px;
    --glass-pad-y: 16px;

    --stage-scale: min(
      calc((100vw - 28px) / 422),
      calc((100svh - 36px) / 764)
    );
  }
}