:root {
  --sky-top: #58c9ff;
  --sky-bottom: #c8f3ff;
  --ink: #18304f;
  --ink-soft: #3e5875;
  --paper: #fffdf0;
  --paper-2: #fff7c7;
  --blue: #2878e8;
  --blue-dark: #1454b8;
  --yellow: #ffd84a;
  --yellow-dark: #d99a14;
  --green: #45bd4b;
  --green-dark: #23883c;
  --red: #f2574b;
  --red-dark: #b93639;
  --orange: #ff9838;
  --pink: #ff84b7;
  --purple: #8c6ee8;
  --border: #18304f;
  --pixel-shadow: 6px 6px 0 var(--border);
  --pixel-shadow-small: 4px 4px 0 var(--border);
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  background: var(--sky-top);
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 66%, #b9e98b 66%, #b9e98b 100%);
  background-size: 24px 24px, 24px 24px, auto;
  font-family: "Courier New", "Lucida Console", monospace;
  font-weight: 700;
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 78px;
  border-top: 8px solid var(--green-dark);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16) 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(315deg, rgba(0,0,0,0.10) 25%, transparent 25%) 0 0 / 24px 24px,
    #9c6238;
}

button,
textarea,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 4px solid white;
  outline-offset: 3px;
}

.pixel-scenery {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pixel-sun {
  position: absolute;
  top: 92px;
  right: 7vw;
  width: 76px;
  height: 76px;
  border: 6px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 8px rgba(255,255,255,0.55);
}

.pixel-cloud {
  position: absolute;
  width: 102px;
  height: 30px;
  border: 5px solid var(--ink);
  background: #fff;
  box-shadow: 5px 5px 0 rgba(24,48,79,0.2);
}

.pixel-cloud::before,
.pixel-cloud::after {
  content: "";
  position: absolute;
  bottom: 20px;
  border: 5px solid var(--ink);
  border-bottom: 0;
  background: #fff;
}

.pixel-cloud::before {
  left: 15px;
  width: 32px;
  height: 26px;
}

.pixel-cloud::after {
  right: 13px;
  width: 40px;
  height: 39px;
}

.cloud-one {
  top: 155px;
  left: 5vw;
  animation: cloud-bob 5s steps(2, end) infinite;
}

.cloud-two {
  top: 255px;
  right: 22vw;
  transform: scale(0.72);
  animation: cloud-bob 6s steps(2, end) 1s infinite;
}

.pixel-hill {
  position: absolute;
  bottom: 70px;
  width: 240px;
  height: 115px;
  border: 6px solid var(--ink);
  border-bottom: 0;
  border-radius: 120px 120px 0 0;
  background:
    radial-gradient(circle at 35% 35%, #d9ff96 0 8px, transparent 9px),
    radial-gradient(circle at 68% 55%, #d9ff96 0 8px, transparent 9px),
    #68cb58;
}

.hill-one {
  left: -55px;
}

.hill-two {
  right: -75px;
  width: 300px;
  height: 145px;
  background:
    radial-gradient(circle at 38% 38%, #c8f38f 0 8px, transparent 9px),
    radial-gradient(circle at 70% 57%, #c8f38f 0 8px, transparent 9px),
    #55b94c;
}

@keyframes cloud-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}

.app-shell {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 78px;
  padding: 0.75rem clamp(0.8rem, 3vw, 2rem);
  border-bottom: 6px solid var(--border);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 12px, transparent 12px 24px),
    var(--yellow);
  box-shadow: 0 6px 0 rgba(24,48,79,0.22);
}

.brand-button {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.brand-button strong,
.brand-button small {
  display: block;
}

.brand-button strong {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 white;
}

.brand-button small {
  margin-top: 0.08rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.brand-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: white;
  background: var(--red);
  box-shadow: 4px 4px 0 var(--red-dark);
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--red-dark);
}

.topbar-actions {
  display: flex;
  gap: 0.65rem;
}

.icon-button,
.secondary-button,
.primary-button,
.danger-button,
.ghost-button,
.teacher-action,
.class-button {
  border: 4px solid var(--border);
  border-radius: var(--radius);
  font-weight: 900;
  box-shadow: var(--pixel-shadow-small);
  transition: transform 80ms steps(1, end), box-shadow 80ms steps(1, end), filter 80ms linear;
}

.icon-button:hover,
.secondary-button:hover,
.primary-button:hover,
.danger-button:hover,
.ghost-button:hover,
.class-button:hover,
.teacher-action:hover,
.student-checkbox:hover {
  filter: brightness(1.04);
  transform: translate(-1px, -1px);
}

.icon-button:active,
.secondary-button:active,
.primary-button:active,
.danger-button:active,
.ghost-button:active,
.class-button:active,
.teacher-action:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--border);
}

.icon-button {
  width: 3rem;
  height: 3rem;
  color: var(--ink);
  background: var(--paper);
  font-size: 1.2rem;
}

.app-content {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) 0 7rem;
}

