/* Desktop scenes share the original 1672 × 941 frame and never upscale. */
@media (min-width:901px) {
  #game {
    --scene-width:min(1672px,100vw,177.6833157svh);
    --scene-height:calc(var(--scene-width) * 941 / 1672);
  }
  #game > .reference-stage {
    width:var(--scene-width);
    height:var(--scene-height);
    max-width:1672px;
    max-height:941px;
  }
  #game.bonus-mode {
    display:grid;
    align-content:center;
    justify-items:center;
  }
  #game.bonus-mode > #bonus-scene {
    position:relative;
    inset:auto;
    width:var(--scene-width);
    height:var(--scene-height);
    min-width:0;
    min-height:0;
    max-width:1672px;
    max-height:941px;
    margin:0;
    padding:0;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 0 80px #0009;
  }
  /* Keep legacy stake cards clear of the floating icon cluster. */
  #game.bonus-mode > #bonus-scene:not(.snake-bonus-host) .fl-bonus-header {
    padding-right:112px;
  }
  #game > .topbar,
  #game.bonus-mode > .topbar {
    position:absolute;
    top:calc((100svh - var(--scene-height)) / 2);
    right:max(0px,calc((100% - var(--scene-width)) / 2));
    bottom:auto;
    left:auto;
    width:auto;
  }
  #game > #transition {
    position:absolute;
    inset:auto;
    left:50%;
    top:50%;
    width:var(--scene-width);
    height:var(--scene-height);
    transform:translate(-50%,-50%);
  }
}

/* Snake owns its portrait content; remove only the legacy header reservation. */
@media (max-width:900px) {
  #game.bonus-mode > #bonus-scene.snake-bonus-host {
    position:relative;
    inset:auto;
    width:100%;
    margin:0;
  }
  #game.bonus-mode:has(> #bonus-scene.snake-bonus-host) > .topbar {
    position:absolute;
    inset:0 0 auto auto;
    width:max-content;
    height:44px;
    padding:8px 12px;
    background:none;
    border:0;
    box-shadow:none;
  }
}

/* Keep the sanctuary artwork clear even when wheel testing is enabled. */
#game.bonus-mode:has(> #bonus-scene.snake-bonus-host) > .topbar {
  background:none;
  border:0;
  box-shadow:none;
  z-index:30;
}
#game.bonus-mode:has(> #bonus-scene.snake-bonus-host) #dev-mode-indicator {
  display:none;
}
body:has(#game.bonus-mode > #bonus-scene.snake-bonus-host) > .dev-tools {
  display:none;
}