/* Phonics owns its tray and shares the board's soft mint learning surface. */
.phonics-stage {
  container-type: inline-size;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: clamp(20px, 2vw, 30px);
}
.phonics-panel { min-width: 0; min-height: 0; display: grid; }
.phonics-content {
  container-type: size;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4cqw, 32px);
}
.phonics-grapheme,
.phonics-word {
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  font-family: 'Andika', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}
.phonics-grapheme {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(12px, 4cqw, 36px);
  max-width: 100%;
  color: var(--mint-action-dark);
  line-height: 1.18;
}
.phonics-lower { font-size: clamp(64px, min(28cqw, 48cqh), 260px); }
.phonics-upper { font-size: clamp(48px, min(21cqw, 36cqh), 200px); }
.phonics-long .phonics-lower { font-size: clamp(38px, min(19cqw, 44cqh), 180px); }
.phonics-long .phonics-upper { font-size: clamp(30px, min(14cqw, 32cqh), 138px); }
.phonics-word {
  max-width: 100%;
  color: var(--evergreen);
  font-size: clamp(28px, min(9cqw, 18cqh), 80px);
  line-height: 1.35;
}
.phonics-target {
  color: var(--mint-action-dark);
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .15em;
}
.phonics-grapheme:disabled,
.phonics-word:disabled { opacity: 1; cursor: default; }
.phonics-grapheme:hover:not(:disabled),
.phonics-word:hover:not(:disabled) { background: #E8FAF1; }
.phonics-grapheme:active:not(:disabled),
.phonics-word:active:not(:disabled) { transform: scale(.97); }
.phonics-grapheme.phonics-is-playing,
.phonics-word.phonics-is-playing { background: #FFF3B9; }

/* The existing glossy letter-tile rules supply pigment, depth, hover and press. */
.phonics-tray {
  container-type: inline-size;
  grid-template-rows: minmax(0, 1fr) auto auto;
}
.phonics-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 44px);
  /* Keep the 44px touch rows; let their frame include balanced breathing room. */
  gap: 8px 4px;
  padding: 6px clamp(4px, 2cqw, 8px);
  /* Use the tray's existing side space so added padding does not narrow tabs. */
  margin-inline: calc(4px - clamp(4px, 2cqw, 8px));
  border: inherit;
  border-radius: var(--radius-tile);
  background: #F3FDF8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
/* On the fixed-height desktop tray, share the existing space around this
   frame rather than taking 15px away from the sound choices above it. */
.mode-phonics:not(.is-responsive) .phonics-groups { margin-block: -7.5px; }
.phonics-group-tab {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 44px;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--evergreen-soft);
  box-shadow: none;
  font-size: clamp(.76rem, 2.7cqw, .95rem);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.phonics-group-tab::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: transparent;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.phonics-group-tab:hover { color: var(--evergreen); }
.phonics-group-tab:active { transform: scale(.98); }
.phonics-group-tab.is-active { color: #523F08; }
.phonics-group-tab.is-active::before {
  background: var(--sun);
  border-color: #C99A12;
  box-shadow: 0 1px 3px rgba(122,92,10,.12), inset 0 1px 0 rgba(255,255,255,.5);
}
.phonics-options-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(80px, 1fr);
  align-content: stretch;
  gap: clamp(10px, 1.2vw, 16px);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--mint-line-strong) transparent;
  scrollbar-width: thin;
}
.phonics-choice {
  aspect-ratio: auto;
  min-height: 80px;
  padding: 9px 6px;
  gap: 6px;
}
.phonics-choice .phonics-choice-grapheme {
  font: 700 clamp(24px, 7cqw, 42px)/1.1 'Andika', 'Trebuchet MS', sans-serif;
}
.phonics-choice .phonics-choice-word {
  max-width: 100%;
  font: 700 clamp(12px, 2.8cqw, 18px)/1.25 'Andika', 'Trebuchet MS', sans-serif;
  white-space: nowrap;
}
.phonics-group-tab:focus-visible,
.phonics-grapheme:focus-visible,
.phonics-word:focus-visible { outline: 3px solid var(--evergreen); outline-offset: 3px; }

