@media (max-width: 1180px) {
  .game-layout {
    grid-template-columns: 300px 1fr;
  }

  .side-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .app-shell {
    padding: 12px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .player-stats {
    justify-content: flex-start;
  }

  .game-layout {
    grid-template-columns: 1fr;
  }

  .environment-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-scene {
    min-height: 420px;
  }

  .rod-image {
    right: -14%;
    top: 30%;
    width: 390px;
  }

  .line-visual {
    right: 35%;
  }

  .float-bobber {
    right: calc(35% - 18px);
  }

  .float-focus-ring {
    right: calc(35% - 48px);
  }

  .angler-avatar {
    right: 2%;
    top: 31%;
    transform: scale(0.82);
    transform-origin: top right;
  }

  .hook-dot {
    right: calc(35% - 3px);
  }

  .control-dock,
  .fight-panel {
    grid-template-columns: 1fr 1fr;
  }

  .signal-panel {
    grid-template-columns: 38px 1fr;
    padding: 10px 12px;
  }

  .primary-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .control-dock,
  .fight-panel {
    grid-template-columns: 1fr;
  }

  .account-actions {
    grid-template-columns: 1fr;
  }
}