@media (min-width: 360px) {
  .level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .overlay {
    padding:
      calc(10px + var(--safe-top))
      max(10px, var(--safe-right))
      calc(10px + var(--safe-bottom))
      max(10px, var(--safe-left));
    backdrop-filter: blur(5px) saturate(0.9);
    -webkit-backdrop-filter: blur(5px) saturate(0.9);
  }

  .panel {
    --popup-gap: 13px;
    --popup-pad-x: clamp(22px, 6.8vw, 30px);
    width: min(430px, 100%);
    max-height: calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom));
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .panel h3 {
    font-size: clamp(1.65rem, 7.8vw, 2.05rem);
  }

  .panel .eyebrow {
    font-size: 0.72rem;
  }

  .panel-copy {
    max-width: 34ch;
    line-height: 1.45;
  }

  .panel-medallion {
    width: clamp(76px, 21vw, 88px);
    height: clamp(76px, 21vw, 88px);
  }

  .panel .btn {
    max-width: 350px;
    min-height: 56px;
    border-radius: 18px;
    font-size: 0.86rem;
  }

  .hud {
    gap: 8px;
    padding-top: calc(8px + var(--safe-top));
    padding-bottom: 8px;
  }

  .icon-btn,
  .text-btn {
    flex-shrink: 0;
  }

  .shot-hint {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  .level-card {
    min-height: 122px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .level-card small {
    font-size: 0.64rem;
  }

  .level-skill {
    left: 12px;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .home-actions {
    width: min(94%, 430px);
    gap: clamp(9px, 1.25vh, 13px);
  }

  .home-play-btn {
    width: min(82%, 340px);
    min-height: clamp(56px, 6.8vh, 64px);
    font-size: clamp(1.55rem, 6vw, 1.95rem);
  }

  .home-utilities {
    width: min(90%, 390px);
    gap: 8px;
  }

  .home-secondary-btn {
    min-height: 48px;
    font-size: clamp(0.72rem, 2.55vw, 0.86rem);
  }

  .home-collection {
    width: min(68%, 260px);
    min-height: 48px;
  }
}

@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  #app {
    display: flex;
    justify-content: center;
  }

  #app[data-screen="loading"] {
    --desktop-scene: url("../assets/images/backgrounds/home-bg.webp");
  }

  #app[data-screen="home"] {
    --desktop-scene: url("../assets/images/backgrounds/home-lounge.webp");
  }

  #app[data-screen="levels"],
  #app[data-screen="game"] {
    --desktop-scene: url("../assets/images/backgrounds/gameplay-navy.webp");
  }

  #app::before,
  #app::after {
    content: "";
    position: absolute;
    inset: -36px;
    z-index: 0;
    pointer-events: none;
  }

  #app::before {
    background:
      linear-gradient(90deg, rgba(3, 10, 16, 0.2), rgba(4, 18, 27, 0.68) 50%, rgba(3, 10, 16, 0.2)),
      var(--desktop-scene) center / cover no-repeat;
    filter: blur(10px) saturate(0.92);
    opacity: 0.78;
    transform: scale(1.04);
  }

  #app::after {
    inset: -18%;
    background:
      radial-gradient(circle at 22% 34%, rgba(216, 174, 84, 0.2), transparent 20%),
      radial-gradient(circle at 78% 68%, rgba(54, 194, 185, 0.18), transparent 24%);
    mix-blend-mode: screen;
    opacity: 0.72;
  }

  .screen {
    width: min(480px, 100%);
    margin: 0 auto;
    box-shadow:
      -28px 0 70px rgba(0, 0, 0, 0.35),
      28px 0 70px rgba(0, 0, 0, 0.35);
  }

  .world-list {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  .screen {
    width: min(560px, 42vw);
  }

  .home-actions {
    max-width: 470px;
  }
}

@media (any-pointer: coarse) {
  #app {
    display: block;
  }

  #app::before,
  #app::after {
    content: none;
  }

  .screen {
    width: 100%;
    max-width: none;
    box-shadow: none;
  }
}

@media (max-height: 700px) and (orientation: landscape) {
  .logo-title {
    font-size: clamp(2rem, 8vh, 3rem);
  }

  .home-actions {
    gap: 6px;
  }

  .home-board-art {
    width: clamp(230px, 38vh, 300px);
    margin-top: 0;
  }

  .home-ctm-logo {
    width: 62px;
    height: 62px;
  }

  .home-title-carrom {
    font-size: 2.2rem;
  }

  .home-title-master {
    font-size: 1.82rem;
  }

  .home-tagline {
    font-size: 0.7rem;
  }

  .home-play-btn {
    min-height: 52px;
    font-size: 1.5rem;
  }

  .home-secondary-btn {
    min-height: 44px;
  }

  .home-collection {
    min-height: 44px;
  }

  .panel {
    padding-top: 22px;
    padding-bottom: 18px;
    gap: 9px;
  }

  .panel-medallion,
  .panel-medallion-success,
  .panel-medallion-fail,
  .panel-medallion-reward {
    width: 60px;
    height: 60px;
  }

  .panel h3 {
    font-size: 1.45rem;
  }

  .panel-copy {
    line-height: 1.35;
  }

  .panel .btn {
    min-height: 46px;
  }
}

@media (max-height: 700px) and (orientation: portrait) {
  .home-board-art {
    width: min(92%, clamp(270px, 41vh, 410px));
  }

  .home-ctm-logo {
    width: clamp(64px, 9.5vh, 82px);
    height: clamp(64px, 9.5vh, 82px);
  }

  .home-title-carrom {
    font-size: clamp(2.25rem, 6.8vh, 3.55rem);
  }

  .home-title-master {
    font-size: clamp(1.75rem, 7.8vw, 2.95rem);
  }

  .panel {
    padding-top: 26px;
    padding-bottom: 22px;
  }
}

.shot-hint,
.load-status,
.panel-copy {
  font-size: clamp(0.78rem, calc(0.7rem + 0.4vw), 1rem);
}

.hud-objective {
  font-size: clamp(0.8rem, calc(0.68rem + 0.6vw), 0.95rem);
}

@media (max-height: 760px) and (orientation: landscape) {
  :root {
    --hud-h: 60px;
    --hint-h: 46px;
  }

  .hud-level {
    display: none;
  }

  .hud {
    min-height: 82px;
    padding-top: calc(7px + var(--safe-top));
    padding-bottom: 7px;
  }

  .shot-hint {
    padding-top: 6px;
    padding-bottom: 7px;
  }

  .game-instruction {
    min-height: 44px;
  }
}