@media (max-width: 1023px) {
  .phonics-stage { min-height: 390px; }
  .phonics-content { min-height: 310px; }
  .phonics-options-row { grid-auto-rows: minmax(94px, 1fr); }
}
@media (max-width: 639px) {
  .phonics-stage { min-height: 340px; padding: 16px; }
  .phonics-content { min-height: 300px; gap: 18px; }
  .phonics-grapheme { padding: 6px; gap: 12px; }
  .phonics-word { padding: 6px; }
  .phonics-tray:not(.phonics-pattern-tray) .letter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .phonics-options-row { gap: 10px; padding: 6px; }
  .phonics-choice { --stem: 4px; min-height: 94px; padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .phonics-grapheme, .phonics-word, .phonics-group-tab, .phonics-group-tab::before { transition: none; }
}

@media (max-width: 1023px) {
  .is-responsive .phonics-tray { grid-template-rows: auto auto auto; }
  .is-responsive .phonics-tray .responsive-selector { grid-template-columns: none; grid-auto-rows: auto; }
  .is-responsive .responsive-selector .phonics-choice { min-height: 44px; padding: 8px 4px; }
  .is-responsive .responsive-selector .phonics-choice .phonics-choice-grapheme { font-size: clamp(26px, 5vw, 36px); }
  .is-responsive .responsive-selector .phonics-choice .phonics-choice-word { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .is-responsive .phonics-group-tab { font-size: clamp(.72rem, 2vw, .95rem); }
  .is-responsive .phonics-stage { min-height: 390px; }
  .is-responsive .phonics-content { min-height: 310px; }
  .is-responsive.is-short-landscape .phonics-stage { min-height: 280px; padding-block: 12px; }
  .is-responsive.is-short-landscape .phonics-content { min-height: 250px; gap: 16px; }
  .is-responsive.is-short-landscape .phonics-grapheme, .is-responsive.is-short-landscape .phonics-word { padding-block: 6px; }
}
@media (max-width: 639px) {
  .is-responsive:not(.is-short-landscape) .phonics-stage { min-height: 340px; }
  .is-responsive:not(.is-short-landscape) .phonics-content { min-height: 300px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .is-responsive .phonics-groups { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: 44px; }
}

/* Tablet Phonics gives the former empty spacer to the learning surface. */
@media (min-width: 600px) and (max-width: 1199px) and (min-height: 501px) {
  .mode-phonics.is-responsive .stage-column { display: flex; flex-direction: column; flex: 1 0 auto; }
  .mode-phonics.is-responsive .phonics-stage { flex: 1; min-height: 420px; }
  .mode-phonics.is-responsive .phonics-content { min-height: 350px; }
  .mode-phonics.is-responsive .control-bar { margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1199px) and (min-height: 501px) {
  .is-phonics-tablet .phonics-tray { grid-template-rows: auto auto auto; }
  .is-phonics-tablet .phonics-groups { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: 44px; }
  .mode-phonics.is-phonics-tablet .phonics-stage { min-height: 320px; padding: 20px; }
  .mode-phonics.is-phonics-tablet .phonics-content { min-height: 270px; gap: 16px; }
  .is-phonics-tablet .phonics-grapheme, .is-phonics-tablet .phonics-word { padding-block: 6px; }
  .is-phonics-tablet .responsive-selector .phonics-choice { min-height: 44px; padding: 8px 4px; }
  .is-phonics-tablet .responsive-selector .phonics-choice .phonics-choice-grapheme { font-size: 36px; }
  .is-phonics-tablet .responsive-selector .phonics-choice .phonics-choice-word { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
}

/* Only extra tablet groups share the alphabet's native horizontal scroller.
   Safe centering leaves overflowing rows start-aligned and fully reachable. */
.mode-phonics .phonics-options-row.responsive-selector.phonics-single-row {
  grid-template-rows: var(--selector-size);
  justify-content: safe center;
}