/* Lightweight hero image and compact mobile first screen. */
.game-preview {
  background-image: url('/hero-phone-table-fast.webp') !important;
}

.game-shell:not(.active-game) .game-preview {
  pointer-events: none;
}

img[src="/master-rummy-logo.png"] {
  content: url('/master-rummy-logo.webp?v=2');
}

/* The compact navigation is opened with inline styles by the menu button. */
@media (max-width: 850px) {
  .nav-links[style*="display: flex"] {
    z-index: 60;
    gap: 0;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #790609, #a80e12 58%, #650305) !important;
    color: #fff7dc !important;
    border-bottom: 1px solid rgba(255, 216, 107, .5);
    box-shadow: 0 14px 24px rgba(43, 0, 2, .3);
  }

  .nav-links[style*="display: flex"] a {
    display: block;
    padding: 12px 10px;
    color: #fff7dc !important;
    font-size: .98rem;
    line-height: 1.25;
  }

  .nav-links[style*="display: flex"] a + a {
    border-top: 1px solid rgba(255, 240, 195, .18);
  }
}

@media (max-width: 560px) {
  .danmaku-layer {
    display: none;
  }

  .play-hero {
    min-height: auto;
    padding: 12px 0 calc(10px + env(safe-area-inset-bottom));
  }

  .play-hero > .wrap {
    gap: 10px;
  }

  .play-heading h1 {
    margin-bottom: 6px;
    line-height: .94;
  }

  .play-heading p {
    margin: 0 14px 12px;
    line-height: 1.5;
  }

  .game-shell:not(.active-game) {
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 4px 0 26px;
    border-width: 1px;
  }

  .game-preview {
    background-size: 100% auto !important;
    background-position: calc(50% - 13px) center !important;
  }

  .hero-play {
    width: min(238px, 78%) !important;
    min-height: 46px !important;
    margin: 0 auto 10px !important;
    padding: 10px 16px !important;
    font-size: 1.12rem !important;
    position: relative;
    z-index: 30;
    pointer-events: auto;
  }

  .danmaku-composer {
    margin-top: 20px;
  }

  /* The live-table hand needs compact cards with visible corner values. */
  .game-shell.active-game .hand {
    min-height: 96px;
    padding: 6px 0 0;
  }

  .game-shell.active-game .playing-card {
    display: block;
    width: 42px;
    height: 72px;
    margin-left: -16px;
    padding: 7px 3px 3px;
    text-align: left;
  }

  .game-shell.active-game .playing-card:first-child {
    margin-left: 0;
  }

  .game-shell.active-game .playing-card .rank {
    display: block;
    font-size: 1.25rem;
    line-height: 1;
  }

  .game-shell.active-game .playing-card .suit {
    display: block;
    font-size: 1.1rem;
    line-height: 1.05;
  }

  .play-hero.play-mode .playing-card .rank {
    position: absolute;
    top: 7px;
    left: 6px;
  }

  .play-hero.play-mode .playing-card .suit {
    position: absolute;
    top: 29px;
    left: 7px;
  }

  .game-shell.active-game .game-status {
    bottom: 230px;
    max-width: calc(100% - 42px);
  }
}