/* Per-word spelling check; isolated from the accepted learning-card styles. */
.spell-mini { text-align: center; }
.spell-cue { display: flex; align-items: center; justify-content: center; gap: 6px; }
.spell-cue > img { width: min(150px, 45vw); height: clamp(64px, 16dvh, 110px); object-fit: contain; }
.spell-cue > .inline-play { flex: 0 0 44px; width: 44px; height: 44px; }
.spell-answer { display: block; min-height: 44px; padding: 6px 0; border: 0; background: transparent; font-size: clamp(20px, 5vw, 28px); line-height: 1.3; font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }
.spell-letters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.spell-letter { min-width: 44px; min-height: 44px; max-width: 100%; padding: 6px 9px; border: 2px solid #9bd2ea; border-radius: 10px; background: #fff; color: #125188; font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.spell-letter:disabled { opacity: .3; }
.spell-title { position: relative; display:flex; align-items:center; gap:8px; margin:0 0 4px; min-height:44px; }
.spell-title h1 { margin:0; font-size:22px; white-space:nowrap; }
.spell-count { margin-right:auto; color:#6b879e; font-size:13px; white-space:nowrap; }
.spell-mixed, .card.spell-mixed { padding:0; margin:4px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.spell-mixed .spell-answer { margin:4px 0; }
.spell-block-group { margin:6px 0; }
.spell-block-group > h2 { margin:0; color:#527995; font-size:13px; font-weight:600; text-align:left; }
.spell-block-group .spell-letters { margin:5px 0; gap:5px; }
.spell-mixed .feedback { min-height:20px; margin:6px 0; padding:4px 8px; font-size:13px; }
.spell-mixed .feedback:empty { display:none; }
.spell-mixed > [data-action="spell-check"], .spell-next { min-height:44px; }
.spell-tools { display:flex; justify-content:center; gap:8px; margin:4px 0 6px; }
.spell-tool { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:10px; border:0; border-radius:10px; background:transparent; color:#497d9e; }
.spell-tool svg { width:22px; height:22px; }
.spell-tool:disabled { opacity:.3; }
.spell-tool:focus-visible, .spell-progress > summary:focus-visible, .spell-word:focus-visible { outline:3px solid #2589e8; outline-offset:2px; }
.spell-tool[aria-pressed="true"] { background:#e3f2ff; color:#1669b8; }
.spell-progress { flex:0 0 auto; }
.spell-progress > summary { display:flex; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:44px; padding:0 4px; border-radius:10px; color:#527995; font-size:12px; cursor:pointer; list-style:none; }
.spell-progress > summary::-webkit-details-marker { display:none; }
.spell-progress > summary > svg { width:18px; height:18px; }
.spell-progress-panel { position:absolute; inset:100% 0 auto; z-index:12; padding:12px; border:1px solid #d5e6f2; border-radius:12px; background:#fff; box-shadow:0 6px 18px #297fac14; }
.spell-progress:not([open]) > .spell-progress-panel { display:none; }
.spell-progress-panel .learning-progress { margin:0; }
.spell-answer.is-complete { display:flex; align-items:center; justify-content:center; gap:8px; }
.spell-word { min-width:44px; min-height:44px; max-width:100%; padding:0 4px; border:0; border-radius:6px; background:transparent; color:inherit; font:inherit; line-height:inherit; overflow-wrap:anywhere; }
.spell-success { display:inline-flex; flex:0 0 22px; color:#26916a; }
.spell-success svg { width:22px; height:22px; }
.spell-passed .spell-cue > img { height:clamp(90px, 24dvh, 150px); }
.spell-passed .spell-answer { font-size:clamp(26px, 7vw, 36px); }
body.spelling-practice-active .nav { display:none; }
body.spelling-practice-active { padding-bottom:env(safe-area-inset-bottom); }
body[data-page="session"].spelling-practice-active .shell { padding-bottom:0; }
body.spelling-practice-active #view { padding-top:4px; padding-bottom:max(12px, env(safe-area-inset-bottom)); }
body.spelling-practice-active .learning-header { margin-bottom:2px; }
@media(max-width:600px) {
  body:has(.spell-mixed) #view { padding-top:4px; }
  body:has(.spell-mixed) .learning-header { margin-bottom:2px; }
  body:has(.spell-mixed) .learning-progress { margin:4px 0 8px; }
  body:has(.spell-mixed) .learning-progress-status { margin-bottom:3px; }
  body:has(.spell-mixed) .learning-step span { width:24px; height:24px; font-size:10px; }
}
.spell-hint { margin:4px 0 8px; padding:8px; border-radius:10px; background:#eef8ff; font-size:23px; color:#155183; overflow-wrap:anywhere; }
.spell-hint > p { margin:0; }
.session-settings-row { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.session-settings-row > .level-control { margin: 0 auto 0 0; min-width: 0; flex-wrap: wrap; }
.spelling-setting { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 9px 12px; border: 1px solid #c6e3f5; border-radius: 12px; background: #fff; color: #285376; font-size: 13px; white-space: nowrap; }
.spelling-setting[aria-pressed="true"] { background: #e0f1ff; border-color: #2589e8; color: #1669b8; }
.spelling-setting:focus-visible { outline: 3px solid #2589e8; outline-offset: 3px; }

.game-toolbar .game-level[hidden]{display:none}
.game-overlay .game-toolbar{padding-right:76px;flex-wrap:nowrap}
.game-overlay .game-toolbar.learning-toolbar{padding-right:76px}
.game-overlay .game-toolbar #gameScope{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-overlay .game-toolbar #gameLevelContext{flex:0 1 auto;min-width:0;white-space:nowrap}
.learning-definition{max-width:540px;margin:14px auto 18px;font-size:17px;line-height:1.55;overflow-wrap:anywhere}
.learning-definition>p{margin:0}
.learning-definition>.word-translation{margin-top:6px}
.word-settings-trigger[aria-pressed="true"]{background:#e3f2ff;border-color:#2689e8;color:#146bc1}
#qaStorageNotice{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;max-width:100%;padding:2px 8px;border-radius:0 0 8px 8px;background:#fff5cf;color:#634817;font-size:10px;pointer-events:none}

.learning-progress { margin: 12px 0 18px; color: #6b879e; }
.learning-progress-status { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: #205b8c; }
.learning-progress ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.learning-step { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; }
.learning-step:not(:last-child)::after { content: ""; position: absolute; left: 50%; right: -50%; top: 50%; height: 2px; background: #d5e6f2; }
.learning-step span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d5e6f2; border-radius: 50%; background: #f4fbff; font-size: 12px; }
.learning-step.is-done span { background: #dcefff; color: #226da5; border-color: #9dceef; }
.learning-step.is-current span { background: #187df0; color: #fff; border-color: #187df0; box-shadow: 0 0 0 3px #187df01c; font-weight: 750; }
.game-toolbar.learning-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 36px; height: 48px; min-height: 48px; padding: 6px 12px; gap: 6px; }
.game-toolbar.learning-toolbar > [data-action="game-exit"] { grid-column: 1; grid-row: 1; padding: 7px 9px; }
.game-toolbar.learning-toolbar > #gameScope, .game-toolbar.learning-toolbar > #gameLevelContext { display: none; }
.game-toolbar.learning-toolbar > #gameLearningProgress { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; max-width: 640px; justify-self: center; }
.game-toolbar.learning-toolbar > #gameAmbientToggle { grid-column: 3; grid-row: 1; }
.learning-progress.is-compact { margin: 0; }
.learning-progress.is-compact .learning-progress-status { margin: 0 0 5px; font-size: 10px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learning-progress.is-compact .learning-step span { width: 20px; height: 20px; font-size: 10px; }
@media (max-width: 360px) { .learning-progress.is-compact .learning-step span { width: 17px; height: 17px; font-size: 9px; } }

body[data-page="session"] #oceanHeader, body[data-page="cards"] #oceanHeader, body[data-page="complete"] #oceanHeader { display: none; }
.learning-header { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-height: 44px; }
.learning-back { display: grid; place-items: center; flex: 0 0 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #2488d4; font-size: 24px; }
.learning-course { flex: 1; min-width: 0; margin: 0; color: #527995; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.learning-header > .playback-settings-trigger { flex: 0 0 44px; background: transparent; border-color: transparent; }
.learning-back:focus-visible { outline: 3px solid #2589e8; outline-offset: 2px; }
.learning-card.learner-simple .learning-tools { align-items: center; flex-wrap: wrap; gap: 6px; min-height: 44px; margin: 0 0 4px; padding: 0; border: 0; }
.learning-card.learner-simple .vocabulary-add.is-compact { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; }
.learning-card.learner-simple .word-settings-trigger { min-height: 44px; padding: 6px 10px; border: 0; background: transparent; }
.learning-card.learner-simple .word-settings-trigger[aria-pressed="true"] { background: #e3f2ff; }
.learning-card.learner-simple .learner-playback-status { flex-basis: auto; border: 0; padding: 0; }
.learner-playback-status .playback-status-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.learner-playback-status .playback-status-actions button { border: 0; background: transparent; font-size: 15px; }

/* Word Voyage skin: only the current spelling practice, with no gameplay state. */
body.spelling-practice-active {
  --voyage-picture-size: clamp(144px, 23dvh, 180px);
  --voyage-whale-size: clamp(70px, 22vw, 100px);
  --voyage-ink: #244e6e;
  padding-bottom: 0;
  background: #dff4f7;
}
body.spelling-practice-active .shell {
  overflow: visible;
  background: linear-gradient(180deg, #f1fbffb8 0%, #eafaffd9 34%, #e7fbf9c9 68%, #fff4dfdc 100%),
    url('../themes/ocean-games-v3/treasure/background_cove.png') center bottom / cover no-repeat;
}
body.spelling-practice-active #view {
  width: 100%;
  max-width: 672px;
  margin: 0 auto;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
}
body.spelling-practice-active .voyage-header {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  margin: 0 0 8px;
}
body.spelling-practice-active .voyage-header > .learning-back {
  width: 44px;
  height: 44px;
  border: 1px solid #f9feff;
  border-radius: 50%;
  background: linear-gradient(150deg, #eafcffed, #75bedcbb);
  color: #17688f;
  box-shadow: inset 0 2px 3px #fff, 0 2px 5px #2c809523;
}
body.spelling-practice-active .voyage-sign {
  position: relative;
  min-width: 0;
  width: min(100%, 260px);
  justify-self: center;
  margin: 0;
  padding: 7px 6px 8px;
  border: 1px solid #b9844d;
  border-radius: 11px 14px 10px 13px;
  background: repeating-linear-gradient(0deg, #d8a86e 0 11px, #cf9a60 11px 12px, #dfb77e 12px 23px);
  box-shadow: inset 0 2px 0 #f7d7a5, 0 3px 0 #a97540, 0 5px 8px #6e573220;
  color: #4b301a;
  font-size: clamp(18px, 4.9vw, 25px);
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 0 #ffe7bb;
  white-space: nowrap;
}
body.spelling-practice-active .voyage-sign::before,
body.spelling-practice-active .voyage-sign::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 4px;
  height: 9px;
  border-radius: 3px;
  background: repeating-linear-gradient(35deg, #ab8052 0 2px, #f3d2a1 2px 4px);
  pointer-events: none;
}
body.spelling-practice-active .voyage-sign::before { left: 18px; }
body.spelling-practice-active .voyage-sign::after { right: 18px; }
body.spelling-practice-active .voyage-progress > summary {
  min-width: 56px;
  min-height: 44px;
  gap: 3px;
  padding: 0 5px;
  border: 1px solid #f8feff;
  border-radius: 24px;
  background: linear-gradient(150deg, #f4feffe8, #96d6e5bf);
  color: #285e7c;
  box-shadow: inset 0 2px 3px #fff, 0 2px 5px #2c80951a;
}
body.spelling-practice-active .voyage-progress .spell-count {
  margin: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 800;
}
body.spelling-practice-active .voyage-progress > summary > svg { width: 12px; height: 12px; }
body.spelling-practice-active .voyage-progress .spell-progress-panel {
  inset: calc(100% + 6px) 0 auto auto;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  text-align: left;
}
body.spelling-practice-active .voyage-progress .learning-course { margin-bottom: 12px; }
body.spelling-practice-active .voyage-header > .playback-settings-trigger {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid #f8feff;
  border-radius: 50%;
  background: linear-gradient(150deg, #f4feffe8, #96d6e5bf);
  color: #285e7c;
  box-shadow: inset 0 2px 3px #fff, 0 2px 5px #2c80951a;
}
body.spelling-practice-active .word-voyage {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  margin: 0 auto;
  color: var(--voyage-ink);
}
body.spelling-practice-active .word-voyage > * { min-width: 0; }
body.spelling-practice-active .word-voyage[data-voyage-density="many"] { --voyage-picture-size: clamp(112px, 18dvh, 144px); }
body.spelling-practice-active .word-voyage[data-voyage-density="long"] { --voyage-picture-size: 112px; gap: 3px; }
body.spelling-practice-active .word-voyage[data-voyage-density="long"] .spell-block-group { margin-bottom: 6px; }
body.spelling-practice-active .word-voyage[data-voyage-density="long"] .spell-letter { padding-right: 9px; padding-left: 9px; font-size: 20px; }
body.spelling-practice-active .voyage-hero {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding-top: 3px;
}
body.spelling-practice-active .spell-cue.voyage-picture {
  position: relative;
  display: block;
  width: var(--voyage-picture-size);
  height: var(--voyage-picture-size);
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 23px;
  background: #ffffffdc;
  box-shadow: 0 5px 17px #498e9f23;
}
body.spelling-practice-active .spell-cue.voyage-picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 19px;
}
body.spelling-practice-active .voyage-prompt {
  margin: 0;
  color: #255474;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}
body.spelling-practice-active .voyage-waterline {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 94px;
  padding: 10px 0 14px;
}
body.spelling-practice-active .voyage-waterline::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 8px;
  left: 0;
  z-index: -1;
  height: 20px;
  border-radius: 50%;
  background: #ffffff70;
  box-shadow: 0 4px 0 #8fcbdc2b, 0 7px 0 #ffffff4a;
  pointer-events: none;
}
body.spelling-practice-active .voyage-whale {
  position: absolute;
  top: 50%;
  left: -3px;
  z-index: 3;
  width: var(--voyage-whale-size);
  height: auto;
  transform: translateY(-52%);
  filter: drop-shadow(0 3px 2px #5e9caf29);
  pointer-events: none;
}
body.spelling-practice-active .voyage-raft {
  position: relative;
  display: grid;
  align-items: center;
  width: calc(100% - 58px);
  min-width: 0;
  min-height: 68px;
  margin-left: 58px;
  padding: 9px 16px;
  padding-left: max(16px, calc(var(--voyage-whale-size) - 52px));
  border: 2px solid #bc8d57;
  border-radius: 17px 21px 14px 18px;
  background: repeating-linear-gradient(0deg, #e5bb80 0 10px, #c79c64 10px 12px, #f1ce97 12px 24px);
  box-shadow: inset 0 2px 0 #ffe7bb, 0 4px 0 #ad7d49, 0 7px 7px #6593a031;
}
body.spelling-practice-active .voyage-raft::before {
  content: '';
  position: absolute;
  inset: 5px 8px;
  border-right: 3px solid #b88d54;
  border-left: 3px solid #b88d54;
  border-radius: 7px;
  box-shadow: inset 1px 0 0 #f6d7a3, inset -1px 0 0 #f6d7a3;
  pointer-events: none;
}
body.spelling-practice-active .voyage-raft > .spell-answer,
body.spelling-practice-active .voyage-raft > .voyage-hint {
  grid-area: 1 / 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
body.spelling-practice-active .voyage-raft > .spell-answer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 2px;
  color: #294f6a;
  font-size: clamp(23px, 6vw, 32px);
}
body.spelling-practice-active .voyage-raft > .spell-answer.is-empty {
  color: #836749;
  font-size: 14px;
  font-weight: 600;
}
body.spelling-practice-active .voyage-raft > .voyage-hint {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 5px 2px;
  border: 1px solid #ddc28d;
  border-radius: 8px;
  background: #fff7e7;
  color: #295574;
  font-size: 25px;
  line-height: 1.35;
}
body.spelling-practice-active .voyage-raft:has(> .voyage-hint:not([hidden])) > .spell-answer { visibility: hidden; }
body.spelling-practice-active .voyage-shore {
  padding: 2px 0 5px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff7e200, #fff5de73 45%, #f6e6cc63);
}
body.spelling-practice-active .voyage-shore .spell-block-group { margin: 3px 0 8px; }
body.spelling-practice-active .voyage-shore .spell-block-group > h2 {
  margin: 0 0 3px;
  color: #4d7891;
  font-size: 11px;
  line-height: 16px;
  text-align: left;
}
body.spelling-practice-active .voyage-shore .spell-letters { gap: 5px; margin: 0; }
body.spelling-practice-active .voyage-shore .spell-letter {
  min-width: 44px;
  min-height: 48px;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 2px solid #d5c7ab;
  border-radius: 38% 43% 33% 36% / 45% 42% 34% 35%;
  background: radial-gradient(ellipse at 30% 15%, #ffffffdd, transparent 48%), linear-gradient(155deg, #fffdf6, #eadfc8);
  box-shadow: inset 0 2px 1px #fff, 0 3px 0 #b9aa8f, 0 4px 5px #548b9b1b;
  color: #255575;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
}
body.spelling-practice-active .voyage-shore .spell-letter:nth-child(3n + 1) {
  border-radius: 43% 48% 36% 30% / 47% 45% 35% 40%;
  background: radial-gradient(ellipse at 25% 15%, #fff, transparent 50%), linear-gradient(155deg, #fff8e7, #e9d6b2);
}
body.spelling-practice-active .voyage-shore .spell-letter:nth-child(3n + 2) { border-radius: 44% 37% 35% 42% / 43% 49% 34% 37%; }
body.spelling-practice-active .voyage-shore .spell-letter:disabled { opacity: .38; box-shadow: inset 0 1px 0 #ffffffa0; }
body.spelling-practice-active .voyage-shore .spell-letter:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b9aa8f; }
body.spelling-practice-active .voyage-controls {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-bottom: 4px;
}
body.spelling-practice-active .voyage-controls .spell-tools { gap: 12px; margin: 0; }
body.spelling-practice-active .voyage-controls .spell-tool {
  border: 1px solid #ffffffeb;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7feffdc, #87cbe1b8);
  color: #286c94;
  box-shadow: inset 0 2px 2px #fff, 0 2px 4px #457f9820;
}
body.spelling-practice-active .voyage-controls .spell-tool[aria-pressed="true"] { background: linear-gradient(#fff9cf, #e9d68a); color: #8d7130; }
body.spelling-practice-active .voyage-controls .feedback { width: 100%; margin: 0; padding: 4px 6px; font-size: 12px; line-height: 1.4; }
body.spelling-practice-active .voyage-controls > [data-action="spell-check"],
body.spelling-practice-active .voyage-controls > [data-action="learn-next"] {
  width: min(240px, 86%);
  min-height: 48px;
  padding: 9px 18px;
  border: 2px solid #e4faff;
  border-radius: 28px;
  background: linear-gradient(#46b5ed, #1987d6);
  color: #fff;
  box-shadow: inset 0 2px 1px #a7e6ff, 0 4px 0 #146ea7, 0 6px 8px #327e9d22;
  font-size: 18px;
  line-height: 1.2;
}
body.spelling-practice-active .word-voyage.spell-passed .voyage-raft { animation: voyage-gentle-push 520ms ease-out 1 both; }
body.spelling-practice-active .word-voyage.spell-passed .voyage-shore:empty { display: none; }
@keyframes voyage-gentle-push {
  from { transform: translateX(-4px) rotate(-.5deg); }
  to { transform: translateX(0) rotate(0); }
}
@media (max-width: 360px) {
  body.spelling-practice-active #view { padding-right: 12px; padding-left: 12px; }
  body.spelling-practice-active .voyage-header { gap: 6px; }
  body.spelling-practice-active .voyage-sign { padding-right: 4px; padding-left: 4px; font-size: 18px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  body.spelling-practice-active { --voyage-picture-size: clamp(112px, calc(128px - env(safe-area-inset-bottom, 0px)), 128px); }
  body.spelling-practice-active #view { padding-top: 6px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.spelling-practice-active .voyage-header { min-height: 44px; margin-bottom: 4px; }
  body.spelling-practice-active .word-voyage { gap: 3px; }
  body.spelling-practice-active .voyage-hero { gap: 6px; padding-top: 0; }
  body.spelling-practice-active .voyage-prompt { font-size: 14px; }
  body.spelling-practice-active .voyage-waterline { min-height: 80px; padding-top: 4px; padding-bottom: 8px; }
  body.spelling-practice-active .voyage-shore { padding: 0; }
  body.spelling-practice-active .voyage-shore .spell-block-group { margin: 0 0 4px; }
  body.spelling-practice-active .voyage-shore .spell-block-group > h2 { margin-bottom: 2px; line-height: 14px; }
  body.spelling-practice-active .voyage-shore .spell-letter { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  body.spelling-practice-active .voyage-controls { gap: 4px; padding-bottom: 0; }
  body.spelling-practice-active .voyage-controls > [data-action="spell-check"],
  body.spelling-practice-active .voyage-controls > [data-action="learn-next"] { min-height: 44px; }
}
@media (max-width: 600px) and (max-height: 600px) {
  body.spelling-practice-active { --voyage-picture-size: 112px; }
  body.spelling-practice-active .voyage-prompt { font-size: 14px; }
  body.spelling-practice-active .voyage-shore .spell-block-group { margin-bottom: 6px; }
}
@media (min-width: 600px) and (max-height: 500px) {
  body.spelling-practice-active { --voyage-picture-size: 128px; }
  body.spelling-practice-active .word-voyage { grid-template-columns: minmax(140px, .75fr) minmax(280px, 1.3fr); column-gap: 18px; align-items: start; }
  body.spelling-practice-active .voyage-hero { grid-column: 1; grid-row: 1 / 4; padding-top: 12px; }
  body.spelling-practice-active .voyage-waterline { grid-column: 2; grid-row: 1; min-height: 84px; }
  body.spelling-practice-active .voyage-shore { grid-column: 2; grid-row: 2; }
  body.spelling-practice-active .voyage-controls { grid-column: 2; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  body.spelling-practice-active .word-voyage.spell-passed .voyage-raft { animation: none; }
  body.spelling-practice-active .voyage-shore .spell-letter { transition: none; }
}

/* Multi-block phone questions prioritize the complete choices and controls. */
@media (max-width: 600px) and (max-height: 900px) {
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) {
    --voyage-picture-size: 72px;
    --voyage-whale-size: 56px;
    gap: 3px;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-hero { gap: 4px; padding-top: 0; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-prompt { font-size: 14px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-waterline { min-height: 64px; padding: 3px 0 5px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-waterline::after { bottom: 3px; height: 12px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-whale { left: -1px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-raft {
    width: calc(100% - 44px);
    min-height: 56px;
    margin-left: 44px;
    padding: 4px 12px;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-raft::before { inset: 3px 6px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-shore { padding: 0; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .spell-block-group { margin: 0 0 3px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .spell-block-group > h2 { margin-bottom: 2px; line-height: 14px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .spell-letters { gap: 3px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .spell-letter {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 9px;
    font-size: 20px;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-controls {
    grid-template-columns: 140px minmax(96px, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 3px 6px;
    padding-bottom: 0;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-controls .spell-tools {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    gap: 4px;
    width: 140px;
    margin: 0;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-controls > [data-action="spell-check"] {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 96px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 16px;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-controls .feedback {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 3px 4px;
  }
}

/* Narrow short phones share a top row; no choices or actions are removed. */
@media (max-width: 360px) and (max-height: 700px) {
  body.spelling-practice-active #view { padding-top: 4px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) {
    position: relative;
    grid-template-columns: 44px minmax(0, 1fr) 56px 44px 48px;
    grid-template-rows: 48px minmax(32px, auto) minmax(88px, auto) auto minmax(44px, auto);
    gap: 3px;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-header,
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-hero { display: contents; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-header > .learning-back {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-sign {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 4px;
    font-size: 14px;
    line-height: 1.15;
    white-space: normal;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-picture {
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    width: 48px;
    height: 48px;
    aspect-ratio: 1;
    border: 3px solid #fff;
    border-radius: 14px;
    box-shadow: 0 2px 7px #498e9f20;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-picture > img {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 10px;
    object-fit: contain;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-progress {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-header > .playback-settings-trigger {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    justify-self: center;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-progress .spell-progress-panel {
    inset: 52px 0 auto auto;
    width: 100%;
    max-width: 360px;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-message {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    align-items: center;
    min-height: 32px;
    min-width: 0;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-message > .voyage-prompt,
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-message > .feedback {
    margin: 0;
    padding: 0;
    background: transparent;
    color: #255474;
    font-size: 12px;
    line-height: 16px;
    overflow-wrap: anywhere;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-waterline {
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: stretch;
    min-height: 88px;
    padding: 0;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-whale {
    top: auto;
    bottom: -2px;
    left: -4px;
    width: 40px;
    transform: none;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-raft {
    width: 100%;
    min-height: 88px;
    margin: 0;
    padding: 6px 10px;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-raft > .spell-answer,
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-raft > .voyage-hint {
    min-height: 72px;
    padding: 0;
    border: 0;
    font-size: 20px;
    line-height: 24px;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-hint > p { line-height: 24px; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-shore {
    grid-column: 1 / -1;
    grid-row: 4;
    padding: 0;
  }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-shore .spell-block-group { margin-bottom: 0; }
  body.spelling-practice-active .word-voyage:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-controls {
    grid-column: 1 / -1;
    grid-row: 5;
    min-height: 44px;
    padding: 0;
  }
}

/* Each selected instance moves here from its original pool, without duplication. */
body.spelling-practice-active .spell-answer.spell-selected {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 3px;
  white-space: normal;
}
body.spelling-practice-active .spell-return {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 9px;
  border: 2px solid #bb8b51;
  border-radius: 10px;
  background: linear-gradient(#fff7e6, #efd09a);
  color: #245171;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ad7d49;
}
body.spelling-practice-active .spell-return:disabled { opacity: .5; }
body.spelling-practice-active .spell-return:focus-visible,
body.spelling-practice-active .voyage-picture:focus-visible { outline: 3px solid #2589e8; outline-offset: 2px; }

/* Feedback and hint changes keep their existing picture and layout boxes. */
body.spelling-practice-active .word-voyage[data-spell-state] .voyage-message {
  display: grid;
  align-items: center;
  width: 100%;
  height: 32px;
  min-height: 32px;
}
body.spelling-practice-active .word-voyage[data-spell-state] .voyage-message > p {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #255474;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}
body.spelling-practice-active .word-voyage[data-spell-state] .voyage-raft {
  min-height: 88px;
  padding-top: 6px;
  padding-bottom: 6px;
  animation: none;
}
body.spelling-practice-active .word-voyage[data-spell-state] .voyage-raft > .spell-answer { min-height: 72px; }
body.spelling-practice-active .word-voyage[data-spell-state] .voyage-raft > .voyage-hint {
  position: absolute;
  inset: 6px 10px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 24px;
}
body.spelling-practice-active .word-voyage[data-spell-state] .voyage-hint > p { line-height: 24px; }
body.spelling-practice-active .word-voyage.spell-passed .voyage-controls { grid-template-columns: minmax(0, 1fr); }
body.spelling-practice-active .word-voyage.spell-passed .voyage-controls > [data-action="learn-next"] { grid-column: 1 / -1; justify-self: center; }
@media(max-width:600px) {
  body.spelling-practice-active .word-voyage[data-whole-unit]:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-controls { grid-template-columns:188px minmax(96px,1fr); }
  body.spelling-practice-active .word-voyage[data-whole-unit]:is([data-voyage-density="many"], [data-voyage-density="long"]) .voyage-controls .spell-tools { width:188px; gap:4px; }
}

/* A disconnected selected unit stays one native return control around its selected gap blocks. */
body.spelling-practice-active .spell-split-group {
  display: inline-grid;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 3px;
}
body.spelling-practice-active .spell-return.spell-return-split {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: subgrid;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
body.spelling-practice-active .spell-split-part {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 9px;
  border: 2px solid #bb8b51;
  border-radius: 10px;
  background: linear-gradient(#fff7e6, #efd09a);
  color: #245171;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ad7d49;
  pointer-events: auto;
}
body.spelling-practice-active .spell-split-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: #245171;
  font-size: 20px;
  line-height: 1.15;
  pointer-events: none;
}

/* No breadcrumb bar in free practice; keep real formal-learning progress. */
.game-overlay .game-toolbar:not(.learning-toolbar){display:contents}
.game-overlay .game-toolbar #gameScope,.game-overlay .game-toolbar #gameLevelContext{display:none}
.game-overlay .game-toolbar:not(.learning-toolbar) #gameAmbientToggle{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:12px;z-index:4;width:44px;height:44px}
.game-overlay .game-toolbar.learning-toolbar{padding-right:12px}

/* With no skip footer, keep the optional sound control clear of narrow-screen Hint. */
@media(max-width:350px){.game-overlay .game-toolbar:not(.learning-toolbar) #gameAmbientToggle{left:2px}}

.learning-step-button{position:relative;z-index:2;display:grid;place-items:center;width:100%;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;cursor:pointer}
.learning-step-button:hover,.learning-step-button:active{background:transparent;box-shadow:none;transform:none}
.learning-step-button:focus-visible{outline:2px solid #187df0;outline-offset:1px;border-radius:8px}