/* Tug of War v2: responsive classroom view; only active Tug stages are affected. */
.tug-saved-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.tug-saved-row select{min-width:0;width:100%;min-height:43px}
.tug-saved-row .button{min-height:43px;white-space:nowrap}
.tug-host-settings label[hidden],#tugPenaltyRow[hidden]{display:none!important}
.tug-lobby-copy .tug-host-only{margin:0 0 14px}
.tug-teacher-head>div:last-child{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.tug-teacher-head>div:last-child .button{white-space:nowrap}
.tug-v2-status{font-weight:750;line-height:1.4;font-size:.84rem;text-align:center;padding:10px 16px;background:#edf5ff;color:#20527e;border-bottom:1px solid #d1e2f8}
.tug-v2-feedback{display:block;font-size:.79rem;font-weight:750;line-height:1.5;color:#e0efff;margin-top:9px}
.tug-player-rope{min-width:0}
.custom-game-live{position:relative}
.tug-v2-live-overlay{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;background:rgba(5,18,39,.88);color:white;backdrop-filter:blur(9px);border-radius:14px;pointer-events:auto}
.tug-v2-live-overlay[hidden]{display:none!important}
.tug-v2-live-overlay strong{font-size:clamp(3.3rem,12vw,9rem);line-height:1;font-weight:950;text-shadow:0 8px 35px #001329}
.tug-v2-live-overlay span{font-size:clamp(.9rem,2vw,1.3rem);font-weight:800;letter-spacing:.06em}
#tugTeacherResults .tug-result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
@media screen {
  #gamesView:has(> #customGameStage:not([hidden]) #tugTeacherLive:not([hidden])),
  #gamesView:has(> #customGameStage:not([hidden]) #customGameLive:not([hidden]) #tugWorld:not([hidden])){
    width:100%;max-width:none;margin:0;padding:10px clamp(10px,1.2vw,24px) 16px;
  }
  #gamesView:has(> #customGameStage:not([hidden]) #tugTeacherLive:not([hidden])) > .games-heading,
  #gamesView:has(> #customGameStage:not([hidden]) #customGameLive:not([hidden]) #tugWorld:not([hidden])) > .games-heading,
  #gamesView:has(> #customGameStage:not([hidden]) #tugTeacherLive:not([hidden])) > .privacy,
  #gamesView:has(> #customGameStage:not([hidden]) #customGameLive:not([hidden]) #tugWorld:not([hidden])) > .privacy{display:none!important}
  #gamesView:has(> #customGameStage:not([hidden]) #tugTeacherLive:not([hidden])) > #customGameStage,
  #gamesView:has(> #customGameStage:not([hidden]) #customGameLive:not([hidden]) #tugWorld:not([hidden])) > #customGameStage{
    width:100%;max-width:none;margin:0;min-height:calc(100dvh - 110px);display:flex;flex-direction:column;min-width:0;
  }
  #customGameStage:has(#tugTeacherLive:not([hidden])) #tugTeacherLive{
    display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;
  }
  #customGameStage:has(#tugTeacherLive:not([hidden])) #tugTeacherArena{flex:1;min-height:clamp(280px,39dvh,560px);}
  #customGameStage:has(#tugTeacherLive:not([hidden])) #tugScoreboard{width:100%;max-width:none;}
  #customGameStage:has(.custom-game-live:not([hidden]) #tugWorld:not([hidden])) .custom-game-live{display:flex;flex-direction:column;flex:1;}
  #customGameStage:has(.custom-game-live:not([hidden]) #tugWorld:not([hidden])) #tugWorld{min-height:clamp(260px,42dvh,520px)!important;}
  #customGameStage:has(.custom-game-live:not([hidden]) #tugWorld:not([hidden])) .custom-challenge{padding:14px 20px;}
  #customGameStage:fullscreen{overflow-y:auto;background:#09182c;min-height:100dvh;}
}
@media(max-width:850px){
 .tug-saved-row{grid-template-columns:minmax(0,1fr) repeat(2,auto)}
 .tug-teacher-head>div:last-child{justify-content:flex-start}
 #customGameStage:has(#tugTeacherLive:not([hidden])) #tugTeacherArena{min-height:285px}
}
@media(max-width:560px){
 .tug-saved-row{grid-template-columns:1fr 1fr}
 .tug-saved-row select{grid-column:1/-1}
 .tug-saved-row .button{min-width:0}
 .tug-host-settings{grid-template-columns:minmax(0,1fr)!important}
 .tug-host-settings>*{grid-column:auto!important}
 .tug-v2-status{font-size:.73rem}
 .tug-teacher-head .button{font-size:.75rem;padding:9px}
 #customGameStage:has(.custom-game-live:not([hidden]) #tugWorld:not([hidden])) #tugWorld{min-height:300px!important}
}
@media print{
 #customGameStage:has(#tugTeacherResults:not([hidden])) .game-stage-top,
 #customGameStage:has(#tugTeacherResults:not([hidden])) .tug-teacher-head .button,
 #customGameStage:has(#tugTeacherResults:not([hidden])) .tug-result-actions,
 #customGameStage:has(#tugTeacherResults:not([hidden])) .tug-teacher-arena{display:none!important}
 #customGameStage:has(#tugTeacherResults:not([hidden])){width:100%;box-shadow:none;border:0;}
}
@media(prefers-reduced-motion:reduce){.tug-v2-live-overlay{backdrop-filter:none}}
/* Respect the game selector's hidden state while a classroom game is open. */
#gamesView > #gameGrid[hidden]{display:none!important}
.tug-recoil-red .tug-rope-knot,.tug-recoil-blue .tug-rope-knot{filter:drop-shadow(0 0 11px #ef4444);}
.tug-recoil-red .tug-rope-line,.tug-recoil-blue .tug-rope-line{animation:tug-v2-recoil .32s ease-out}
@keyframes tug-v2-recoil{0%,100%{transform:translateX(0)}28%{transform:translateX(-4px)}58%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.tug-recoil-red .tug-rope-line,.tug-recoil-blue .tug-rope-line{animation:none}}

/* Classic Light avatar selection contrast repair (2026-10-31).
   The shared anime avatar card artwork uses dark navy backgrounds by default.
   Restrict the lighter presentation to Classic Light only so Gaming RGB stays as-is. */
body:not(.theme-rgb) #tugAvatarPicker .tug-avatar-choice {
  color: #1d3757;
  background: linear-gradient(180deg, #ffffff 0%, #f1f6fd 100%);
  border: 1px solid #bdcfe4;
  box-shadow: 0 8px 19px rgba(22, 54, 96, .09);
}
body:not(.theme-rgb) #tugAvatarPicker .tug-avatar-choice .tug-avatar-choice-label {
  color: #193b63;
  text-shadow: none;
}
body:not(.theme-rgb) #tugAvatarPicker .tug-avatar-choice:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e9f3ff 100%);
  border-color: #79a8e2;
  box-shadow: 0 12px 24px rgba(22, 54, 96, .14);
}
body:not(.theme-rgb) #tugAvatarPicker .tug-avatar-choice.selected,
body:not(.theme-rgb) #tugAvatarPicker .tug-avatar-choice.selected:hover {
  color: #123c6f;
  background: linear-gradient(180deg, #edf6ff 0%, #dbeaff 100%);
  border: 2px solid #2879df;
  box-shadow: 0 0 0 3px rgba(40, 121, 223, .16), 0 12px 25px rgba(22, 54, 96, .13);
}
body:not(.theme-rgb) #tugAvatarPicker .tug-avatar-choice.selected .tug-avatar-choice-label {
  color: #103d78;
  text-shadow: none;
}
body:not(.theme-rgb) #tugAvatarPicker .tug-avatar-choice:focus-visible {
  outline: 3px solid #1d74d4;
  outline-offset: 4px;
}