.screen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding: 1rem 1.15rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,253,240,0.94);
  box-shadow: var(--pixel-shadow);
}

.screen-header h1,
.screen-header h2,
.screen-header p {
  margin: 0;
}

.screen-header h1,
.screen-header h2 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 3px 3px 0 #d8f2ff;
}

.screen-header h1 {
  font-size: clamp(1.65rem, 4vw, 2.7rem);
  line-height: 1.08;
}

.screen-header h2 {
  font-size: clamp(1.25rem, 3vw, 2rem);
}

.screen-header p {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  line-height: 1.5;
  font-size: 0.91rem;
}

.header-badge {
  flex: 0 0 auto;
  padding: 0.65rem 0.85rem;
  border: 3px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow-dark);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.card {
  padding: clamp(1rem, 3vw, 1.7rem);
  border: 5px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)),
    repeating-linear-gradient(0deg, #fffdf0 0 20px, #fff8d8 20px 40px);
  box-shadow: var(--pixel-shadow);
}

.grade-section + .grade-section {
  margin-top: 1.5rem;
}

.grade-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.8rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  background: var(--green);
  box-shadow: 4px 4px 0 var(--green-dark);
  color: white;
  font-size: 1rem;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--green-dark);
}

.grade-title span {
  padding: 0.18rem 0.4rem;
  border: 2px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 900;
  text-shadow: none;
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.class-button {
  position: relative;
  min-height: 7.5rem;
  padding: 1.1rem 1rem 0.95rem;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.class-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  border-bottom: 4px solid var(--border);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22) 25%, transparent 25%) 0 0 / 12px 12px,
    var(--green);
}

.class-button:nth-child(4n + 2)::before { background-color: var(--orange); }
.class-button:nth-child(4n + 3)::before { background-color: var(--pink); }
.class-button:nth-child(4n + 4)::before { background-color: var(--purple); }

.class-button:hover {
  background: #fff8bf;
}

.class-button strong,
.class-button span,
.class-button small {
  display: block;
}

.class-button strong {
  margin-top: 0.45rem;
  font-size: 1.55rem;
  letter-spacing: 0.05em;
}

.class-button span {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}

.class-button small {
  margin-top: 0.75rem;
  color: var(--blue-dark);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.class-button.empty {
  background: #e9eef2;
  opacity: 0.88;
}

.class-button.empty::before {
  background-color: #aab8c5;
}

.class-button.empty small {
  color: var(--red-dark);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.toolbar.spread {
  justify-content: space-between;
}

.primary-button,
.secondary-button,
.danger-button,
.ghost-button {
  min-height: 3rem;
  padding: 0.7rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.primary-button {
  color: white;
  background: var(--blue);
  text-shadow: 2px 2px 0 var(--blue-dark);
}

.primary-button:hover {
  background: #3b8bfa;
}

.primary-button.large {
  min-height: 3.55rem;
  padding-inline: 1.4rem;
  font-size: 1rem;
}

.secondary-button {
  color: var(--ink);
  background: var(--paper);
}

.ghost-button {
  color: var(--ink);
  background: var(--yellow);
}

.danger-button {
  color: white;
  background: var(--red);
  text-shadow: 2px 2px 0 var(--red-dark);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(0.5);
  transform: none !important;
  box-shadow: 2px 2px 0 var(--border) !important;
}

.student-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.2rem 0 1.6rem;
}

.student-checkbox {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 3.4rem;
  padding: 0.75rem 0.85rem;
  border: 3px solid var(--border);
  border-radius: var(--radius);
  background: #e7edf1;
  box-shadow: 3px 3px 0 rgba(24,48,79,0.35);
  transition: transform 80ms steps(1, end), background 80ms linear;
}

.student-checkbox:has(input:checked) {
  background: #bdf59f;
}

.student-checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--green-dark);
}

.attendance-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  color: var(--ink-soft);
}

.attendance-summary strong {
  display: inline-grid;
  min-width: 2.2rem;
  min-height: 2.2rem;
  place-items: center;
  border: 3px solid var(--border);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--yellow-dark);
}

