#title .cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(830px, calc(100vw - 28px));
  max-height: 43dvh;
  overflow-y: auto;
  padding: 4px;
}

#title .card { min-height: 65px; }
.hud-side .v8-zoom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  font: 500 24px/1 Fredoka, sans-serif;
  color: #76558a;
}
.v8-zoom small { font: 800 10px/1.2 Nunito, sans-serif; }
.v8-zoom[aria-pressed="true"] { background: #ede1f4; }
.v8-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.v8-activity-grid > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 18px;
  min-height: 132px;
  border: 1px solid #e3d8dc;
  border-radius: 21px;
  background: #f6e8e3;
  color: #62495f;
}
.v8-activity-grid > button:nth-child(3n + 2) { background: #eee7f4; }
.v8-activity-grid > button:nth-child(3n + 3) { background: #e5eee4; }
.v8-activity-grid > button:active { transform: scale(.98); }
.v8-activity-grid > button span { font-size: 30px; line-height: 1; }
.v8-activity-grid strong { font: 500 22px/1.12 Fredoka, sans-serif; }
.v8-activity-grid small { font: 700 13px/1.35 Nunito, sans-serif; }
.v8-activity-grid > button:focus-visible,
.v8-tv-controls button:focus-visible,
.v8-activity-status button:focus-visible { outline: 3px solid #9e79b9; outline-offset: 3px; }
.v8-tv-screen {
  width: min(100%, 590px);
  margin: 0 auto 14px;
  padding: 8px;
  background: #65536e;
  border-radius: 20px;
}
.v8-tv-screen canvas { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 13px; }
.v8-tv-controls, .v8-home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.v8-tv-controls button, .v8-activity-status button {
  min-height: 46px;
  padding: 8px 13px;
  border-radius: 14px;
  background: #f0e6ed;
  color: #65476c;
  font: 800 14px/1.2 Nunito, sans-serif;
}
.v8-tv-controls button[aria-pressed="true"] { background: #dfc9e8; }
.v8-tv-caption { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 12px; }
.v8-tv-caption p { font: 700 14px/1.35 Nunito, sans-serif; }
.v8-home-panel { margin-bottom: 16px; padding: 22px; text-align: center; border-radius: 21px; }
.v8-home-panel p { margin: 5px 0 0; font: 800 18px/1.4 Nunito, sans-serif; }
.v8-panel-icon { font-size: 42px; }
.v8-bath-panel { background: #e1eee4; }
.v8-pyjama-panel { background: #eae1f2; }
.v8-activity-status {
  position: absolute;
  top: 210px;
  left: max(15px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(260px, 60vw);
  padding: 7px;
  border: 1px solid #fff;
  border-radius: 17px;
  background: #fff9efef;
  font: 800 13px/1.2 Nunito, sans-serif;
}
.v8-activity-status span { padding: 6px; }
.v8-activity-status button { min-height: 44px; font-size: 12px; }
.v8-activity-status[hidden] { display: none; }

@media (orientation: portrait) {
  #title .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v8-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v8-activity-status { top: 212px; }
  .hud-side .rb { width: 56px; height: 56px; }
}

@media (max-width: 510px) and (orientation: portrait) {
  .school-nav { gap: 2px; }
  .school-nav > button { min-width: 44px; padding: 7px 3px; font-size: 10px; }
  .school-nav > button span { font-size: 19px; }
  .school-nav > button[data-open="settings"] { min-width: 44px; padding-inline: 3px; }
  #title .card { padding: 5px 3px; }
  #title .card small { font-size: 9px; }
  .v8-activity-grid { gap: 9px; }
  .v8-activity-grid > button { min-height: 122px; padding: 12px; }
  .v8-activity-grid strong { font-size: 17px; }
  .v8-activity-grid small { font-size: 11px; }
  .v8-tv-controls button { width: 100%; }
  .hud-side .rb { width: 50px; height: 50px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  #title .card { min-height: 51px; padding: 3px 4px; }
  #title .card .em { font-size: 20px; }
  #title .card b { font-size: 13px; }
  #title .card small { font-size: 10px; }
  .hud-side { gap: 5px; }
  .hud-side .rb { width: 46px; height: 46px; }
  .v8-activity-status { top: 128px; }
}