.manager-roster-preview {
  position: fixed; inset: 0; z-index: 83; display: grid; grid-template-rows: auto 1fr;
  color: var(--text-main); background: #840F0E; animation: managerRosterIn 240ms ease-out both;
}

.manager-preview-header {
  position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 46px 1fr 46px;
  align-items: center; gap: 10px; min-height: 84px; padding: max(14px, env(safe-area-inset-top)) 14px 12px;
  background: #1D1D1E; border-bottom: 1px solid rgba(253, 255, 255, 0.12); text-align: center;
}

.manager-preview-header h1 {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Maratype", Impact, sans-serif; font-size: clamp(28px, 8vw, 52px);
  line-height: 0.92; text-transform: uppercase;
}

.manager-preview-header p { margin: 4px 0 0; color: rgba(253, 255, 255, 0.76); font-family: "Heading Now 44 Regular", Arial Narrow, sans-serif; text-transform: uppercase; }
.manager-preview-back, .manager-preview-close { width: 44px; height: 44px; border: 1px solid rgba(253, 255, 255, 0.18); border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.24); font-size: 28px; cursor: pointer; }
.manager-preview-body { overflow-y: auto; padding: 16px clamp(10px, 3vw, 16px) calc(28px + env(safe-area-inset-bottom)); }
.manager-roster-preview .tactical-board { min-height: 100%; }
@keyframes managerRosterIn { from { transform: translateX(34px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (min-width: 1024px) {
  .manager-roster-preview {
    inset: 24px auto; left: 50%; width: min(920px, calc(100vw - 48px)); min-height: 0;
    max-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid rgba(253, 255, 255, 0.12);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62); transform: translateX(-50%);
    animation: managerRosterDesktopIn 240ms ease-out both;
  }

  .manager-preview-header { min-height: 92px; padding: 18px 22px 16px; }
  .manager-preview-header h1 { font-size: clamp(40px, 5vw, 64px); }
  .manager-preview-body { display: grid; justify-items: center; padding: 22px 28px 34px; }
  .manager-roster-preview .tactical-board { width: min(700px, 100%); min-height: auto; }
}

@keyframes managerRosterDesktopIn {
  from { transform: translateX(calc(-50% + 34px)); opacity: 0; }
  to { transform: translateX(-50%); opacity: 1; }
}