@container game (max-height: 470px) {
  .select-panel { max-height: 94cqh; overflow: auto; }
  .hero-card { min-height: 145px; }
  .hero-card img { height: 105px; }
  .hero-card span { display: none; }
  .draft-actions { flex-direction: row; align-items: center; }
  .draft-action { width: auto; min-width: 150px; min-height: 42px; }
  .stick, .stick--aim { width: 96px; height: 96px; }
  .action-cluster { height: 125px; }
  .player-bars { width: 240px; }
  .choice-stack { top: 72px; width: min(330px, 40cqw); max-height: calc(100cqh - 220px); overflow-y: auto; scrollbar-width: thin; }
  .choice-tray { padding: 7px; }
  .choice-tray > p { margin-bottom: 4px; }
  .choice-tray > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .choice-tray button.option { min-width: 0; min-height: 52px; padding: 5px; gap: 2px; }
  .choice-tray button.option > i { width: 24px; height: 24px; }
  .choice-tray button.option strong { font-size: 10px; line-height: 1.2; }
  .choice-tray button.option small { display: block; font-size: 9px; line-height: 1.2; }
  .choice-tray .chip { min-height: 22px; margin-top: 4px; padding: 4px 7px; }
}

@container game (max-height: 520px) {
  .screen { padding: 10px max(14px, var(--safe-right)) 10px max(14px, var(--safe-left)); }
  .select-panel { padding: 12px 18px; }
  .select-panel h2 { font-size: 26px; }
  .hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0; max-height: none; overflow: visible; }
  .hero-card { min-height: 122px; }
  .hero-card img { height: 102px; }
  .hero-card div { inset: auto 9px 8px; }
  .hero-card strong { font-size: 15px; }
  .hero-card small { font-size: 7px; margin-top: 3px; }
  .hero-kit, .game-guide { font-size: 10px; margin: 5px 0; }
  .draft-meta { flex-direction: row; margin-top: 8px; }
  .draft-actions { margin-top: 5px; }
  .select-status { margin-bottom: 4px; font-size: 11px; }
  .topbar { top: max(5px, var(--safe-top)); transform: translateX(-50%) scale(.78); transform-origin: top center; }
  .network { top: max(52px, calc(var(--safe-top) + 48px)); left: max(8px, var(--safe-left)); padding: 5px 7px; }
  #minimap { top: max(78px, calc(var(--safe-top) + 74px)); left: max(8px, var(--safe-left)); width: clamp(112px, 16cqw, 146px); height: auto; aspect-ratio: 16 / 9; }
  .objective-status { top: max(166px, calc(var(--safe-top) + 162px)); left: max(8px, var(--safe-left)); }
  .stick, .stick--aim { width: 102px; height: 102px; }
  .stick { left: max(18px, var(--safe-left)); bottom: max(17px, var(--safe-bottom)); }
  .action-cluster { right: max(15px, var(--safe-right)); bottom: max(14px, var(--safe-bottom)); width: 204px; height: 132px; }
  .stick--aim { right: 0; bottom: 0; left: auto; }
  .skill { width: 56px; height: 56px; }
  #skill-1 { left: 20px; bottom: 61px; }
  #skill-2 { left: 4px; bottom: 0; }
  .player-bars { bottom: max(8px, var(--safe-bottom)); width: min(244px, 32cqw); padding: 7px 9px; }
  .choice-stack { top: max(64px, calc(var(--safe-top) + 60px)); right: max(8px, var(--safe-right)); width: min(330px, 39cqw); max-height: calc(100cqh - 206px); overflow-y: auto; touch-action: pan-y; }
  .announcement { top: 19%; font-size: 11px; }
}

@container game (max-height: 360px) {
  .select-panel { padding: 8px 12px; }
  .select-panel h2 { font-size: 22px; }
  .hero-grid { margin: 6px 0; }
  .hero-card { min-height: 96px; }
  .hero-card img { height: 88px; }
  .hero-card strong { font-size: 13px; }
  .hero-kit, .game-guide { font-size: 9px; margin: 4px 0; }
  .draft-actions { position: sticky; bottom: -8px; padding: 5px 0; background: #071212; }
  .draft-action { min-height: 44px; }
}

@container game (max-width: 620px) and (max-height: 520px) {
  .player-bars { left: calc(50% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}