/* v5.42: readable companion names, larger battle board, illustrated Dictation. */

/* Names precede portraits in both galleries. Images have a definite square box;
   their intrinsic SVG size cannot push labels outside a grid row. */
#petOptions, #petDexGrid { grid-auto-rows: max-content; }
#petOptions .pet-option {
  height: auto; max-height: none; justify-content: flex-start;
  padding: 14px 12px 16px; gap: 10px; overflow: visible;
}
#petOptions .pet-option > .companion-card-name,
#petDexGrid .dex-card > .companion-card-name {
  position: static; flex: none; display: block; width: 100%;
  height: auto; min-height: 1.4em; margin: 0; padding: 2px 0 5px;
  line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
  text-overflow: clip; overflow: visible; color: #322849;
}
#petOptions .pet-option > .companion-card-name { font-size: 19px; }
#petOptions .pet-option-art {
  position: relative; display: block; flex: none; width: 100%; max-width: 174px;
  aspect-ratio: 1; margin: 0 auto; contain: size layout;
}
#petOptions .pet-option-art > svg {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  max-width: none; margin: 0;
}
#petOptions .pet-option > small {
  flex: none; width: 100%; margin: 0; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere;
}
#petDexGrid .dex-card {
  height: auto; max-height: none; min-height: 0; overflow: visible;
  justify-content: flex-start; padding-bottom: 18px;
}
#petDexGrid .dex-card > * { flex-shrink: 0; }
#petDexGrid .dex-card::before { display: none; }
#petDexGrid .dex-number { position: static; text-align: left; margin: 0 0 3px; }
#petDexGrid .dex-card > .companion-card-name { font-size: 23px; margin-bottom: 8px; }
#petDexGrid .dex-art {
  flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: 1;
  max-width: 240px; margin: 0 auto 10px; contain: size layout;
}
#petDexGrid .dex-art > .pet-svg,
#petDexGrid .dex-art > .pet-silhouette {
  position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px);
}
#petDexGrid .dex-chapter, #petDexGrid .dex-card p { overflow-wrap: anywhere; }
#petDexGrid .dex-use { margin-top: auto; white-space: normal; }
@media (max-width:640px) {
  #petOptions .pet-option { padding: 10px 9px 14px; gap: 7px; }
  #petOptions .pet-option > .companion-card-name { font-size: 17px; }
  #petDexGrid .dex-card > .companion-card-name { font-size: 20px; }
}

/* Scale the complete console by 1.2, including its safe playing aperture.
   Keeping v541 aperture coordinates avoids covering its illustrated mascots.
   Width is capped on narrow screens; Fit/Zoom remains available. */
#wordforgeDialog .wf-battle-grid {
  grid-template-columns: minmax(0,2fr) minmax(0,3fr);
}
#wordforgeDialog .wf-board-shell {
  width: min(100%,max(400.2px,calc(138svh - 579.6px)),786.6px);
}
#wordforgeDialog .wf-board-shell.ornate {
  width: min(100%,max(469.2px,calc(138svh - 372.6px)),883.2px);
}
#wordforgeDialog .wf-board-shell.ornate .wf-board-viewport.fit .wf-square > b {
  font-size: clamp(11px,1.5vw,21px);
}
@media (min-width:761px) and (max-width:1180px) {
  #wordforgeDialog .wf-battle-grid { grid-template-columns: minmax(270px,.54fr) minmax(0,1fr); }
}
@media (max-width:760px) {
  #wordforgeDialog .wf-board-shell { width: min(100%,579.6px); }
  #wordforgeDialog .wf-board-shell.ornate { width: min(100%,648.6px); }
  #wordforgeDialog .wf-board-shell.ornate .wf-board-viewport.fit .wf-square > b {
    font-size: clamp(10px,2.9vw,18px);
  }
}

/* Four story illustrations, with lesson information on a separate readable panel. */
.dashboard .quest-panel .quest-node {
  padding: 0; min-height: 0; height: auto; border-radius: 22px;
  background: linear-gradient(150deg,#fffdfa 30%,var(--node));
}
.dashboard .quest-panel .quest-node::before { display: none; }
.dashboard .quest-panel .quest-node .quest-scene {
  flex: none; display: block; position: relative; width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden; border-bottom: 2px solid #e8cf91; background: #e9dcf5;
}
.dashboard .quest-panel .quest-scene img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform .25s ease;
}
.dashboard .quest-panel .quest-card-copy {
  display: flex; flex-direction: column; flex: 1; padding: 14px 16px 15px; min-width: 0;
}
.dashboard .quest-panel .quest-card-top {
  display: flex; align-items: center; gap: 9px; min-height: 0; padding: 0;
  margin: 0 0 10px;
}
.dashboard .quest-panel .quest-number {
  flex: none; width: 32px; height: 30px; font-size: 15px; border-radius: 9px;
}
.dashboard .quest-panel .quest-card-tag {
  display: block; position: static; margin: 0; font-size: 10px;
  line-height: 1.4; letter-spacing: .07em;
}
.dashboard .quest-panel .quest-node h4 {
  margin: 0 0 7px; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere;
}
.dashboard .quest-panel .quest-node p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.dashboard .quest-panel .quest-node .quest-stars { margin: auto 0 9px; font-size: 19px; }
.dashboard .quest-panel .quest-enter { padding-top: 9px; font-size: 14px; }
.dashboard .quest-panel .quest-node:focus-visible {
  outline: 3px solid #7250b2; outline-offset: 4px;
}
@media (hover:hover) {
  .dashboard .quest-panel .quest-node:hover .quest-scene img { transform: scale(1.025); }
}
@media (max-width:600px) {
  .dashboard .quest-panel .quest-card-copy { padding: 12px 12px 14px; }
  .dashboard .quest-panel .quest-node h4 { font-size: 20px; }
  .dashboard .quest-panel .quest-card-tag { font-size: 9px; }
  .dashboard .quest-panel .quest-node p { font-size: 13px; }
}
@media (prefers-reduced-motion:reduce) {
  .dashboard .quest-panel .quest-scene img { transition: none; }
  .dashboard .quest-panel .quest-node:hover .quest-scene img { transform: none; }
}