:root {
  --miniapp-height: 100dvh;
  --tg-system-top: 0px;
  --tg-system-right: 0px;
  --tg-system-bottom: 0px;
  --tg-system-left: 0px;
  --tg-content-top: 0px;
  --tg-content-right: 0px;
  --tg-content-bottom: 0px;
  --tg-content-left: 0px;
  --inset-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-system-top)) + var(--tg-content-top));
  --inset-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-system-bottom)) + var(--tg-content-bottom));
  --inset-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-system-left)) + var(--tg-content-left));
  --inset-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-system-right)) + var(--tg-content-right));
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #172431; }
/* On Android only, Cocos 2.3 (ContainerStrategy._setupStyle) writes the game
   size into the body's inline width and height. That shrinks this centring box
   to the game and pins the game to the top of a taller phone. !important keeps
   the body at the Mini App viewport on every platform. */
body { display: flex; justify-content: center; align-items: center; width: 100% !important; height: var(--miniapp-height) !important; padding: var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left); }
#game-shell {
  --game-width: min(calc(100vw - var(--inset-left) - var(--inset-right)), calc((var(--miniapp-height) - var(--inset-top) - var(--inset-bottom)) * 0.5625));
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: var(--game-width);
  height: calc(var(--game-width) * 1.7777777777777778);
  background: #172431;
}
#GameCanvas { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#Cocos2dGameContainer { margin: 0 auto !important; }
#splash { position: absolute; inset: 0; background: #172431 url('./splash.746fc.png') center center / contain no-repeat; }
.progress-bar { position: absolute; left: 15%; right: 15%; bottom: 12%; height: 4px; background: #19212b80; border-radius: 4px; overflow: hidden; }
.progress-bar span { display: block; width: 0; height: 100%; background: #dfb66e; }
#miniapp-status { position: fixed; z-index: 50; left: max(18px, var(--inset-left)); right: max(18px, var(--inset-right)); bottom: calc(var(--inset-bottom) + 18px); margin: 0 auto; max-width: 520px; padding: 10px 14px; border: 1px solid #bda36b88; border-radius: 8px; background: #172431ed; color: #f0e3c9; text-align: center; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; pointer-events: none; }
#miniapp-status[hidden] { display: none; }