/* The five-player boards stay inside the fixed gameplay viewport. */
#game .team-head small { display: none; }

#game .budget-area > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

#game .budget-area .tiny-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  white-space: nowrap;
}

#game .budget { line-height: 1; }

#game .roster-heading {
  align-items: center;
  gap: 8px;
  padding: 2px 16px 9px;
  font-size: 10px;
  letter-spacing: 1.3px;
}

#game .roster-heading span:last-child { white-space: nowrap; }

#game .roster {
  margin-inline: 12px;
  gap: 8px;
}

#game .roster-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 11px;
  min-width: 0;
  padding: 7px 11px;
}

#game .slot-label {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--team-color) 12%, transparent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1px;
}

#game .empty .slot-label {
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
}

#game .roster-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 650;
}

#game .roster-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .15px;
}

#game .roster-score { line-height: 1; }
#game .move-hint { font-size: 17px; }

#game .team-total {
  min-height: 29px;
  padding: 6px 15px;
}

@media (min-width: 761px) and (max-height: 680px) {
  #game .roster { gap: 5px; }
  #game .roster-row { padding-block: 4px; }
  #game .slot-label { width: 26px; height: 26px; }
  #game .roster-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
}

@media (max-width: 760px) {
  body:has(#game:not([hidden])):has(#results[hidden]) > header { height: 56px; min-height: 56px; padding: 0 12px; }
  body:has(#game:not([hidden])):has(#results[hidden]) > main { padding: 6px 10px 8px; }
  #game .heading { display: none; }
  #game .round-bar { min-height: 30px; padding: 0 0 6px; margin: 0; gap: 6px; border-top: 0; }
  #game .phase { font-size: 12px; gap: 5px; }
  #game .phase-number { width: 20px; height: 20px; font-size: 10px; }
  #game .progress-track { max-width: 70px; }
  #game #signed-count { font-size: 9px; white-space: nowrap; }
  #game .bottom-strip { display: none; }
  body:has(#game:not([hidden])):has(#results[hidden]) footer { display: none; }
  body:has(#game:not([hidden])):has(#results[hidden]) #game .arena { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(clamp(280px, 45vh, 350px), .9fr) minmax(0, 1fr); gap: 8px; }
  #game .auction { --control-track: 96px; --message-track: 30px; padding: 7px 10px; row-gap: 3px; }
  #game .auction-top { font-size: 10px; }
  #game .auction-top .pill { font-size: 9px; padding: 3px 6px; }
  #game .auction #card-zone { padding: 3px 0; }
  #game .auction .announcement { font-size: 11px; }
  #game .player-card, #game .mystery { width: min(190px, 74%); height: min(100%, 220px)!important; min-height: 0!important; max-height: 220px!important; padding: 10px; scale: 1; }
  #game .player-card .card-top { top: 9px; left: 12px; right: 12px; }
  #game .identity-card .card-position { font-size: 15px; line-height: 1; }
  #game .identity-card .player-monogram { height: auto; min-height: 0; margin: 25px 0 2px; font-size: clamp(32px, 5vh, 48px); line-height: 1; }
  #game .identity-card .card-name { height: auto; min-height: 0; margin: auto 0 3px; font-size: 19px; line-height: 1.05; flex: 1; }
  #game .identity-card .card-meta { height: 16px; min-height: 16px; font-size: 10px; }
  #game .toss-coin { width: 78px; height: 78px; margin-bottom: 5px; font-size: 38px; }
  #game .toss-area h2 { font-size: 22px; }
  #game .toss-area p { display: none; }
  #game .auction #auction-controls { padding-top: 3px; }
  #game #auction-controls:not(:has(.bid-top,.lineup-ready-actions,.free-turn)) > .primary:first-child { margin-top: 34px; }
  html.glass-design #game #auction-controls .primary { min-height: 44px; height: auto; padding: 9px 10px; font-size: 14px; }
  #game #auction-controls:has(.bid-top) { grid-template-rows: 36px 48px; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  #game .bid-top strong { font-size: 26px; }
  #game .bid-top small { font-size: 10px; }
  #game .turn-label { font-size: 12px; }
  #game .bid-buttons { gap: 6px; }
  html.glass-design #game .bid-buttons .quiet { min-width: 56px; min-height: 44px; padding: 8px; font-size: 13px; }
  #game .all-in { min-height: 44px; font-size: 12px; padding: 8px 6px; }
  #game #auction-controls:has(.free-turn) .free-turn { height: 34px; min-height: 34px; font-size: 13px; }
  #game .lineup-stage { gap: 2px; }
  #game .lineup-stage-kicker, #game .lineup-stage-status { display: none; }
  #game .lineup-stage-mark { font-size: 28px; }
  #game .lineup-stage h2 { font-size: 23px; }
  #game .lineup-stage p { font-size: 11px; }
  #game .lineup-ready-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 28px; }
  #game .team-head { min-height: 32px; height: 32px; padding: 3px 7px; gap: 5px; flex: none; }
  #game .manager-number { width: 23px; height: 25px; font-size: 17px; }
  #game .team-head h2 { font-size: 15px; }
  #game .team-tag { display: none; }
  #game .budget-area { min-height: 30px; padding: 3px 8px; flex: none; }
  #game .budget-area > div { gap: 4px; }
  #game .budget-area .tiny-label { font-size: 9px; letter-spacing: .5px; }
  #game .budget { font-size: 23px; }
  #game .budget small { display: inline; font-size: 10px; margin: 0 0 0 3px; }
  #game .roster-heading { display: flex; padding: 4px 8px 5px; min-height: 22px; font-size: 9px; letter-spacing: .1px; flex: none; }
  #game .roster-heading span:first-child { display: none; }
  #game .roster-heading span:last-child { color: var(--team-color); }
  #game .roster { margin-inline: 5px; gap: 4px; min-height: 0; grid-template-rows: repeat(5, minmax(44px, 1fr)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--team-color) transparent; }
  #game .roster-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    column-gap: 5px;
    min-height: 44px;
    padding: 3px 5px;
    touch-action: pan-y;
  }
  #game .roster-row.repositionable:not(.empty) { touch-action: pan-y; }
  #game .slot-label {
    width: 24px;
    height: 28px;
    border-radius: 5px;
    font-size: 11px;
  }
  #game .roster-name { font-size: 13px; line-height: 1.15; }
  #game .roster-name small { display: block; font-size: 10px; margin-top: 3px; }
  #game .roster-score { font-size: 18px; }
  #game .move-hint { display: grid; place-items: center; min-width: 28px; min-height: 40px; margin: -2px -4px -2px 0; font-size: 18px; touch-action: none; }
  html.glass-design #game .roster-row.move-destination { border-color: color-mix(in srgb, var(--team-color) 65%, transparent); background: color-mix(in srgb, var(--team-color) 9%, var(--panel)); }
  #game .team-total { min-height: 20px; padding: 3px 7px; font-size: 9px; flex: none; }
  html.glass-design .start-row .primary { width: 100%; flex: none; min-height: 48px; }
  html.glass-design .start-row .online-start { width: 100%; min-height: 48px; }
}

@media (max-width: 760px) and (max-height: 700px) {
  #game .identity-card .player-monogram { display: none; }
  #game .identity-card .card-name { margin-top: 24px; display: grid; place-items: center; }
}

@media (max-width: 360px) {
  #game .roster-row { column-gap: 3px; padding-inline: 4px; }
  #game .roster-name { font-size: 12px; }
  #game .budget-area .tiny-label { font-size: 8px; }
  #game .phase { font-size: 11px; }
  #game .round-bar .online-room-status { max-width: 106px; font-size: 9px; }
}

/* Short landscape windows keep the same three panels with usable controls. */
@media (min-width: 761px) and (max-height: 560px) {
  body:has(#game:not([hidden])):has(#results[hidden]) > header { height: 48px; min-height: 48px; }
  body:has(#game:not([hidden])):has(#results[hidden]) > main { padding: 6px 12px 8px; }
  #game .heading, #game .bottom-strip { display: none; }
  #game .round-bar { min-height: 30px; padding: 0 0 6px; margin: 0; border-top: 0; }
  #game .arena { gap: 10px; }
  #game .auction { --control-track: 96px; --message-track: 26px; padding: 7px 10px; }
  #game .auction-top { font-size: 10px; }
  #game .pill { font-size: 9px; padding: 3px 6px; }
  #game .player-card, #game .mystery { width: min(180px, 82%); height: min(100%, 170px)!important; min-height: 0!important; max-height: 170px!important; padding: 10px; scale: 1; }
  #game .player-card .card-top { top: 9px; left: 12px; right: 12px; }
  #game .identity-card .card-position { font-size: 15px; }
  #game .identity-card .player-monogram { display: none; }
  #game .identity-card .card-name { height: auto; min-height: 0; margin: 24px 0 3px; font-size: 19px; line-height: 1.05; flex: 1; }
  #game .identity-card .card-meta { height: 16px; min-height: 16px; font-size: 10px; }
  #game .toss-coin { width: 74px; height: 74px; margin-bottom: 5px; font-size: 38px; }
  #game .toss-area h2 { font-size: 20px; }
  #game .toss-area p { display: none; }
  #game #auction-controls:not(:has(.bid-top,.lineup-ready-actions,.free-turn)) > .primary:first-child { margin-top: 34px; }
  html.glass-design #game #auction-controls .primary { min-height: 44px; padding: 9px 10px; font-size: 14px; }
  #game #auction-controls:has(.bid-top) { display: grid; grid-template-areas: 'bid bid' 'actions allin'; grid-template-rows: 36px 48px; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 5px; }
  #game .bid-top { grid-area: bid; align-items: center; margin: 0; }
  #game .bid-top strong { font-size: 26px; }
  #game .bid-top small { font-size: 10px; }
  #game .turn-label { font-size: 12px; }
  #game .bid-buttons { grid-area: actions; gap: 5px; }
  html.glass-design #game .bid-buttons .quiet { min-width: 48px; min-height: 44px; padding: 6px; font-size: 13px; }
  #game .all-in { grid-area: allin; align-self: center; min-height: 44px; padding: 6px 3px; margin: 0; font-size: 12px; white-space: nowrap; }
  #game .control-hint { display: none; }
  #game #auction-controls:has(.free-turn) .free-turn { height: 34px; min-height: 34px; font-size: 13px; }
  #game .lineup-stage-kicker, #game .lineup-stage-status { display: none; }
  #game .lineup-stage-mark { font-size: 24px; }
  #game .lineup-stage h2 { font-size: 23px; }
  #game .lineup-stage p { font-size: 11px; }
  #game .lineup-ready-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 28px; }
  #game .team { display: flex; flex-direction: column; }
  #game .team-head { min-height: 32px; height: 32px; padding: 3px 7px; gap: 5px; }
  #game .manager-number { width: 23px; height: 25px; font-size: 17px; }
  #game .team-head h2 { font-size: 17px; }
  #game .team-tag { display: none; }
  #game .budget-area { min-height: 30px; padding: 3px 8px; }
  #game .budget { font-size: 25px; }
  #game .roster-heading { padding: 4px 8px 5px; font-size: 9px; }
  #game .roster { flex: 1; min-height: 0; margin-inline: 5px; gap: 4px; grid-template-rows: repeat(5, minmax(44px, 1fr)); overflow-y: auto; overscroll-behavior: contain; }
  #game .roster-row { min-height: 44px; padding: 3px 5px; column-gap: 5px; }
  #game .roster-row.repositionable:not(.empty) { touch-action: pan-y; }
  #game .roster-name { font-size: 13px; }
  #game .roster-name small { font-size: 10px; margin-top: 3px; }
  #game .move-hint { min-width: 28px; min-height: 40px; touch-action: none; }
  #game .team-total { min-height: 20px; padding: 3px 7px; font-size: 9px; }
}