/* Full-canvas game contract.
   Game roots already own the viewport. This last-loaded layer removes the
   smaller presentation frames inside them, while leaving reading and story
   surfaces unchanged. */

.app[data-active-game] {
  --game-canvas-safe-top: max(72px, calc(env(safe-area-inset-top) + 60px));
  --game-canvas-safe-side: max(18px, env(safe-area-inset-left));
  --game-canvas-safe-bottom: max(18px, env(safe-area-inset-bottom));
}

.app[data-active-game]
  > :is(section, main, div)[class*="-level"] {
  box-sizing: border-box;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app[data-active-game]
  > :is(section, main, div)[class*="-level"]
  > :is([class*="-shell"], [class*="-board"]) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh;
  margin: 0 !important;
  padding:
    var(--game-canvas-safe-top)
    var(--game-canvas-safe-side)
    var(--game-canvas-safe-bottom) !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.app[data-active-game]
  > :is(section, main, div)[class*="-level"]
  > [class*="-frame"] {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box;
  width: 100vw !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Phaser game canvases now use the actual browser canvas edge to edge. */
.app[data-active-game]
  :is(
    .moon-aliens-frame,
    .moon-garden-frame,
    .meteor-shield-frame,
    .shooting-star-frame
  ) {
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.app[data-active-game]
  :is(
    .moon-aliens-game,
    .moon-garden-game,
    .meteor-shield-game,
    .shooting-star-game
  ) {
  inset: 0 !important;
}

/* DOM game layouts fill the full screen instead of floating as a centered card. */
.app[data-active-game]
  :is(
    .planet-sort-shell,
    .engine-match-shell,
    .rocket-cause-shell,
    .mashup-rescue-shell,
    .connection-rescue-shell,
    .mission-control-shell,
    .physics-play-shell,
    .solar-sail-shell,
    .alien-rhythm-shell,
    .baby-flight-shell,
    .space-memory-shell
  ) {
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh;
  margin: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.app[data-active-game="planetSort"] .planet-sort-shell {
  height: 100svh;
  padding:
    var(--game-canvas-safe-top)
    clamp(22px, 3vw, 48px)
    var(--game-canvas-safe-bottom) !important;
}

.app[data-active-game="planetSort"] .planet-sort-copy,
.app[data-active-game="planetSort"] .planet-sort-playfield {
  min-height: 0;
  height: 100%;
}

/* Comet Blaster uses a true full-screen Three.js canvas. Its information and
   large action button float above the scene instead of consuming a side column. */
.app[data-active-game="cometBlaster"] .comet-blaster-level {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-height: 0 !important;
  padding: 0 !important;
}

.app[data-active-game="cometBlaster"] .comet-blaster-header {
  position: absolute;
  z-index: 6;
  top: var(--game-canvas-safe-top);
  left: clamp(20px, 4vw, 64px);
  right: clamp(20px, 4vw, 64px);
  width: auto;
  margin: 0;
  pointer-events: none;
}

.app[data-active-game="cometBlaster"] .comet-blaster-header > div:first-child {
  padding: 10px 14px 12px;
  border: 1px solid rgba(105, 237, 255, 0.2);
  border-radius: 18px;
  background: rgba(3, 6, 21, 0.74);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.app[data-active-game="cometBlaster"] .comet-blaster-shell {
  position: absolute;
  inset: 0;
  display: block;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app[data-active-game="cometBlaster"] .comet-blaster-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.app[data-active-game="cometBlaster"] .comet-blaster-top-hud {
  top: 22px;
  left: 210px;
  right: 210px;
}

.app[data-active-game="cometBlaster"] .comet-blaster-aim-cue {
  top: 210px;
  left: clamp(20px, 4vw, 64px);
}

/* Keep the shared escape control off Meteor Shield's canvas-drawn title. */
.app[data-active-game="meteorShield"] .planet-sort-back {
  top: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
}

/* These Phaser scenes draw their own headings in the top-left corner. */
.app[data-active-game="moonAliens"] .planet-sort-back,
.app[data-active-game="moonGarden"] .planet-sort-back,
.app[data-active-game="shootingStar"] .planet-sort-back {
  top: max(108px, calc(env(safe-area-inset-top) + 84px));
}

.app[data-active-game="cometBlaster"] .comet-blaster-control-card {
  position: absolute;
  z-index: 7;
  right: max(18px, env(safe-area-inset-right));
  bottom: var(--game-canvas-safe-bottom);
  width: min(310px, calc(100vw - 36px));
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(105, 237, 255, 0.28);
  border-radius: 24px;
  background: rgba(5, 9, 29, 0.84);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

.app[data-active-game="cometBlaster"] .comet-blaster-message {
  min-height: 76px;
}

.app[data-active-game="cometBlaster"] .comet-blaster-fire {
  min-height: 148px;
}

.app[data-active-game="cometBlaster"] .comet-blaster-fact {
  min-height: 60px;
}

.app[data-active-game="cometBlaster"] .comet-blaster-finish {
  position: fixed;
  inset: clamp(72px, 9vh, 108px) clamp(24px, 8vw, 138px);
}

@media (max-width: 700px) {
  .app[data-active-game] {
    --game-canvas-safe-top: max(66px, calc(env(safe-area-inset-top) + 56px));
    --game-canvas-safe-side: max(10px, env(safe-area-inset-left));
    --game-canvas-safe-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .app[data-active-game]
    > :is(section, main, div)[class*="-level"]
    > :is([class*="-shell"], [class*="-board"]) {
    min-height: 100svh;
    padding:
      var(--game-canvas-safe-top)
      var(--game-canvas-safe-side)
      var(--game-canvas-safe-bottom) !important;
  }

  .app[data-active-game="planetSort"] .planet-sort-shell {
    height: auto;
    min-height: 100svh;
    padding:
      var(--game-canvas-safe-top)
      10px
      var(--game-canvas-safe-bottom) !important;
  }

  .app[data-active-game="planetSort"] .planet-sort-copy,
  .app[data-active-game="planetSort"] .planet-sort-playfield {
    height: auto;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-header {
    top: 70px;
    left: 12px;
    right: 12px;
    align-items: start;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-header > div:first-child {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-kicker,
  .app[data-active-game="cometBlaster"] .comet-blaster-header p {
    display: none;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-header h1 {
    max-width: 220px;
    font-size: clamp(2.25rem, 12vw, 3rem);
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-score {
    min-width: 82px;
    padding: 0.38rem 0.55rem;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-top-hud {
    top: 170px;
    left: 12px;
    right: 12px;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-aim-cue {
    top: 196px;
    left: 12px;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-stage::after {
    bottom: 180px;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-control-card {
    right: 10px;
    bottom: var(--game-canvas-safe-bottom);
    left: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(142px, 0.88fr);
    width: auto;
    gap: 8px;
    padding: 8px;
    border-radius: 20px;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-message {
    min-height: 112px;
    padding: 0.7rem;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-message strong {
    font-size: 0.76rem;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-fire {
    grid-row: auto;
    min-height: 112px;
    border-radius: 20px;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-fire::before {
    width: 112px;
    height: 112px;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-fire::after {
    width: 88px;
    height: 88px;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-fact {
    display: none;
  }

  .app[data-active-game="cometBlaster"] .comet-blaster-finish {
    inset: 64px 10px 10px;
  }
}