.roster-editor {
  width: 100%;
  min-height: 26rem;
  resize: vertical;
  padding: 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  background:
    repeating-linear-gradient(0deg, #fffef4 0 28px, #e2f2ff 29px 30px);
  color: var(--ink);
  box-shadow: inset 5px 5px 0 rgba(24,48,79,0.08);
  line-height: 1.9;
}

.roster-editor:focus {
  border-color: var(--blue);
  box-shadow: 5px 5px 0 var(--blue-dark);
}

.helper-text {
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.pairing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
}

.pair-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 6.3rem;
  padding: 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--pixel-shadow-small);
}

.pair-card:nth-child(4n + 1) { background: #fff6b3; }
.pair-card:nth-child(4n + 2) { background: #ccf4ff; }
.pair-card:nth-child(4n + 3) { background: #d6ffc0; }
.pair-card:nth-child(4n + 4) { background: #ffd4e7; }

.pair-card.trio {
  grid-column: 1 / -1;
  border-width: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0 10px, transparent 10px 20px),
    var(--yellow);
}

.pair-number {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 4px solid var(--border);
  border-radius: 50%;
  color: white;
  background: var(--red);
  box-shadow: 3px 3px 0 var(--red-dark);
  font-size: 1.1rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--red-dark);
}

.pair-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 900;
}

.pair-names .connector {
  display: inline-grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 2px solid var(--border);
  background: white;
  color: var(--blue-dark);
  font-weight: 900;
}

.round-note {
  padding: 0.85rem 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: #174e33;
  background: #c8f7a8;
  box-shadow: 4px 4px 0 var(--green-dark);
  font-size: 0.85rem;
  font-weight: 900;
}

.empty-state {
  padding: 2rem;
  border: 4px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: rgba(255,253,240,0.92);
  text-align: center;
}

.teacher-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.teacher-action {
  min-height: 7rem;
  padding: 1rem;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.teacher-action:nth-child(1) { background: #ccf4ff; }
.teacher-action:nth-child(2) { background: #d6ffc0; }
.teacher-action:nth-child(3) { background: #ffd1cf; }

.teacher-action strong,
.teacher-action small {
  display: block;
}

.teacher-action strong {
  text-transform: uppercase;
}

.teacher-action small {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.warning-box {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: #6c410f;
  background: #ffe39b;
  box-shadow: 4px 4px 0 var(--orange);
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-width: min(25rem, calc(100% - 2rem));
  padding: 0.9rem 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: white;
  background: var(--blue);
  box-shadow: var(--pixel-shadow);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 120ms steps(2, end), transform 120ms steps(2, end);
  text-shadow: 2px 2px 0 var(--blue-dark);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 850px) {
  .class-grid,
  .student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-actions {
    grid-template-columns: 1fr;
  }

  .pixel-sun {
    right: 3vw;
    transform: scale(0.8);
  }
}

@media (max-width: 620px) {
  .app-content {
    width: min(100% - 1rem, 1180px);
  }

  .topbar {
    min-height: 68px;
    padding-inline: 0.65rem;
  }

  .brand-button small,
  .cloud-two {
    display: none;
  }

  .brand-icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .screen-header,
  .toolbar.spread,
  .attendance-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .class-grid,
  .student-list,
  .pairing-grid {
    grid-template-columns: 1fr;
  }

  .pair-card.trio {
    grid-column: auto;
  }

  .pixel-scenery {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 1200px) {
  :fullscreen .app-content {
    width: min(1450px, calc(100% - 4rem));
  }

  :fullscreen .pairing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :fullscreen .pair-card.trio {
    grid-column: span 2;
  }
}


/* Simplified student-facing class menu */
.home-screen {
  position: relative;
}

.compact-header {
  margin-bottom: 1.2rem;
}

.home-class-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.home-class-button {
  display: grid;
  min-height: 6.4rem;
  place-items: center;
  padding: 1rem;
  text-align: center;
}

.home-class-button::before {
  height: 14px;
}

.home-class-button strong {
  margin-top: 0.45rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

/* Each grade occupies exactly two rows: 1-1–1-8, 2-1–2-8, 3-1–3-8. */
.home-class-button:nth-child(n + 5):nth-child(-n + 8),
.home-class-button:nth-child(n + 13):nth-child(-n + 16) {
  margin-bottom: 0.65rem;
}

.home-class-button.empty {
  opacity: 0.58;
}

.home-settings-button {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin: 1.25rem 0 0 auto;
  place-items: center;
  border: 2px solid rgba(24, 48, 79, 0.45);
  border-radius: 3px;
  color: rgba(24, 48, 79, 0.66);
  background: rgba(255, 253, 240, 0.5);
  box-shadow: 2px 2px 0 rgba(24, 48, 79, 0.22);
  font-size: 0.85rem;
  opacity: 0.62;
}

.home-settings-button:hover,
.home-settings-button:focus-visible {
  opacity: 1;
  background: var(--paper);
}

.teacher-class-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.teacher-class-button {
  min-height: 7.5rem;
}

.student-number {
  display: inline-grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 3px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--yellow-dark);
  font-size: 0.78rem;
}

.student-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .home-class-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .teacher-class-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .home-class-grid,
  .teacher-class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   CODEPEN 2.0 VISUAL FIX + GRADE COLOR GROUPING
   Grade 1 = green, Grade 2 = orange, Grade 3 = purple.
   Empty class slots stay fully visible on the home screen.
   ========================================================= */

.home-class-button,
.home-class-button.empty {
  opacity: 1;
  color: var(--ink);
}

/* Grade 1: classes 1-1 through 1-8 */
.home-class-button:nth-child(-n + 8),
.home-class-button.empty:nth-child(-n + 8),
.teacher-class-button:nth-child(-n + 8) {
  background: #e5f8d8;
}

.home-class-button:nth-child(-n + 8)::before,
.home-class-button.empty:nth-child(-n + 8)::before,
.teacher-class-button:nth-child(-n + 8)::before {
  background-color: var(--green);
}

/* Grade 2: classes 2-1 through 2-8 */
.home-class-button:nth-child(n + 9):nth-child(-n + 16),
.home-class-button.empty:nth-child(n + 9):nth-child(-n + 16),
.teacher-class-button:nth-child(n + 9):nth-child(-n + 16) {
  background: #fff0d7;
}

.home-class-button:nth-child(n + 9):nth-child(-n + 16)::before,
.home-class-button.empty:nth-child(n + 9):nth-child(-n + 16)::before,
.teacher-class-button:nth-child(n + 9):nth-child(-n + 16)::before {
  background-color: var(--orange);
}

/* Grade 3: classes 3-1 through 3-8 */
.home-class-button:nth-child(n + 17):nth-child(-n + 24),
.home-class-button.empty:nth-child(n + 17):nth-child(-n + 24),
.teacher-class-button:nth-child(n + 17):nth-child(-n + 24) {
  background: #eee8ff;
}

.home-class-button:nth-child(n + 17):nth-child(-n + 24)::before,
.home-class-button.empty:nth-child(n + 17):nth-child(-n + 24)::before,
.teacher-class-button:nth-child(n + 17):nth-child(-n + 24)::before {
  background-color: var(--purple);
}

.home-class-button:hover,
.home-class-button.empty:hover,
.teacher-class-button:hover {
  filter: brightness(1.06);
}

/* The small teacher control remains intentionally discreet. */
.home-settings-button {
  opacity: 0.48;
}

.home-settings-button:hover,
.home-settings-button:focus-visible {
  opacity: 1;
}

/* =========================================================
   PAIR QUEST COMMERCIAL V1
   Dynamic school profiles, grade groups, and setup screens.
   ========================================================= */

.home-grade-list,
.teacher-grade-list {
  display: grid;
  gap: 1.35rem;
}

.home-grade-block {
  position: relative;
}

.home-grade-block + .home-grade-block {
  padding-top: 0.35rem;
}

.home-grade-block + .home-grade-block::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: 1.25rem;
  right: 1.25rem;
  height: 4px;
  background: rgba(24, 48, 79, 0.18);
}

.home-class-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.home-class-button,
.home-class-button.empty,
.teacher-class-button,
.teacher-class-button.empty {
  opacity: 1;
  color: var(--ink);
  background: var(--grade-soft) !important;
}

.home-class-button::before,
.home-class-button.empty::before,
.teacher-class-button::before,
.teacher-class-button.empty::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22) 25%, transparent 25%) 0 0 / 12px 12px,
    var(--grade-color) !important;
}

.home-class-button:hover,
.home-class-button.empty:hover,
.teacher-class-button:hover,
.teacher-class-button.empty:hover {
  background: color-mix(in srgb, var(--grade-soft) 82%, white) !important;
  filter: brightness(1.04);
}

.home-class-button:nth-child(n),
.teacher-class-button:nth-child(n) {
  margin-bottom: 0;
}

.teacher-grade-block + .teacher-grade-block {
  margin-top: 1.5rem;
}

.teacher-grade-title {
  display: inline-flex;
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.8rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: white;
  background: var(--grade-color);
  box-shadow: 4px 4px 0 var(--grade-dark);
  font-size: 0.92rem;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--grade-dark);
}

.school-profile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.school-profile-card h3,
.grade-config-header h3 {
  margin: 0.25rem 0 0.45rem;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  text-transform: uppercase;
}

.school-profile-card p,
.grade-config-header p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.settings-kicker {
  display: inline-block;
  padding: 0.25rem 0.45rem;
  border: 3px solid var(--border);
  color: white;
  background: var(--purple);
  box-shadow: 2px 2px 0 #5d43b8;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.school-profile-controls {
  display: grid;
  gap: 0.55rem;
}

.field-label,
.form-field > span,
.inline-field > span,
.fixed-grade-label > span,
.set-all-control label {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pixel-input,
.pixel-select,
.pixel-number {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.75rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(24,48,79,0.28);
  outline: none;
}

.pixel-input:focus,
.pixel-select:focus,
.pixel-number:focus {
  border-color: var(--blue);
  box-shadow: 4px 4px 0 var(--blue-dark);
}

.pixel-number {
  max-width: 7.5rem;
}

.danger-action {
  background: #ffd1cf !important;
}

.settings-section-header {
  margin-top: 1.6rem;
}

.setup-card {
  display: grid;
  gap: 1.35rem;
}

.setup-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-field,
.inline-field {
  display: grid;
  gap: 0.4rem;
}

.checkbox-field {
  display: flex;
  align-items: center;
  align-self: end;
  min-height: 3rem;
  padding: 0.65rem 0.75rem;
  border: 4px solid var(--border);
  background: #d6ffc0;
  box-shadow: 3px 3px 0 var(--green-dark);
}

.checkbox-field input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--green-dark);
}

.setup-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 0.9rem;
  border: 4px solid var(--border);
  background: #ccf4ff;
  box-shadow: 4px 4px 0 var(--blue-dark);
}

