/* v5: every game names its current question or goal, even without motion. */
html[data-eco-theme] :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.game-shell .runner-quiz,.game-shell .eco-goal-cue) {
  position:relative; isolation:isolate; box-sizing:border-box;
  border:2px solid #85f5ff !important; outline:none !important; border-radius:14px !important;
  background:linear-gradient(110deg,#09263a 10%,#104357 43%,#176579 50%,#104357 57%,#09263a 90%) !important;
  background-size:260% 100% !important; color:#f8ffff !important;
  box-shadow:inset 0 0 0 1px #b6ffff44,0 0 10px #19d4f780,0 0 22px #13bddd40 !important;
  padding:10px 14px !important; animation:eco-cue-shine 4s ease-in-out infinite !important;
}
html[data-eco-theme] :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.game-shell .runner-quiz,.game-shell .eco-goal-cue)::before {
  content:'✦ 현재 문제'; display:block; position:relative; width:fit-content; max-width:100%;
  margin:0 0 6px; padding:4px 10px; border-radius:6px; background:#ffe59a; color:#152a3d;
  font:900 13px/1.3 'Malgun Gothic',sans-serif; letter-spacing:.03em; text-shadow:none;
  -webkit-text-stroke:0; box-shadow:0 0 12px #ffdf7d60; white-space:normal;
}
html[data-eco-theme] .game-modal .sky-question-title::before,html[data-eco-theme] .game-modal .wb-quiz h3::before {content:'✦ 현재 문제 · 뜻에 맞는 영어 단어';margin-left:auto;margin-right:auto}
html[data-eco-theme] .game-modal .sentence-prompt::before {content:'✦ 현재 문제 · 영어 문장 만들기'}
html[data-eco-theme] .game-modal .em-mission::before {content:'✦ 현재 문제 · 알파벳을 순서대로'}
html[data-eco-theme] .game-modal .eco-match-check h3::before {content:'✦ 현재 문제 · 알맞은 짝을 찾아요'}
html[data-eco-theme] .game-modal .safari-study-guide::before {content:'✦ 이번 목표 · 단어와 뜻의 짝 찾기'}
html[data-eco-theme] .game-shell .runner-quiz::before {content:'✦ 현재 문제 · O / X로 답해요'}
html[data-eco-theme] .game-shell .eco-goal-cue::before {content:'✦ 이번 목표';margin-bottom:3px}
html[data-eco-theme] :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.game-shell .runner-quiz,.game-shell .eco-goal-cue)::after {
  content:'' !important;position:absolute !important;top:auto !important;transform:none !important;left:8%;right:8%;bottom:0;height:3px;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#e5ffff,#55eaff,transparent);background-size:200% 100%;
  box-shadow:0 0 9px #52ebff;animation:eco-cue-laser 2.8s ease-in-out infinite alternate;
}
html[data-eco-theme] :is(.sky-question-meaning,.wb-quiz h3,.sentence-prompt strong,.em-mission h3,.eco-match-check h3,.eco-study-question,.game-shell .runner-question,.game-shell .eco-goal-cue strong) {
  color:#f8ffff !important; text-shadow:0 0 10px #75eaff70 !important;-webkit-text-stroke:0;animation:none !important;
}
/* A heading can itself be the panel. Keep the panel's sweep on these headings. */
html[data-eco-theme] :is(.game-modal .wb-quiz h3,.game-modal .eco-match-check h3,.eco-english-game .eco-study-question){animation:eco-cue-shine 4s ease-in-out infinite !important}
html[data-eco-theme] :is(.sky-question-caption,.sentence-prompt small,.em-mission small,.safari-study-guide p,.runner-quiz-meta,.runner-answer-hint,.runner-explanation){color:#dcfaff !important;text-shadow:none !important}
html[data-eco-theme] .game-modal .em-mission::before {grid-column:1/-1}
html[data-eco-theme] .game-modal .safari-study-guide::before {flex-shrink:0}
html[data-eco-theme] .game-shell .eco-goal-cue {grid-area:2/1;width:100%;max-width:760px;margin:0 auto;min-width:0;padding:7px 12px !important}
html[data-eco-theme] .game-shell .eco-goal-cue strong {display:block;font-size:clamp(16px,3.8vw,23px);line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
html[data-eco-theme] .game-shell:not(.eco-runner) .play-column {grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
html[data-eco-theme] .game-shell:not(.eco-runner) .canvas-field {grid-area:3/1}
html[data-eco-theme] .game-shell:not(.eco-runner) .mobile-controls {grid-area:4/1}
html[data-eco-theme] .game-shell:not(.eco-runner) .play-status {grid-area:5/1}
html[data-eco-theme] .game-shell:not(.eco-runner) .ocean-mission {grid-area:6/1}
html[data-eco-theme] .game-shell[data-compact-landscape=true]:not(.eco-runner) .play-column {grid-template-rows:auto minmax(0,1fr) auto}
html[data-eco-theme] .game-shell[data-compact-landscape=true] .eco-goal-cue {grid-area:1/1/2/4;max-width:none}
html[data-eco-theme] .game-shell[data-compact-landscape=true]:not(.eco-runner) .hud {grid-area:2/1}
html[data-eco-theme] .game-shell[data-compact-landscape=true]:not(.eco-runner) .canvas-field {grid-area:2/2/4/3}
html[data-eco-theme] .game-shell[data-compact-landscape=true]:not(.eco-runner) .mobile-controls {grid-area:2/3}
html[data-eco-theme] .game-shell[data-compact-landscape=true]:not(.eco-runner) .play-status {grid-area:3/1}
html[data-eco-theme] .game-shell[data-compact-landscape=true]:not(.eco-runner) .ocean-mission {grid-area:3/3}
html[data-eco-theme] .game-shell .runner-quiz.is-correct {border-color:#91ffb0 !important}
html[data-eco-theme] .game-shell .runner-quiz.is-wrong {border-color:#ffc185 !important}
html[data-eco-theme] .game-shell .runner-quiz.is-correct::before {content:'✓ 정답 확인';background:#b6ffcc}
html[data-eco-theme] .game-shell .runner-quiz.is-wrong::before {content:'✦ 정답을 확인해요';background:#ffd8a6}
@keyframes eco-cue-shine {0%,15%{background-position:100% 50%}65%,100%{background-position:0% 50%}}
@keyframes eco-cue-laser {from{opacity:.45;background-position:0% 50%}to{opacity:1;background-position:100% 50%}}
@media(max-width:480px){
 html[data-eco-theme] :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.game-shell .runner-quiz){padding:8px 10px !important}
 html[data-eco-theme] :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.game-shell .runner-quiz,.game-shell .eco-goal-cue)::before{font-size:12px;padding:3px 7px;margin-bottom:4px}
}
@media(prefers-reduced-motion:reduce){
 html[data-eco-theme] :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.game-shell .runner-quiz,.game-shell .eco-goal-cue),
 html[data-eco-theme] :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.game-shell .runner-quiz,.game-shell .eco-goal-cue)::after{animation:none !important}
}

/* Beat game/theme rules that previously flattened the mission panel. */
html[data-eco-theme] .game-modal .energy-mole .em-mission {border:2px solid #85f5ff !important;background:linear-gradient(110deg,#09263a 10%,#104357 43%,#176579 50%,#104357 57%,#09263a 90%) !important;background-size:260% 100% !important}
html[data-eco-theme] .game-modal .energy-mole .em-mission {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
html[data-eco-theme] .game-modal .energy-mole .em-mission::before {grid-column:1/-1}
html[data-eco-theme] .game-modal .energy-mole .em-mission h3 {margin:0 !important}
@media(max-width:480px){html[data-eco-theme] .game-modal .energy-mole .em-mission {grid-template-columns:minmax(0,1fr)}html[data-eco-theme] .game-modal .energy-mole .em-mission .em-word {justify-content:flex-start}}
/* The badge must not consume the space reserved for a long sentence. */
html[data-eco-theme] .game-modal .sentence-game .sentence-prompt {height:auto !important;max-height:none !important;overflow:visible !important;flex-shrink:0}
@media(max-height:550px) and (min-width:601px){
 html[data-eco-theme] .game-shell.eco-runner .play-column {grid-template-rows:32px minmax(0,1fr) 48px;grid-template-columns:minmax(300px,1.25fr) minmax(180px,1fr)}
 html[data-eco-theme] .game-shell.eco-runner .play-column>.hud {height:32px;min-height:0}
 html[data-eco-theme] .game-shell.eco-runner .hud strong {font-size:21px !important;line-height:1}
 html[data-eco-theme] .game-shell.eco-runner .hud small {font-size:10px !important;line-height:1}
 html[data-eco-theme] .game-shell.eco-runner .hud button {height:30px;min-height:30px;padding:1px}
 html[data-eco-theme] .game-shell.eco-runner .runner-quiz {max-height:none;height:100%;padding:5px 9px !important}
 html[data-eco-theme] .game-shell.eco-runner .runner-quiz::before {font-size:11px;padding:2px 7px;margin-bottom:3px}
 html[data-eco-theme] .game-shell.eco-runner .runner-quiz-meta {font-size:12px;line-height:1.2}
 html[data-eco-theme] .game-shell.eco-runner .runner-question {font-size:20px !important;line-height:1.3;margin:3px 0}
 html[data-eco-theme] .game-shell.eco-runner :is(.runner-answer-hint,.runner-explanation) {font-size:13px !important;line-height:1.3;margin:0}
 html[data-eco-theme] .game-shell.eco-runner .runner-quiz>progress {height:3px;margin-top:3px}
 html[data-eco-theme] .game-shell.eco-runner .mobile-controls,html[data-eco-theme] .game-shell.eco-runner .mobile-controls .runner-answer {height:48px;min-height:48px}
 html[data-eco-theme] .game-shell.eco-runner .runner-answer>b {font-size:26px}
}
@media(min-width:520px) and (max-width:1000px) and (max-height:550px){
 html[data-eco-theme] .game-modal .sentence-game.sentence-festival {grid-template-rows:28px minmax(0,1fr) 46px !important}
 html[data-eco-theme] .game-modal .sentence-game .sentence-prompt {grid-area:2/1;height:100% !important;overflow:auto !important;justify-content:flex-start}
 html[data-eco-theme] .game-modal .sentence-game .sentence-workspace {grid-area:2/2;min-height:0;overflow:auto}
 html[data-eco-theme] .game-modal .sentence-game .sentence-hint {display:none}
 html[data-eco-theme] .game-modal .sentence-game .sentence-actions {grid-area:3/1}
 html[data-eco-theme] .game-modal .sentence-game .sentence-actions + .sentence-actions {grid-area:3/2}
 html[data-eco-theme] .game-modal .sentence-game .sentence-prompt small {font-size:14px !important;line-height:1.3}
 html[data-eco-theme] .game-modal .sentence-game .sentence-prompt strong {font-size:21px !important;line-height:1.35}
}
@media(prefers-reduced-motion:reduce){
 html[data-eco-theme] :is(.game-modal .wb-quiz h3,.game-modal .eco-match-check h3,.eco-english-game .eco-study-question){animation:none !important}
}

/* All ten games share the Runner's gold/cyan text shimmer, sparkle and beacon.
   Inner spans prevent theme/heading animation:none rules from flattening text. */
html[data-eco-theme] .eco-question-text {
  display:block;position:relative;min-width:0;padding-right:30px;
  line-height:inherit;font:inherit;text-shadow:none !important;
}
html[data-eco-theme] .eco-question-text > .eco-question-glow {
  color:#fff0a5 !important;-webkit-text-fill-color:#fff0a5;
  text-shadow:0 0 2px #fff7a777,0 0 9px #16e9ff99 !important;
  animation:eco-question-shimmer 2.2s linear infinite,eco-question-radiance 1.8s ease-in-out infinite alternate !important;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  html[data-eco-theme] .eco-question-text > .eco-question-glow {
    background-image:linear-gradient(110deg,#ffe584 0%,#fff3be 36%,#ffffff 46%,#77ffff 52%,#ffffff 59%,#ffe584 76%,#fff3be 100%) !important;
    background-size:260% 100% !important;
    -webkit-background-clip:text !important;background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    box-decoration-break:clone;-webkit-box-decoration-break:clone;
  }
}
html[data-eco-theme] .eco-question-text > .eco-question-spark {
  position:absolute;right:1px;top:.12em;font-size:24px;line-height:1;
  color:#ffec91 !important;-webkit-text-fill-color:#ffec91;
  text-shadow:0 0 6px #fff,0 0 16px #ffd23f !important;
  pointer-events:none;transform-origin:center;
  animation:eco-question-sparkle 1.8s ease-in-out infinite alternate !important;
}
html[data-eco-theme] :is(.game-modal,.game-shell,.eco-english-game) :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue),
html[data-eco-theme] .game-modal .energy-mole .em-mission {
  border:3px solid #80f7ff !important;
  box-shadow:inset 0 0 22px #00dfff25,0 0 8px #a0ffff,0 0 22px #00cfff99 !important;
}
html[data-eco-theme] :is(.game-modal,.game-shell,.eco-english-game) :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue)::before {
  color:#172338 !important;background:#ffe58b !important;
  box-shadow:0 0 9px #ffd45b99 !important;
  animation:eco-question-beacon 1.8s ease-in-out infinite alternate !important;
}
html[data-eco-theme] :is(.game-modal,.game-shell,.eco-english-game) :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue)::after {
  left:0 !important;right:auto !important;bottom:0 !important;width:36%;height:4px;
  background:linear-gradient(90deg,transparent,#65f8ff,#fff9c9,#fff,transparent) !important;
  box-shadow:0 0 9px #4ff6ff,0 0 16px #fff3a6;
  animation:eco-question-laser 2.2s linear infinite !important;
}
html[data-eco-theme] .game-shell.eco-runner .runner-question {padding-right:0}
html[data-eco-theme] .game-shell .runner-quiz.is-correct {border-color:#91ffb0 !important}
html[data-eco-theme] .game-shell .runner-quiz.is-wrong {border-color:#ffc185 !important}
@keyframes eco-question-shimmer {from{background-position:180% 50%}to{background-position:-80% 50%}}
@keyframes eco-question-radiance {from{filter:drop-shadow(0 0 1px #0bdfff55)}to{filter:drop-shadow(0 0 7px #47efffcc)}}
@keyframes eco-question-sparkle {from{opacity:.45;transform:scale(.65) rotate(-18deg)}to{opacity:1;transform:scale(1.15) rotate(18deg)}}
@keyframes eco-question-beacon {from{filter:drop-shadow(0 0 0 #ffc94700)}to{filter:drop-shadow(0 0 6px #ffc947aa)}}
@keyframes eco-question-laser {from{translate:0 0}to{translate:175% 0}}
@media(max-width:480px),(max-height:550px) {
  html[data-eco-theme] .eco-question-text {padding-right:26px}
  html[data-eco-theme] .eco-question-text > .eco-question-spark {font-size:20px}
}
/* In a short landscape viewport the spelling row must not squeeze the prompt
   into a one-character column or push it below the panel's visible area. */
@media(min-width:520px) and (max-width:1000px) and (max-height:550px) {
  html[data-eco-theme] .game-modal .energy-mole .em-mission {
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
    align-content:start;justify-content:stretch;gap:2px;padding:5px 6px !important;
  }
  html[data-eco-theme] .game-modal .energy-mole .em-mission::before {
    content:'✦ 현재 문제 · 뜻에 맞는 단어';font-size:11px;padding:2px 5px;margin-bottom:0;
  }
  html[data-eco-theme] .game-modal .energy-mole .em-mission > div {min-width:0}
  html[data-eco-theme] .game-modal .energy-mole .em-mission small {font-size:11px !important;line-height:1.2}
  html[data-eco-theme] .game-modal .energy-mole .em-mission h3 {font-size:24px !important;line-height:1.25}
  html[data-eco-theme] .game-modal .energy-mole .em-mission .em-word {justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce) {
  html[data-eco-theme] .eco-question-text > :is(.eco-question-glow,.eco-question-spark),
  html[data-eco-theme] :is(.game-modal,.game-shell,.eco-english-game) :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue)::before,
  html[data-eco-theme] :is(.game-modal,.game-shell,.eco-english-game) :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue)::after {animation:none !important}
  html[data-eco-theme] .eco-question-text > .eco-question-glow {filter:drop-shadow(0 0 4px #47efff80)}
}