@layer layout;

@layer layout {
  body {
    height: 100dvh;
    overflow: hidden;
    background: #000;
    display: grid;
    grid-template-areas: "viewport";
    place-items: center;
  }

  #loading-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-ui);
    opacity: 1;
    transition: opacity 0.5s ease-out, display 0.5s allow-discrete;

    &.hidden {
      opacity: 0;
      display: none;
    }

    /* CSS Snapshot 2026: Animasi untuk elemen yang baru saja dirender (diubah dari display: none) */
    @starting-style {
      & {
        opacity: 0;
      }
    }
  }

  main, #game-wrapper {
    grid-area: viewport;
    position: relative;
    width: var(--canvas-width);
    height: var(--canvas-height);
    max-width: 100vw;
    max-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;

    & #game-canvas {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;

      &:fullscreen {
        width: 100vw;
        height: 100vh;
      }
    }

    /* Native CSS Nesting & :has pseudo-class */
    &:has(#game-canvas:focus),
    &:has(#game-canvas.pointer-locked) {
      & #game-canvas {
        cursor: none;
      }
      & #click-to-play {
        display: none;
      }
    }
  }

  #click-to-play {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-ui);
    text-align: center;
    cursor: pointer;
  }

  #hud-overlay {
    grid-area: viewport;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;

    & > * {
      pointer-events: auto;
    }
  }

  @media (max-width: 800px) {
    main, #game-wrapper, #hud-overlay {
      transform: scale(min(calc(100vw / 800), calc(100vh / 500)));
      transform-origin: center center;
    }
  }
}