.setup-preview > span {
  margin-right: auto;
  color: var(--ink-soft);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.setup-preview strong {
  padding: 0.45rem 0.65rem;
  border: 3px solid var(--border);
  background: var(--paper);
  box-shadow: 2px 2px 0 rgba(24,48,79,0.3);
}

.grade-config-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.25rem;
}

.set-all-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.set-all-control .pixel-number {
  width: 5.5rem;
}

.grade-config-list {
  display: grid;
  gap: 0.8rem;
}

.grade-config-row {
  display: grid;
  grid-template-columns: 22px minmax(150px, 1fr) minmax(180px, 0.75fr) auto;
  align-items: end;
  gap: 0.85rem;
  padding: 0.85rem;
  border: 4px solid var(--border);
  background: var(--grade-soft);
  box-shadow: 4px 4px 0 var(--grade-dark);
}

.grade-color-chip {
  align-self: stretch;
  min-height: 3.2rem;
  border: 3px solid var(--border);
  background: var(--grade-color);
}

.fixed-grade-label {
  display: grid;
  align-content: center;
  min-height: 3rem;
}

.fixed-grade-label strong {
  margin-top: 0.3rem;
  font-size: 1.05rem;
}

.class-count-field {
  justify-items: start;
}

.add-grade-button {
  justify-self: start;
}

