/* V33 — a compact wonder loop: discovery, anticipation, feedback, replay. */

.learning-discovery-meter {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(29,102,95,.24);
  border-radius: 15px;
  background: linear-gradient(115deg,#e9fff6,#fff6bf);
}

.learning-discovery-meter span,
.learning-discovery-meter small { color:#35656a; font-size:12px; font-weight:850; }
.learning-discovery-meter b { grid-row:1/3; grid-column:2; color:#173847; font-size:22px; }
.learning-discovery-meter small { opacity:.82; font-size:11px; }

.learning-topic-nav button { position:relative; }
.learning-topic-nav button.is-visited::after {
  position:absolute;
  top:8px;
  right:9px;
  content:"✦";
  color:#e8a73b;
  font-size:16px;
  filter:drop-shadow(0 2px 4px rgba(232,167,59,.25));
}

.learning-wow-card {
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  gap:14px;
  align-items:center;
  margin-top:22px;
  padding:16px 18px;
  border:2px solid #f0c650;
  border-radius:19px;
  background:linear-gradient(105deg,#fff4bd,#e5fff5 72%);
  box-shadow:0 10px 24px rgba(42,99,92,.1);
}
.learning-wow-card>span { color:#e55b75; font:950 20px/1 ui-monospace,monospace; transform:rotate(-4deg); }
.learning-wow-card small,.learning-wow-card b { display:block; }
.learning-wow-card small { color:#7a6241; font-size:12px; letter-spacing:.06em; }
.learning-wow-card b { margin-top:4px; color:#173847; font-size:17px; line-height:1.5; }

.learning-route-actions { display:grid; grid-template-columns:1fr 1.15fr; gap:10px; }
.learning-route-actions button { display:grid; align-content:center; text-align:left; }
.learning-route-actions button small { display:block; margin-bottom:3px; color:inherit; font-size:11px; opacity:.75; }
.learning-action-row>.learning-route-actions { min-width:0; }

.learning-new-question {
  grid-column:1/-1;
  justify-self:start;
  min-height:40px !important;
  padding:7px 12px !important;
  border-style:dashed !important;
  background:rgba(255,255,255,.65) !important;
}
.learning-quiz.is-celebrating { animation:wonderQuiz 520ms cubic-bezier(.2,.9,.2,1); }
.learning-quiz.is-celebrating::after { content:"✦  +1 DISCOVERY"; color:#16725f; font-size:13px; font-weight:950; }
@keyframes wonderQuiz { 45% { transform:translateY(-4px); box-shadow:0 18px 35px rgba(74,191,157,.24); } }

.process-discovery-progress {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:11px 14px;
  border-radius:14px;
  color:#214d55;
  background:#e9f8f2;
}
.process-discovery-progress span { font-size:12px; font-weight:900; }
.process-discovery-progress b { color:#14705d; font-size:20px; }
.process-discovery-progress small { font-size:13px; }

.wonder-mission-ticket,
.wonder-insight-chip {
  display:flex;
  flex-wrap:wrap;
  gap:7px 10px;
  align-items:center;
  margin-top:10px;
  padding:8px 11px;
  border:1px solid rgba(33,118,115,.22);
  border-radius:12px;
  background:rgba(255,255,255,.72);
}
.wonder-mission-ticket span,.wonder-insight-chip span { color:#167a73; font-size:11px; font-weight:950; letter-spacing:.06em; }
.wonder-mission-ticket b { color:#173847; font-size:14px; }
.wonder-mission-ticket small { flex-basis:100%; color:#527177; font-size:12px; }
.wonder-insight-chip b { color:#315f66; font-size:12px; line-height:1.4; }

.design-screen .wonder-insight-chip,
.build-screen .wonder-insight-chip,
.operate-screen .wonder-insight-chip {
  border-color:rgba(0,229,255,.28);
  color:#d8f9f5;
  background:rgba(0,229,255,.07);
}
.design-screen .wonder-insight-chip span,
.build-screen .wonder-insight-chip span,
.operate-screen .wonder-insight-chip span { color:#baff21; }
.design-screen .wonder-insight-chip b,
.build-screen .wonder-insight-chip b,
.operate-screen .wonder-insight-chip b { color:#d8f9f5; }

.dice-console > div:nth-child(2),
.wonder-route-teaser { min-width:0; max-width:100%; }
.wonder-route-teaser { margin-top:7px; overflow:hidden; }
.wonder-route-teaser>small { color:#ffe178 !important; font-size:10px !important; font-weight:900; }
.wonder-route-teaser>div { display:flex; width:100%; min-width:0; gap:5px; margin-top:5px; overflow:hidden; }
.wonder-route-teaser span { flex:1 1 0; min-width:0; max-width:none; padding:4px 6px; overflow:hidden; border:1px solid rgba(255,225,120,.2); color:#b8d5d0; background:rgba(255,255,255,.04); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.wonder-route-teaser i { margin-right:4px; color:#ffe178; font-style:normal; font-weight:900; }

.wonder-design-reaction {
  display:grid;
  gap:3px;
  margin:-5px 0 12px;
  padding:10px 12px;
  border-left:4px solid var(--od-lime,#baff21);
  color:#d9f5ec;
  background:rgba(186,255,33,.08);
  animation:wonderReveal 240ms ease-out;
}
.wonder-design-reaction span { color:var(--od-lime,#baff21); font-size:10px; font-weight:900; letter-spacing:.1em; }
.wonder-design-reaction b { font-size:14px; }
.wonder-design-reaction small { color:#8eadA3; font-size:12px; line-height:1.4; }
@keyframes wonderReveal { from { opacity:0; transform:translateY(5px); } }

.wonder-build-flow { margin:5px 0 9px; }
.wonder-build-flow>small { color:#83a59a; font-size:10px; font-weight:900; letter-spacing:.08em; }
.wonder-build-flow>div { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.wonder-build-flow span { padding:4px 6px; border:1px solid #304b42; color:#6f8b82; font-size:10px; }
.wonder-build-flow span.is-installed { border-color:var(--od-lime,#baff21); color:#eaffd2; background:rgba(186,255,33,.1); }
.wonder-build-easy {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1px 8px;
  width:100%;
  margin:0 0 8px;
  padding:9px 11px;
  border:1px solid rgba(0,229,255,.45);
  color:#dffdf8;
  background:rgba(0,229,255,.08);
  text-align:left;
}
.wonder-build-easy>b { font-size:13px; }
.wonder-build-easy>small { grid-column:2; color:#87aba1; font-size:11px; }
.wonder-build-easy[aria-pressed="true"] { border-color:var(--od-lime,#baff21); background:rgba(186,255,33,.1); }

#operate-screen .control-room>#operation-action { margin:12px 14px 2px; width:calc(100% - 28px); }

.wonder-result-debrief {
  display:grid;
  gap:13px;
  width:100%;
  padding:18px;
  border:1px solid rgba(94,229,210,.35);
  color:#e9fffa;
  background:linear-gradient(110deg,rgba(0,229,255,.09),rgba(186,255,33,.06));
}
.wonder-result-debrief header { display:flex; justify-content:space-between; gap:16px; align-items:end; }
.wonder-result-debrief header small { color:#7fe3d4; font-size:11px; font-weight:900; letter-spacing:.08em; }
.wonder-result-debrief h3 { margin:4px 0 0; font-size:clamp(21px,2.3vw,30px); }
.wonder-result-debrief header>strong { display:grid; gap:2px; min-width:135px; color:#91aaa1; font-size:10px; text-align:right; }
.wonder-result-debrief header>strong b { color:#ffe178; font-size:20px; }
.wonder-result-debrief>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wonder-result-debrief article { display:grid; grid-template-columns:auto 1fr; gap:3px 9px; padding:11px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.16); }
.wonder-result-debrief article span { grid-row:1/3; color:#baff21; font-weight:900; }
.wonder-result-debrief article b { font-size:14px; }
.wonder-result-debrief article p,.wonder-result-debrief>p { margin:0; color:#9ebcb3; font-size:12px; line-height:1.45; }

/* Keep the first meaningful action in view on common laptop screens. */
@media (min-width:861px) and (max-height:820px) {
  #sort-screen,#tour-screen,#design-screen,#build-screen,#operate-screen { padding-top:86px; }
  #sort-screen>.sort-heading-row,
  #tour-screen>.tour-heading-row,
  #design-screen>.scene-heading,
  #build-screen>.scene-heading,
  #operate-screen>.scene-heading { padding-top:10px; padding-bottom:7px; }
  #design-screen>.scene-heading h2,
  #build-screen>.scene-heading h2,
  #operate-screen>.scene-heading h2 { font-size:clamp(27px,3vw,40px); line-height:1.08; }
  #sort-screen>.sort-stage,
  #tour-screen>.tour-layout,
  #design-screen>.overdrive-design,
  #build-screen>.model-kit-panel,
  #operate-screen>.operation-layout { margin-top:10px; }
  .sort-heading-row h2 { font-size:clamp(29px,3.5vw,45px); }
  .sort-stage { grid-template-columns:210px minmax(340px,1fr) 340px; }
  .sort-stage .sort-bins { align-self:start; }
  .sort-bins button { min-height:96px !important; }
  .sort-bins button>span { width:42px; height:42px; margin-bottom:3px; }
  .draft-mission { padding-top:12px; }
  .draft-card { min-height:82px; }
}

@media (max-width:740px) {
  .learning-discovery-meter { grid-column:1/-1; }
  .learning-wow-card { grid-template-columns:1fr; }
  .learning-route-actions { grid-template-columns:1fr; }
  .learning-action-row { grid-template-columns:1fr !important; }
  .process-discovery-progress { align-items:flex-start; flex-wrap:wrap; }
  .wonder-mission-ticket,.wonder-insight-chip { display:grid; }
  .wonder-route-teaser>div { display:grid; grid-template-columns:1fr; }
  .wonder-route-teaser span { width:100%; max-width:100%; }
  .wonder-result-debrief header { align-items:start; flex-direction:column; }
  .wonder-result-debrief header>strong { text-align:left; }
  .wonder-result-debrief>div { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .learning-quiz.is-celebrating,.wonder-design-reaction { animation:none; }
}