/* Presentation only: do not change canvas attributes, game coordinates or input.
   Keep the existing arcade palette; classroom descriptions sit on light paper. */
.pc-skills.pc-skills,
.pc-skills.pc-skills h2,
.pc-skills.pc-skills p,
.pc-skills.pc-skills .pc-skill-tags {
  color: #193b30;
}
.pc-skills .pc-skill-tags span {
  color: #193b30;
  border-color: #59755e;
  background: transparent;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Grid/flex intrinsic canvas and text widths must not widen their panels. */
:is(.ij-page, .pf-page, .sc-page, .sl-page, .td-page, .play-page, .play-arcade, .play-manuals, .play-faq) {
  min-width: 0;
  overflow-wrap: anywhere;
}
:is(.ij-card, .pf-card, .td-card, .sc-canvas-col, .sc-info-col,
    .play-card, .play-sidecard, .play-gamecard, .play-gamecard-body,
    .play-manual-body, .sl-panel, .sl-fields label, .sl-actions) {
  min-width: 0;
  max-width: 100%;
}
:is(.ij-page, .pf-page, .sc-page, .td-page, .play-page, .play-arcade) canvas {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
:is(.ij-page .ij-hint, .pf-page .pf-hint, .td-page .td-hint,
    .sc-page .sc-instructions, .play-page .play-control-hint,
    .play-arcade .play-control-hint, .sl-page #sl-instruction,
    .sl-page #sl-input-hint) {
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
  max-height: none;
  line-height: 1.6;
}
.play-page .play-control-hint,
.play-arcade .play-control-hint {
  color: #cdebe2;
}
.play-arcade .play-grid,
.play-page .play-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.play-arcade .play-cabinet-row,
.play-page .play-cabinet-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.play-cabinet .play-cabinet-head { flex-wrap: wrap; }
.play-arcade .play-cat,
.play-page .play-cat { border-color: #779284; }
:is(.play-page, .play-arcade, .sc-page) .nc-leaderboard {
  table-layout: fixed;
  overflow-wrap: anywhere;
}
.td-page .td-share-link { min-width: 0; max-width: 100%; }
@media (max-width: 860px) {
  .play-arcade .play-cabinet-row,
  .play-page .play-cabinet-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sl-page .sl-fields { grid-template-columns: minmax(0, 1fr); }
  .sl-page .sl-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}