.archive-note {
  padding: 0.75rem 0.9rem;
  border: 4px solid var(--border);
  color: #6c410f;
  background: #ffe39b;
  box-shadow: 4px 4px 0 var(--orange);
  font-size: 0.82rem;
  line-height: 1.5;
}

.setup-footer {
  padding-top: 0.35rem;
}

@media (max-width: 900px) {
  .school-profile-card,
  .setup-form-grid {
    grid-template-columns: 1fr;
  }

  .grade-config-row {
    grid-template-columns: 18px minmax(140px, 1fr) minmax(150px, 0.7fr) auto;
  }
}

@media (max-width: 700px) {
  .grade-config-header {
    align-items: stretch;
    flex-direction: column;
  }

  .set-all-control {
    justify-content: flex-start;
  }

  .grade-config-row {
    grid-template-columns: 18px 1fr;
    align-items: stretch;
  }

  .grade-color-chip {
    grid-row: 1 / span 3;
  }

  .grade-config-row .remove-grade-button {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .home-class-grid,
  .teacher-class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Commercial V2: flexible group sizes, storage notice, and privacy page */
.group-size-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.15rem;
  padding: 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  background: #fff6b3;
  box-shadow: 4px 4px 0 var(--yellow-dark);
}

.group-size-panel > div:first-child {
  display: grid;
  gap: 0.35rem;
}

.group-size-panel strong {
  font-size: 1rem;
  text-transform: uppercase;
}

.group-size-panel span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.group-size-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(3.4rem, 1fr));
  gap: 0.55rem;
}

