html, body { margin: 0; width: 100% !important; height: 100% !important; overflow: hidden; }
html { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }
body { box-sizing: border-box; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); display: flex; align-items: center; justify-content: center; background: #101c29; font-family: Arial, sans-serif; }
#GameFrame { position: relative; min-width: 0 !important; min-height: 0 !important; width: min(480px, calc(100vw - 24px - var(--safe-left) - var(--safe-right)), calc((100dvh - 24px - var(--safe-top) - var(--safe-bottom)) * .5625)) !important; height: min(853.333333px, calc((100vw - 24px - var(--safe-left) - var(--safe-right)) * 1.7777777778), calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom))) !important; aspect-ratio: 9 / 16; overflow: hidden; background: #142c37; }
@media (pointer: coarse) { #GameFrame { width: min(calc(100vw - var(--safe-left) - var(--safe-right)), calc((100dvh - var(--safe-top) - var(--safe-bottom)) * .5625)) !important; height: min(calc((100vw - var(--safe-left) - var(--safe-right)) * 1.7777777778), calc(100dvh - var(--safe-top) - var(--safe-bottom))) !important; } }
#Cocos2dGameContainer { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
#GameCanvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#splash { display: none !important; }
#LoadingOverlay { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; color: #fff3cf; background: #142c37; text-align: center; }
#LoadingOverlay[hidden], [hidden] { display: none !important; }
.loading-card { box-sizing: border-box; width: 88%; max-height: calc(100% - 16px); overflow: auto; padding: 28px 8px; border: 2px solid #d5ac65; border-radius: 18px; background: #203d48; }
.loading-card h1 { font-size: clamp(18px, 4.2vw, 28px); margin: 0 0 28px; }
.loading-card p { font-size: 16px; line-height: 1.5; padding: 0 10px; }
.spinner { width: 32px; height: 32px; margin: 22px auto; border: 4px solid #55747b; border-top-color: #e5bd76; border-radius: 50%; animation: spin 1s linear infinite; }
#LoadingRetry { border: 0; border-radius: 8px; padding: 12px 25px; color: #173841; background: #f8e5b9; font: bold 17px Arial; cursor: pointer; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-height: 500px) {
  .loading-card { padding: 12px 6px; }
  .loading-card h1 { font-size: 18px; margin-bottom: 8px; }
  .spinner { width: 22px; height: 22px; margin: 10px auto; }
  .loading-card p { font-size: 13px; line-height: 1.35; margin: 10px 0; }
  #LoadingRetry { font-size: 14px; padding: 8px 20px; }
}