/* Scoped to the existing group classroom; other classroom pages keep their layout. */
:root .group-classroom-page { padding-bottom: 0; }
:root .group-classroom-page > main { max-width: none; padding: 10px 18px 72px; }
:root .group-classroom-page .group-class-controls { gap: 6px; margin-bottom: 10px; }
:root .group-classroom-page .group-class-status { flex-direction: row; flex-wrap: wrap; }
:root .group-classroom-page .group-class-action-row { flex-direction: row; flex-wrap: wrap; padding-top: 0; gap: 8px 16px; }
:root .group-classroom-page .group-ranking-block { display: flex; align-items: center; gap: 12px; }
:root .group-classroom-page .group-activity-toolbar { flex-wrap: wrap; }
:root .group-classroom-page .group-class-grid {
  display: grid; width: 100%; gap: 10px; margin: 0;
  grid-template-columns: repeat(var(--group-columns, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--group-rows, 2), minmax(0, 1fr));
  height: var(--group-height, auto); min-height: 0;
}
:root .group-classroom-page .group-class-grid .group-class-card {
  display: flex; flex-direction: column; align-items: stretch; min-height: 0;
  border: 1px solid #e7dfd1; border-radius: 14px; background: #ffffffb8;
  overflow: visible;
}
:root .group-classroom-page .group-class-card--selected { background: #fff0da; border-color: #ed9a4e; box-shadow: inset 0 0 0 1px #ed9a4e; }
:root .group-classroom-page .group-class-card--drag-over { background: #fff2d4; outline: 2px dashed #ed9a4e; }
:root .group-classroom-page .group-card-header { flex: 0 0 auto; width: 100%; min-height: 52px; padding: 6px 12px; gap: 8px; }
:root .group-classroom-page .group-card-heading { flex: 1; }
:root .group-classroom-page .group-card-name { font-size: 16px; }
:root .group-classroom-page .group-card-score { flex-direction: row; align-items: baseline; gap: 3px; margin: 0; }
:root .group-classroom-page .group-card-score strong { font-size: 24px; }
:root .group-classroom-page .group-card-score span { font-size: 11px; }
:root .group-classroom-page .group-member-grid {
  display: grid; flex: 1; grid-template-columns: repeat(var(--member-columns, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--member-rows, 1), minmax(0, 1fr));
  align-content: center; align-items: center; justify-items: center;
  gap: 4px; width: 100%; height: auto; min-height: var(--member-min-height, 0px); padding: 6px 8px 8px; overflow: visible;
}
:root .group-classroom-page .group-member-tile {
  flex: none; width: 100%; min-width: 0; min-height: 0; height: auto;
  padding: 0; gap: 2px; border-radius: 8px;
}
:root .group-classroom-page .group-member-tile > .group-member-pet { width: var(--pet-size, 64px); height: var(--pet-size, 64px); transform: none; }
:root .group-classroom-page .group-member-pet .group-member-pet,
:root .group-classroom-page .group-member-pet [role="img"],
:root .group-classroom-page .group-member-pet img { width: 100% !important; height: 100% !important; max-width: 100%; object-fit: contain; }
:root .group-classroom-page .group-member-pet > div { width: 100% !important; height: 100% !important; }
:root .group-classroom-page .group-member-student-no { font-size: 13px; line-height: 18px; }
:root .group-classroom-page .group-unassigned-strip { grid-column: 1 / -1; flex-direction: column; align-items: stretch; min-height: 0; overflow: visible; }
:root .group-classroom-page .group-unassigned-members { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; overflow: visible; }
:root .group-classroom-page .group-presentation-stage { height: var(--group-height, 450px); min-height: 0; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; }
:root .group-classroom-page .group-presentation-main { min-height: 0; }
:root .group-classroom-page .group-class-card--presentation-target { height: 100%; min-height: 0; transform: none; }
:root .group-classroom-page .group-presentation-switcher { min-height: 0; overflow-y: auto; }
:root .group-classroom-page .group-presentation-switcher-list { gap: 5px; }
:root .group-classroom-page .group-presentation-switch-button { padding: 6px 10px; min-height: 0; }
:root .group-classroom-page .group-presentation-label { flex: none; padding: 2px 8px; font-size: 12px; }
@media (min-width: 600px) and (min-height: 500px) {
  :root .group-classroom-page[data-fit="true"] > main { padding-bottom: 0; }
}
@media (max-width: 599px), (max-height: 499px) {
  :root .group-classroom-page > main { padding: 8px 10px 100px; }
  :root .group-classroom-page .group-class-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  :root .group-classroom-page .group-member-grid { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); grid-template-rows: none; min-height: 0; gap: 8px; }
  :root .group-classroom-page .group-member-tile { --pet-size: 52px; }
  :root .group-classroom-page .group-presentation-stage { height: auto; grid-template-columns: 1fr; }
  :root .group-classroom-page .group-class-card--presentation-target .group-member-grid { min-height: 170px; }
  :root .group-classroom-page .group-presentation-switcher { max-height: none; overflow: visible; }
  :root .group-classroom-page .group-presentation-switcher-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; overflow: visible; }
  :root .group-classroom-page .group-presentation-switch-button { min-height: 76px; }
}
@media (prefers-reduced-motion: reduce) { :root .group-classroom-page .group-member-pet { animation: none !important; } }