:root{
  /* Default fallbacks (will be overwritten by JS on iOS Safari) */
  --app-width: 100vw;
  --app-height: 100vh;
  --app-offset-top: 0px;
}

/* Use dynamic viewport units when supported (good for most browsers) */
@supports (height: 100dvh){
  :root{ --app-height: 100dvh; }
}
@supports (width: 100dvw){
  :root{ --app-width: 100dvw; }
}

/* iOS Safari: avoid dvh/dvw because keyboard changes them -> game shrinks.
   Let JS (visualViewport) control --app-height/width instead. */
@supports (-webkit-touch-callout: none){
  :root{
    --app-height: 100vh;
    --app-width: 100vw;
  }
}

html, body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  -webkit-text-size-adjust: 100%;
}

/* Prevent iOS bounce/scroll from revealing blank areas */
body{
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  touch-action: none;
}

/* Fullscreen container + background (sized to the *visible* viewport on iOS) */
#unity-container{
  position: fixed;
  left: 0;
  top: var(--app-offset-top);
  width: var(--app-width);
  height: var(--app-height);

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

  /* Keep content away from the notch / home indicator when viewport-fit=cover */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;

  /* Ảnh nền che phần thừa */
  background: url('bg.jpg') center / cover no-repeat;
  overflow: hidden;
}

/* (Tuỳ chọn) phủ 1 lớp tối để game nổi hơn */
#unity-container::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}

/* Canvas: game dọc 9:16, tự co để vừa màn (tính theo *visible* height trên iOS Safari) */
#unity-canvas{
  position: relative;
  z-index: 1;

  aspect-ratio: 9 / 16;

  /* Fit within the visible area (excluding safe areas) */
  width: min(
    1080px,
    calc(var(--app-width) - env(safe-area-inset-left) - env(safe-area-inset-right)),
    calc((var(--app-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16)
  );
  height: auto;
  max-height: calc(var(--app-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));

  display: block;
  background: #000000;
}

/* Loading / warning nổi trên cùng */
#unity-loading-bar{
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#unity-logo{ width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty{ margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full{ width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }

#unity-warning{
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 12px);
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
}

/* ========== MOBILE: FULLSCREEN CANVAS (keep PC unchanged) ========== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  /* Cho phép game chạm full viền màn hình */
  #unity-container{
    padding: 0; /* bỏ safe-area padding để full màn */
  }

  /* Bỏ khóa 9:16 trên mobile, cho canvas fill container */
  #unity-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    max-height: none;
    aspect-ratio: auto; /* override 9/16 */
  }
}