.group-size-button {
  display: grid;
  min-width: 3.7rem;
  min-height: 3.7rem;
  place-items: center;
  padding: 0.35rem;
  color: var(--ink);
  background: white;
  font-size: 1.15rem;
}

.group-size-button small {
  display: block;
  min-height: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.5rem;
  line-height: 1;
  text-transform: uppercase;
}

.group-size-button.active {
  color: white;
  background: var(--blue);
  box-shadow: 3px 3px 0 var(--blue-dark);
  text-shadow: 2px 2px 0 var(--blue-dark);
  transform: translate(-1px, -1px);
}

.group-size-button.active small {
  color: white;
}

.group-results-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group-card {
  grid-template-columns: auto minmax(6.5rem, 0.35fr) 1fr;
  align-items: stretch;
}

.group-card-heading {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  border-right: 3px dashed rgba(24, 48, 79, 0.45);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.group-card-heading small {
  color: var(--ink-soft);
  font-size: 0.62rem;
}

.group-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 0.5rem;
  font-size: clamp(0.9rem, 1.45vw, 1.15rem);
}

.group-names span {
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 2px solid rgba(24, 48, 79, 0.4);
  background: rgba(255, 255, 255, 0.68);
  overflow-wrap: anywhere;
}

.local-storage-notice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  background: #ccf4ff;
  box-shadow: 4px 4px 0 var(--blue-dark);
}

.local-storage-notice.storage-warning {
  background: #ffd1cf;
  box-shadow: 4px 4px 0 var(--red-dark);
}

.storage-icon {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 3px solid var(--border);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow-dark);
}

.local-storage-notice strong,
.local-storage-notice p {
  display: block;
  margin: 0;
}

.local-storage-notice strong {
  text-transform: uppercase;
}

.local-storage-notice p {
  margin-top: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.compact-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.68rem;
}

