/* Shared responsive layout for team play and teacher controls. */
html { -webkit-text-size-adjust:100%; }
.teamPage,.teacherPage { padding:clamp(8px,2vw,32px); line-height:1.5; }
.teamPage { min-height:100svh; }
.teamPage .container,.teacherPage main {
  width:100%; min-width:0; padding:clamp(16px,2.5vw,40px);
  border-radius:clamp(12px,1.5vw,24px);
}
.teamPage .container { max-width:560px; }
.teamPage:has(#waitingSection:not([hidden])) { align-items:flex-start; }
.teamPage:has(#waitingSection:not([hidden])) .container,.teacherPage main { max-width:none; }
.teamPage h1,.teacherPage h1 { font-size:clamp(26px,2.7vw,42px); line-height:1.2; overflow-wrap:anywhere; }
.teamPage h2,.teacherPage h2 { font-size:clamp(20px,1.8vw,28px); }
.teamPage p,.teacherPage p,.recipeGame summary { overflow-wrap:anywhere; }
.teacherPage #login { max-width:36rem; }
.teamPage input,.teacherPage input,.teacherPage select { min-width:0; max-width:100%; }
.teamPage button,.teacherPage button { min-height:44px; overflow-wrap:anywhere; }
.teamPage .players { grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.teamPage .roomInfo { padding:12px; }
.teamPage .roomPin { font-size:clamp(28px,3vw,40px); }
.recipeGame { min-width:0; }
.recipeGame .recipeChoices.ingredientCards { grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:clamp(10px,1vw,18px); }
.recipeGame div.recipeChoices:not(.ingredientCards) { grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.recipeGame .ingredientCard { min-height:104px; padding:clamp(12px,1.2vw,20px); font-size:clamp(16px,1.1vw,19px); }
.recipeGame .ingredientScoreMetrics { grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr)); }
.recipeGame .ingredientScoreSummary { padding:clamp(12px,1.5vw,24px); }
.recipeGame .ingredientScoreMetric { min-width:0; }
.recipeGame .ingredientScoreMetric strong { overflow-wrap:anywhere; }
.recipeGame table { table-layout:fixed; }
.recipeGame td,.recipeGame th { white-space:normal; overflow-wrap:anywhere; }
.recipeGame .relativeStandings th:first-child,.recipeGame .relativeStandings td:first-child { width:24%; }
.recipeGame .relativeStandings th:last-child,.recipeGame .relativeStandings td:last-child { width:30%; }
.matchingLayout { grid-template-columns:minmax(0,3fr) minmax(180px,1fr); gap:clamp(12px,2vw,32px); }
.matchingTargets,.quantityBank { min-width:0; }
.quantityBank { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; align-content:start; }
.quantityBank h4 { grid-column:1/-1; overflow-wrap:anywhere; }
.recipeGame .quantityBank .quantityCard { margin:0; height:100%; }
.matchingRow { grid-template-columns:minmax(0,1fr) minmax(120px,1fr) auto; }
.recipeGame .orderCard { padding:clamp(12px,1.2vw,20px); font-size:clamp(16px,1.1vw,19px); }
.teacherPage .roomJoinLayout { grid-template-columns:minmax(0,1fr) minmax(260px,360px); }
.teacherPage .roomJoinLayout > * { min-width:0; }
.teacherPage .qrPanel #joinQr { min-height:0; aspect-ratio:1; }
.teacherPage .card { padding:clamp(12px,1.5vw,24px); }
.teacherPage #recipeSettings { display:grid; grid-template-columns:2fr 1fr; gap:0 24px; grid-template-areas:'recipeLabel teamLabel' 'recipe team' 'note note'; }
.teacherPage label[for="recipeId"] { grid-area:recipeLabel; }
.teacherPage label[for="teamCount"] { grid-area:teamLabel; }
.teacherPage #recipeId { grid-area:recipe; }
.teacherPage #teamCount { grid-area:team; }
.teacherPage #recipeSettings > p { grid-area:note; }
@media (min-width:1000px) {
  .teamPage #waitingSection:has(> #recipeGame:not([hidden])) { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,260px); column-gap:28px; align-items:start; }
  .teamPage #waitingSection > * { min-width:0; }
  .teamPage .welcome { grid-column:1; grid-row:1; }
  .teamPage .roomInfo { grid-column:2; grid-row:1/3; }
  .teamPage #connectionStatus { grid-column:1; grid-row:2; }
  .teamPage #recipeGame { grid-column:1; grid-row:3; }
  .teamPage .teamSidebar { grid-column:2; grid-row:3; }
  .teamPage #waitingSection:has(> #joinWelcome[hidden]) #connectionStatus { grid-row:1; }
  .teamPage #waitingSection:has(> #joinWelcome[hidden]) #recipeGame,.teamPage #waitingSection:has(> #joinWelcome[hidden]) .teamSidebar { grid-row:2; }
}
@media (max-width:700px) {
  .teamPage .roomInfo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; align-items:center; font-size:14px; }
  .teamPage .roomInfo > div:first-child { grid-column:1; grid-row:1; }
  .teamPage #participantCountLabel { grid-column:2; grid-row:1; }
  .teamPage #roomPin { grid-column:1; grid-row:2; font-size:clamp(22px,6vw,30px); letter-spacing:2px; margin:0; }
  .teamPage #playerCount { grid-column:2; grid-row:2; margin:0; }
  .recipeGame .ingredientScoreMetrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .teacherPage .roomJoinLayout { grid-template-columns:minmax(0,1fr); gap:16px; }
  .teacherPage .qrPanel { width:100%; max-width:360px; justify-self:center; }
  .matchingLayout { grid-template-columns:minmax(0,2fr) minmax(90px,1fr); gap:10px; }
  .matchingRow { grid-template-columns:minmax(0,1fr) auto; }
  .matchingRow .ingredientName { grid-column:1/-1; }
  .quantityBank { grid-template-columns:minmax(0,1fr); gap:8px; }
  .recipeGame .quantityTarget,.recipeGame .quantityCard { font-size:15px; padding:10px; }
  .teacherPage #recipeSettings { display:block; }
  .teacherPage #controls > button,.teacherPage #practiceControls > button { width:100%; margin:8px 0; }
  .teacherPage .pin { font-size:clamp(28px,9vw,48px); letter-spacing:clamp(2px,1vw,6px); }
}
@media (max-width:380px) {
  .recipeGame .ingredientCards { grid-template-columns:minmax(0,1fr); }
  .recipeGame .ingredientScoreMetric { padding:8px; }
  .recipeGame .ingredientScoreMetric span { font-size:13px; }
}
@media print {
  .teamPage,.teacherPage { padding:0; background:white; }
  .teamPage .container,.teacherPage main { padding:0; box-shadow:none; }
}