:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #080c18;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }

.app-shell {
  display: grid;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  background:
    radial-gradient(circle at 22% 12%, rgb(41 83 173 / 26%), transparent 34rem),
    radial-gradient(circle at 78% 88%, rgb(45 159 187 / 18%), transparent 28rem),
    #080c18;
}

.game-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 1rem;
  overflow: hidden;
}

.game-frame {
  display: block;
  width: min(34rem, calc((100vh - 2rem) * 750 / 1334), calc(100vw - 2rem));
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  aspect-ratio: 750 / 1334;
  border: 1px solid rgb(132 174 255 / 18%);
  border-radius: 1.1rem;
  background: #101826;
  box-shadow: 0 1.6rem 5rem rgb(0 0 0 / 48%);
}

.fullscreen-button {
  position: absolute;
  z-index: 10;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  min-height: 2.7rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  color: #fff;
  background: rgb(9 17 35 / 84%);
  font: inherit;
  cursor: pointer;
  backdrop-filter: blur(0.65rem);
}

.fullscreen-button b { font-size: 0.86rem; }
.fullscreen-button:focus-visible { outline: 3px solid #f6d86e; outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.has-window-fullscreen { overflow: hidden; }
.game-stage:fullscreen,
.game-stage:-webkit-full-screen,
.game-stage.is-window-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: #000;
}

.game-stage:fullscreen .game-frame,
.game-stage:-webkit-full-screen .game-frame,
.game-stage.is-window-fullscreen .game-frame {
  width: min(100vw, calc(100vh * 750 / 1334));
  max-width: 100vw;
  max-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@supports (height: 100dvh) {
  .app-shell { height: 100dvh; min-height: 100dvh; }
  .game-frame {
    width: min(34rem, calc((100dvh - 2rem) * 750 / 1334), calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
  }
  .game-stage:fullscreen,
  .game-stage:-webkit-full-screen,
  .game-stage.is-window-fullscreen { height: 100dvh; }
  .game-stage:fullscreen .game-frame,
  .game-stage:-webkit-full-screen .game-frame,
  .game-stage.is-window-fullscreen .game-frame {
    width: min(100vw, calc(100dvh * 750 / 1334));
    max-height: 100dvh;
  }
}

@media (max-width: 40rem) {
  .game-stage { padding: 0; }
  .game-frame {
    width: min(100vw, calc(100svh * 750 / 1334));
    max-width: none;
    max-height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}