.teacher-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-action:nth-child(1) { background: #ccf4ff; }
.teacher-action:nth-child(2) { background: #d6ffc0; }
.teacher-action:nth-child(3) { background: #fff0b8; }
.teacher-action:nth-child(4) { background: #ffd1cf; }

.privacy-card {
  display: grid;
  gap: 1.25rem;
}

.privacy-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 4px solid var(--border);
  background: #d6ffc0;
  box-shadow: 4px 4px 0 var(--green-dark);
}

.privacy-shield {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 4px solid var(--border);
  color: white;
  background: var(--green);
  box-shadow: 3px 3px 0 var(--green-dark);
  font-size: 1.35rem;
}

.privacy-hero h3,
.privacy-hero p,
.privacy-grid h4,
.privacy-grid p,
.privacy-recommendation p {
  margin: 0;
}

.privacy-hero p {
  margin-top: 0.45rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.privacy-grid article {
  padding: 1rem;
  border: 4px solid var(--border);
  background: var(--paper);
  box-shadow: var(--pixel-shadow-small);
}

.privacy-grid article:nth-child(1) { background: #ccf4ff; }
.privacy-grid article:nth-child(2) { background: #eee8ff; }
.privacy-grid article:nth-child(3) { background: #fff0d7; }
.privacy-grid article:nth-child(4) { background: #ffe4f0; }

.privacy-grid h4 {
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.privacy-grid p,
.privacy-recommendation p {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.6;
}

.privacy-recommendation {
  padding: 1rem;
  border: 4px solid var(--border);
  background: #fff6b3;
  box-shadow: 4px 4px 0 var(--yellow-dark);
}

.privacy-recommendation strong {
  display: block;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.privacy-version {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-align: right;
}

@media (max-width: 1000px) {
  .teacher-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-card {
    grid-template-columns: auto 1fr;
  }

  .group-card-heading {
    display: none;
  }
}

@media (max-width: 760px) {
  .group-size-panel,
  .local-storage-notice {
    grid-template-columns: 1fr;
  }

  .group-size-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .group-size-options {
    width: 100%;
  }

  .local-storage-notice {
    display: grid;
  }

  .local-storage-notice .compact-button {
    justify-self: start;
  }

  .privacy-grid,
  .group-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .group-size-options {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .group-size-button {
    min-width: 0;
  }

  .teacher-actions,
  .group-names {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   COMMERCIAL V2.1 — DISCOVERABLE TEACHER SETTINGS
   Visible enough for a first-time teacher, quieter than class tiles.
   ========================================================= */
.home-settings-button {
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: 2.65rem;
  margin: 1.4rem 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  border: 3px solid rgba(24, 48, 79, 0.72);
  border-radius: 5px;
  color: rgba(24, 48, 79, 0.88);
  background: rgba(255, 253, 240, 0.9);
  box-shadow: 3px 3px 0 rgba(24, 48, 79, 0.25);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.86;
  text-transform: uppercase;
}

.home-settings-button .settings-gear {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
}

.home-settings-button .settings-label {
  white-space: nowrap;
}

.home-settings-button:hover,
.home-settings-button:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: #fffdf0;
  box-shadow: 4px 4px 0 rgba(24, 48, 79, 0.3);
  transform: translate(-1px, -1px);
}

.home-settings-button:active {
  box-shadow: 1px 1px 0 rgba(24, 48, 79, 0.3);
  transform: translate(2px, 2px);
}

@media (max-width: 620px) {
  .home-settings-button {
    min-height: 2.5rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.66rem;
  }
}

/* =========================================================
   COMMERCIAL V2.2 — INTERACTIVE TUTORIAL + HELP
   ========================================================= */
.help-button {
  font-size: 1.35rem;
  font-weight: 900;
  background: #fff6b3;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.help-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem 1rem;
  align-items: start;
  padding: 1rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 253, 240, 0.96);
  box-shadow: var(--pixel-shadow-small);
}

.help-card:nth-child(3n + 2) { background: #e5f8d8; }
.help-card:nth-child(3n + 3) { background: #fff0d7; }
.help-card:nth-child(3n + 4) { background: #eee8ff; }

.help-card h3,
.help-card p {
  margin: 0;
}

.help-card h3 {
  margin-bottom: 0.35rem;
  font-size: 0.98rem;
  text-transform: uppercase;
}

.help-card p {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.55;
}

.help-card-icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 3px solid var(--border);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow-dark);
  font-size: 1rem;
  font-weight: 900;
}

.tutorial-help-card {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: #ccf4ff;
}

.first-run-tutorial-backdrop {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(24, 48, 79, 0.58);
}

.first-run-tutorial-card {
  width: min(560px, 100%);
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 5px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 9px 9px 0 rgba(24, 48, 79, 0.55);
}

.first-run-tutorial-card h2,
.first-run-tutorial-card p {
  margin: 0;
}

.first-run-tutorial-card h2 {
  margin: 0.55rem 0 0.8rem;
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  line-height: 1.25;
}

.first-run-tutorial-card p {
  color: var(--ink-soft);
  line-height: 1.6;
}

.tutorial-kicker {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  border: 3px solid var(--border);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow-dark);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.first-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.35rem;
}

.tutorial-dimmer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: rgba(21, 45, 73, 0.67);
}

body.tutorial-mode button,
body.tutorial-mode input,
body.tutorial-mode select,
body.tutorial-mode textarea,
body.tutorial-mode label.student-checkbox {
  pointer-events: none;
}

.tutorial-target,
.tutorial-target input,
.tutorial-popover button {
  pointer-events: auto !important;
}

.tutorial-target {
  position: relative !important;
  z-index: 235 !important;
  outline: 5px solid #fff5a6 !important;
  outline-offset: 5px;
  box-shadow:
    0 0 0 10px rgba(255, 216, 74, 0.52),
    7px 7px 0 var(--border) !important;
  filter: brightness(1.08);
}

label.tutorial-target {
  background: #fff9c9;
}

.tutorial-popover {
  position: fixed;
  z-index: 260;
  padding: 1rem 1.05rem;
  border: 5px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 7px 7px 0 rgba(24, 48, 79, 0.58);
}

.tutorial-popover-center {
  top: 50%;
  left: 50%;
  width: min(430px, calc(100% - 2rem));
  transform: translate(-50%, -50%);
}

.tutorial-popover h3,
.tutorial-popover p {
  margin: 0;
}

.tutorial-popover h3 {
  margin: 0.55rem 0 0.55rem;
  font-size: 1rem;
  line-height: 1.35;
}

.tutorial-popover p {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.55;
}

.tutorial-progress {
  display: inline-block;
  padding: 0.28rem 0.48rem;
  border: 3px solid var(--border);
  background: #ccf4ff;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.9rem;
}

.tutorial-exit-button {
  padding: 0.45rem 0.6rem;
  border: 0;
  color: var(--ink-soft);
  background: transparent;
  font-size: 0.7rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .help-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-help-card {
    grid-column: auto;
    grid-template-columns: auto 1fr;
  }

  .tutorial-help-card .primary-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .tutorial-popover:not(.tutorial-popover-center) {
    left: 12px !important;
    width: calc(100% - 24px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-target {
    scroll-behavior: auto;
  }
}


/* Last Bell Studio website integration */
.site-return-link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.8rem;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--pixel-shadow-small);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.site-return-link:hover {
  filter: brightness(1.04);
  transform: translate(-1px, -1px);
}

.site-return-link:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--border);
}

.site-return-link:focus-visible {
  outline: 4px solid white;
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .site-return-link {
    min-height: 2.6rem;
    padding-inline: 0.55rem;
    font-size: 0.62rem;
  }
}


/* V13 QA: group number already appears in the number tile */
.group-card-heading{min-width:7.5rem;text-align:center;justify-items:center;}
.group-card-heading small{font-size:clamp(.82rem,1.15vw,1rem);font-weight:900;color:var(--ink);}

/* =========================================================
   V14 CLASSROOM QA — auto-fit result cards for <=32 students
   Spacious by default; compact modes are applied only when the
   visible group grid would otherwise fall below the viewport.
   ========================================================= */
.results-screen.results-fit-compact .screen-header{
  margin-bottom:.7rem;
  padding:.65rem .8rem;
}
.results-screen.results-fit-compact .screen-header h2{font-size:clamp(1.05rem,2vw,1.45rem);}
.results-screen.results-fit-compact .screen-header p{margin-top:.25rem;font-size:.78rem;}
.results-screen.results-fit-compact .header-badge{padding:.45rem .65rem;font-size:.7rem;}
.results-screen.results-fit-compact .round-note{padding:.55rem .7rem;font-size:.74rem;}
.results-screen.results-fit-compact .group-results-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
  margin:.65rem 0 .85rem;
}
.results-screen.results-fit-compact .group-card{
  min-height:4.35rem;
  padding:.55rem;
  gap:.5rem;
  grid-template-columns:auto minmax(4.7rem,.26fr) 1fr;
}
.results-screen.results-fit-compact .pair-number{
  width:2.45rem;
  height:2.45rem;
  border-width:3px;
  font-size:.9rem;
}
.results-screen.results-fit-compact .group-card-heading{min-width:4.7rem;border-right-width:2px;}
.results-screen.results-fit-compact .group-card-heading small{font-size:.72rem;}
.results-screen.results-fit-compact .group-names{gap:.3rem;font-size:clamp(.82rem,1vw,.98rem);}
.results-screen.results-fit-compact .group-names span{padding:.28rem .36rem;border-width:1.5px;}

.results-screen.results-fit-tight .group-results-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem;
  margin:.5rem 0 .7rem;
}
.results-screen.results-fit-tight .group-card{
  min-height:3.7rem;
  padding:.42rem;
  gap:.38rem;
  grid-template-columns:auto minmax(0,1fr);
}
.results-screen.results-fit-tight .group-card-heading{display:none;}
.results-screen.results-fit-tight .pair-number{
  width:2.1rem;
  height:2.1rem;
  font-size:.78rem;
}
.results-screen.results-fit-tight .group-names{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.22rem;
  font-size:clamp(.72rem,.85vw,.88rem);
}
.results-screen.results-fit-tight .group-names span{padding:.22rem .28rem;}
@media(max-width:1050px){
  .results-screen.results-fit-compact .group-results-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .results-screen.results-fit-tight .group-results-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* =========================================================
   V15 — Pair & Group ↔ Class Roulette sister-tool links
   ========================================================= */
.home-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap}
.sister-tool-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.roulette-link{min-height:3rem;padding:.7rem 1rem;border:4px solid var(--border);border-radius:var(--radius);color:var(--ink);background:var(--yellow);box-shadow:var(--pixel-shadow-small);font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.roulette-link:hover,.sister-tool-link:hover{filter:brightness(1.04);transform:translate(-1px,-1px)}
.sister-teacher-action{display:block;text-decoration:none;color:var(--ink);background:#fff4b8}
@media(max-width:700px){.home-header-actions{width:100%;justify-content:stretch}.home-header-actions>*{flex:1 1 100%}.sister-tool-link{white-space:normal;text-align:center}}