* {
  box-sizing: border-box
}

:root {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #183449;
  background: #ecf4f6;
  font-synthesis: none;
  --water: #42bcea;
  --acn: #ab83ec;
  --meoh: #f2b653;
  --teal-dark: #106360;
  --teal-primary: #137d79;
  --teal-light: #e0f2ed;
  --teal-border: #bddfd5;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 0 50%, #d6eeeb, transparent 60%), radial-gradient(ellipse at 100% 90%, #dce7fa, transparent 60%);
  color: #183449;
  overflow: hidden;
}

[hidden] {
  display: none !important
}

/* Header */
header {
  flex-shrink: 0;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 6px 16px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 750;
  font-size: 15px;
}

.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain
}

.brand small {
  display: block;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #577786;
  margin-top: 2px
}

.back {
  color: #315c70;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 8px;
  background: #ffffff80;
  border: 1px solid #d2e2e4;
  transition: all .15s;
}

.back:hover {
  background: #fff;
  color: #137d79
}

/* Main Container & Panels - Stretch to Phone Height */
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  padding: 2px 10px max(8px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(155deg, #ffffff 20%, #f4faf9);
  border: 1px solid #ffffff;
  border-radius: 22px;
  padding: 12px 14px 10px;
  box-shadow: 0 3px 0 #d2e2e4, 0 16px 40px #25476614;
  box-sizing: border-box;
  overflow: hidden;
}

#intro,
#try-screen,
#solution-intro,
.panel.intro {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: max-content;
  margin: auto 0;
  justify-content: center;
  padding: 24px 20px 22px;
  border-radius: 24px;
  text-align: center;
  max-width: 480px;
  align-self: center;
  width: 100%;
}

.panel.intro h1,
#solution-intro h1,
#try-screen h1,
#intro h1 {
  margin: 6px 0 12px;
}

.panel.intro p,
#solution-intro p,
#try-screen p,
#intro p {
  margin: 0 auto 14px;
}

.panel.intro .preview-target,
#solution-intro .preview-target {
  margin: 12px auto 16px;
  max-width: 320px;
  width: 100%;
}

.panel.intro .actions,
#solution-intro .actions,
#try-screen .actions,
#intro .actions {
  margin-top: 16px;
}

.panel.game {
  padding: 8px 12px 8px;
}

.panel.video-lesson,
.panel.report {
  text-align: center;
}

/* Typography */
.eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: #24787d;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(24px, 4.5vw, 34px);
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 8px 0 10px;
  color: #153443;
}

h1 em {
  font-style: normal;
  color: var(--teal-primary);
}

p {
  color: #526d79;
  line-height: 1.5;
  font-size: 14px;
  margin: 0 auto 12px;
  max-width: 520px;
}

/* Buttons */
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation
}

button,
.button {
  font: inherit;
  cursor: pointer
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #c08416;
  outline-offset: 4px
}

.primary,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 12px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: all .15s ease-out;
}

.panel.game .primary,
.panel.game .button {
  min-height: 36px;
  padding: 5px 16px;
  font-size: 13px;
  border-radius: 10px;
}

.primary {
  background: var(--teal-primary);
  border: 1px solid var(--teal-primary);
  color: #fff;
  box-shadow: 0 3px 0 #0b5e5b, 0 6px 14px #137d7930;
}

.primary:hover {
  background: #106c69
}

.primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0b5e5b
}

.button {
  color: #315560;
  border: 1px solid #cfdee3;
  background: #fff;
  box-shadow: 0 2px 0 #cfdee3;
}

.button:hover {
  background: #f8fbfb;
  border-color: #b4cdd5
}

.button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #cfdee3
}

.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.panel.game .actions {
  margin-top: 4px;
  gap: 8px;
}

.hero-actions {
  margin-top: 16px;
}

/* Test Tube Anatomy - SIZES INCREASED */
.tube {
  position: relative;
  display: block;
  aspect-ratio: 52/226;
  isolation: isolate;
  flex-shrink: 0;
}

.tube img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tube-liquid,
.mixture {
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 4%;
  height: 84%;
  border-radius: 0 0 45% 45% / 0 0 14px 14px;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.tube-liquid {
  background: linear-gradient(90deg, #ffffff30, transparent 40%, #12252c25), var(--chemical);
  border-top: 2px solid #ffffff90;
}

.mixture {
  display: flex;
  flex-direction: column-reverse;
  transition: clip-path .38s ease-out;
}

.liquid-layer {
  flex-shrink: 0;
  background: linear-gradient(90deg, #ffffff40, transparent 50%, #12252c20), var(--chemical);
  border-top: 1.5px solid #ffffff70;
  transition: height .18s ease;
}

/* Screen 1: Opening Screen Intro Tubes */
#intro #title {
  font-size: clamp(22px, 5vw, 28px);
  margin: 4px 0 16px;
  color: #153443;
}

.intro-tubes {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 5vw, 28px);
  margin: 14px 0 20px;
}

.intro-tubes .tube {
  width: 46px;
  aspect-ratio: 52/226;
  filter: drop-shadow(3px 8px 10px #244d4925);
  transition: transform .2s ease;
}

.intro-tubes .tube:nth-child(2) {
  width: 56px;
  transform: translateY(-8px);
}

.intro-tubes.mini-preview {
  margin: 8px 0;
}

.intro-tubes.mini-preview .tube {
  width: 36px;
}

#intro .hero-actions {
  margin-top: 18px;
}

.facts {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 26px 0;
  font-size: 14px;
  color: #5f7b88;
}

.facts strong {
  display: block;
  color: #153443;
  font-size: 24px;
  margin-bottom: 4px;
}

/* Screen 5: Video Screen - Full Height Responsive Coverage (NO SCROLLING) */
#lesson-video.panel.video-lesson {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-height: calc(100dvh - 54px);
  padding: 8px 12px 10px;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
}

.video-header {
  flex-shrink: 0;
  text-align: center;
}

.video-header .eyebrow {
  margin-bottom: 2px;
}

.video-header h1 {
  font-size: clamp(18px, 4.2vw, 24px);
  margin: 2px 0 4px;
  line-height: 1.15;
}

.video-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 440px;
  margin: 3px auto 5px;
  background: transparent;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

#demo-video,
#recipe-video {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(16, 43, 51, 0.12);
}

.video-footer {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}

#video-status {
  font-size: 12px;
  line-height: 1.3;
  margin: 2px 0 6px;
  color: #526f7a;
  font-weight: 500;
}

.video-footer .actions {
  margin-top: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.video-footer .actions .primary,
.video-footer .actions .button {
  min-height: 40px;
  padding: 6px 18px;
  font-size: 13.5px;
}

.speed-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #137d79e6;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px #00000040;
}

/* Screen 4 Preview Target */
.preview-target {
  max-width: 540px;
  margin: 20px auto 28px;
}

/* Screen 6: Game Screen Elements - RE-ALIGNED & ENLARGED */
.game {
  position: relative;
  isolation: isolate;
}

.game-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.score-pill,
.status-pill {
  font-size: 11px;
  font-weight: 750;
  color: var(--teal-primary);
  background: var(--teal-light);
  border: 1px solid var(--teal-border);
  padding: 3px 10px;
  border-radius: 14px;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-heading h1,
#demo-title {
  font-size: clamp(21px, 4.8vw, 26px);
  margin: 2px 0 4px;
  text-align: center;
  color: #153443;
  line-height: 1.2;
}

/* Compact Target Recipe */
.compact-target {
  padding: 6px 12px;
  margin: 4px 0 8px;
  background: #edf7f4;
  border: 1px solid #bddfd5;
  border-radius: 14px;
  box-shadow: inset 0 1px 4px #25476606;
}

.recipe-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.recipe-heading>strong {
  font-size: 15px;
  /*11px*/
  font-weight: 800;
  color: #155e59;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.recipe-heading>span {
  font-size: 10px;
  font-weight: 750;
  color: #43726f;
  background: #ffffffb0;
  padding: 2px 8px;
  border-radius: 10px;
}

.recipe-ingredients {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.recipe-ingredient {
  background: #fff;
  border: 1px solid #d4e7e2;
  border-top: 3px solid var(--chemical);
  border-radius: 10px;
  padding: 4px 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
  box-shadow: 0 1px 3px #102b3306;
  min-width: 0;
}

.recipe-ingredient>span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #315560;
  white-space: nowrap;
}

.recipe-ingredient i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chemical);
  flex-shrink: 0;
}

.recipe-ingredient>strong {
  font-size: 15px;
  font-weight: 850;
  color: #153443;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.recipe-ingredient small {
  font-size: 10px;
  font-weight: 600;
}

.recipe-ingredient.is-zero {
  background: #f9fbfa;
  border-top-color: #cbd7d4;
  opacity: .65;
}

/* Chemical Tubes Tray - FLEX FILL */
.chemicals {
  flex: 1.1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 3px 0 6px;
  padding: 6px;
  background: radial-gradient(#7a9e9c26 1px, transparent 1px) 0 0/8px 8px, #e3f0ed;
  border: 1px solid #cce1dc;
  border-radius: 16px;
  box-shadow: inset 0 1px 6px #2547660a;
  align-items: stretch;
}

.chemical {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1.5px solid #c9ded9;
  border-radius: 12px;
  padding: 4px 3px;
  color: #1d3d4b;
  background: linear-gradient(160deg, #ffffff, #f3f9f6);
  box-shadow: 0 3px 0 #b3ccc4, 0 4px 10px #244d4910;
  min-width: 0;
  transition: all .15s ease;
}

.chemical:not(:disabled):hover {
  background: #ebf8f3;
  border-color: #74b4a6;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #b3ccc4, 0 8px 14px #244d4918;
}

.chemical:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b3ccc4;
}

.chemical:disabled {
  opacity: .7;
  cursor: default;
}

.chemical.is-guided,
.chemical.is-guided:disabled {
  opacity: 1 !important;
  outline: 3px solid #137d79 !important;
  outline-offset: 3px;
  background: #edfff7 !important;
  box-shadow: 0 0 0 7px #137d7920;
}

#demo-screen {
  position: relative;
}

.chemical.demo-tap {
  transform: translateY(2px) scale(0.96) !important;
  outline: 3px solid #137d79 !important;
  box-shadow: 0 0 0 6px rgba(19, 125, 121, 0.25), 0 1px 0 #b3ccc4 !important;
  background: #edfff7 !important;
}

/* Automated Demo Touch Point Reference */
.demo-touch-pointer {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.16s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}

.demo-touch-pointer.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.demo-touch-pointer .touch-ripple {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(19, 125, 121, 0.22);
  border: 2px solid rgba(19, 125, 121, 0.7);
  animation: demoTouchRipple 0.8s ease-out infinite;
}

.demo-touch-pointer .touch-core {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #25a49c 20%, #106b66 100%);
  box-shadow: 0 0 10px rgba(19, 125, 121, 0.8), 0 2px 5px rgba(0, 0, 0, 0.2);
  animation: demoTouchPulse 0.4s ease-in-out alternate infinite;
}

.demo-touch-pointer .touch-hand-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  transform-origin: top left;
  animation: demoHandTap 0.4s ease-in-out alternate infinite;
}

@keyframes demoTouchRipple {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes demoTouchPulse {
  0% { transform: scale(0.9); }
  100% { transform: scale(1.15); }
}

@keyframes demoHandTap {
  0% { transform: translate(3px, 3px) rotate(-10deg); }
  100% { transform: translate(-2px, -2px) rotate(-16deg); }
}

.chemical .tube {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: clamp(75px, 17vh, 125px);
  width: auto;
  aspect-ratio: 52/226;
  filter: drop-shadow(2px 4px 5px #244d4920);
}

.chemical-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 750;
  color: #153443;
  white-space: nowrap;
}

.chemical-name i,
.composition i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chemical);
  display: inline-block;
  flex-shrink: 0;
}

.chemical small {
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #116964;
  background: #def1eb;
  border: 1px solid #b7dfd4;
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Centered Mixing Area & Receiver Tube - FLEX FILL */
.mixing-area {
  flex: 1.2;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  background: radial-gradient(ellipse at 50% 50%, #d5ede788, transparent 70%);
  border: 1px solid #dbeae6;
  border-radius: 16px;
  margin: 3px 0 5px;
}

.receiver-stage {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
  position: relative;
  width: auto;
}

#solution-name,
.sr-only {
  display: none !important;
}

.receiver-wrap {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.receiver {
  height: 100%;
  max-height: clamp(90px, 21vh, 155px);
  width: auto;
  aspect-ratio: 52/226;
  filter: drop-shadow(4px 8px 10px #244d4922);
}

.fill-indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5px;
}

.fill-mark {
  font-size: 26px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: #137970;
  line-height: 1;
}

.fill-mark span {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #59707b;
  margin-left: 3px;
}

.fill-sublabel {
  display: none !important;
}

/* Composition Breakdown */
.composition {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  margin-top: 3.5px;
}

.composition span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 750;
  color: #244652;
  background: #ffffff99;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid #d4e7e2;
  white-space: nowrap;
}

.composition strong {
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: #0f2c38;
}

.composition i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chemical);
  display: inline-block;
  flex-shrink: 0;
}

/* Status & Feedback */
.feedback {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #2f5f65;
  min-height: 18px;
  margin: 4px 0 2px;
}

/* Review Modal: Centered Popup on Screen */
.review[hidden] {
  display: none !important;
}

.review {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 95;
  width: min(320px, calc(100vw - 44px));
  padding: 24px 22px 20px;
  background: linear-gradient(165deg, #ffffff 60%, #f2f9f7 100%);
  border: 1.5px solid #d2eae4;
  border-radius: 24px;
  box-shadow: 0 16px 50px rgba(16, 43, 51, 0.38), 0 0 0 100vmax rgba(16, 43, 51, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
  box-sizing: border-box;
  animation: reviewModalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.review::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e6f7f2;
  color: #10726b;
  border: 2px solid #bce6dc;
  font-size: 24px;
  font-weight: 900;
  margin: 0 auto 12px;
  box-shadow: 0 4px 14px rgba(16, 114, 107, 0.18);
}

.game[data-outcome="incorrect"] .review::before {
  content: "✕";
  background: #fdf1ec;
  color: #b54a1a;
  border-color: #f9d1c1;
  box-shadow: 0 4px 14px rgba(181, 74, 26, 0.18);
}

.review #outcome {
  color: var(--teal-primary);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.4px;
  display: block;
  margin-bottom: 16px;
  line-height: 1.2;
}

.review:has(#correct-recipe:not([hidden]):not(:empty)) #outcome {
  margin-bottom: 8px;
}

.game[data-outcome="incorrect"] .review #outcome {
  color: #b34f24;
}

.review #correct-recipe[hidden],
.review #correct-recipe:empty {
  display: none !important;
  margin: 0 !important;
}

.review p {
  font-size: 14px;
  margin: 4px 0 16px;
  color: #55717b;
  line-height: 1.45;
}

.review-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.review-actions .primary {
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
}

.review-actions .button {
  width: 100%;
  min-height: 40px;
  font-size: 14px;
  border-radius: 12px;
}

@keyframes reviewModalPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Pouring Stream and Particles Animations - SCALED */
.pour-ghost,
.pour-stream,
.pour-ripple,
.pour-droplet,
.pour-dose {
  position: absolute;
  pointer-events: none;
}

.pour-ghost {
  z-index: 10;
  transform-origin: 50% 0%;
  filter: drop-shadow(4px 10px 8px #244d4935);
}

.pour-stream {
  z-index: 9;
  width: 6px;
  background: linear-gradient(90deg, #ffffffaa, transparent 60%), var(--chemical);
  border-radius: 6px;
  transform-origin: top;
  box-shadow: 0 0 8px color-mix(in srgb, var(--chemical) 40%, transparent);
}

.pour-ripple {
  z-index: 11;
  width: 36px;
  height: 12px;
  border: 2.5px solid var(--chemical);
  border-radius: 50%;
  background: #ffffff60;
}

.pour-droplet {
  z-index: 11;
  width: 6px;
  height: 8px;
  background: var(--chemical);
  border-radius: 50%;
  box-shadow: inset 1px 1px #ffffffaa;
}

.pour-dose {
  z-index: 11;
  color: #126f67;
  background: #fffffffa;
  border: 1.5px solid #bce1d8;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 4px 12px #244d4920;
}

/* Screen 7: Results / Completion Screen */
#report.panel.report {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100dvh - 54px);
  padding: 12px 14px 10px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #f4faf9 50%, #edf6f5 100%);
  border: 1px solid #ffffff;
  border-radius: 22px;
  box-shadow: 0 3px 0 #d2e2e4, 0 16px 40px #25476614;
}

.report-header {
  flex-shrink: 0;
  margin-bottom: 2px;
}

.report-header .eyebrow {
  font-size: 11px;
  letter-spacing: 1.6px;
  font-weight: 800;
  color: #1a7a75;
  background: #e2f2ef;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
}

.report-header h1 {
  font-size: clamp(22px, 4.5vw, 28px);
  margin: 4px 0 2px;
  letter-spacing: -0.6px;
  color: #123644;
  line-height: 1.15;
}

/* Score Hero Badge */
.score-hero {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f5faf9 100%);
  border: 1px solid #d0e6e1;
  border-radius: 18px;
  padding: 10px 16px;
  margin: 6px auto 8px;
  max-width: 440px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 14px -3px rgba(19, 125, 121, 0.09);
}

.score-circle {
  width: 82px;
  height: 82px;
  min-width: 82px;
  min-height: 82px;
  aspect-ratio: 1 / 1;
  margin: 0;
  flex-shrink: 0;
  border: 3.5px solid #137d79;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #106965;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ebf7f5 100%);
  box-shadow: 0 0 0 3px #d6eee9, 0 6px 18px -4px rgba(19, 125, 121, 0.22);
}

.score-circle strong {
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  color: #0e635f;
  margin-top: -2px;
}

.score-circle span {
  font-size: 8.5px;
  letter-spacing: 1.2px;
  font-weight: 800;
  margin-top: 1px;
  color: #3f6f74;
}

.score-hero-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.report-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 3px;
}

.report-badge-chip.is-perfect {
  background: #e6f8f2;
  color: #0a6c5a;
  border: 1px solid #b3e7d6;
}

.report-badge-chip.is-good {
  background: #eaf4f7;
  color: #136a83;
  border: 1px solid #c2e0e8;
}

.report-badge-chip.is-low {
  background: #fff3ec;
  color: #a44f19;
  border: 1px solid #f9d3be;
}

#report-message {
  font-size: 12.5px;
  line-height: 1.35;
  color: #4a6773;
  margin: 0;
  font-weight: 500;
}

/* Solution Results Breakdown List */
.results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 4px 0 6px;
  padding: 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  width: 100%;
  align-self: center;
  box-sizing: border-box;
}

.results::-webkit-scrollbar {
  width: 5px;
}
.results::-webkit-scrollbar-track {
  background: #eef5f4;
  border-radius: 4px;
}
.results::-webkit-scrollbar-thumb {
  background: #b5ded5;
  border-radius: 4px;
}
.results::-webkit-scrollbar-thumb:hover {
  background: #8fcbbe;
}

/* Modern Result Row / Card */
.result-row {
  padding: 9px 12px 10px;
  border: 1px solid #d8e8e4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 43, 51, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  position: relative;
  border-left: 4px solid #137d79;
}

.result-row.incorrect {
  border-left-color: #d9622b;
}

.result-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.result-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 750;
  color: #133340;
}

.result-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 850;
  background: #e6f6f2;
  color: #10726b;
  border: 1px solid #b7e5da;
  flex-shrink: 0;
}

.result-row.incorrect .result-row-icon {
  background: #fdf0ea;
  color: #c04e1c;
  border-color: #f7cbba;
}

.result-status-pill {
  font-size: 11px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.result-status-pill.pill-correct {
  background: #e6f7f2;
  color: #0e726b;
  border: 1px solid #bce6dc;
}

.result-status-pill.pill-incorrect {
  background: #fdf1ec;
  color: #b54a1a;
  border: 1px solid #f9d1c1;
}

/* Report Solution Cards with Test Tube Format */
.report-tubes-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  background: #f7faf9;
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid #dcebe7;
}

.report-tube-separator {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #8da4ac;
  background: #ffffff;
  border: 1px solid #dbe6e4;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.report-tube-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.report-tube-badge {
  font-size: 11px;
  font-weight: 750;
  color: #3b616a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.report-tube-item.is-target-tube .report-tube-badge {
  color: #106965;
}

.report-tube-visual {
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-tube-glass {
  width: 24px;
  height: 92px;
  aspect-ratio: 52/226;
  filter: drop-shadow(1px 3px 4px rgba(36, 77, 73, 0.18));
}

.report-tube-glass .mixture {
  border-radius: 0 0 10px 10px;
}

.report-tube-fill-num {
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: #1d434f;
}

.report-tube-recipe-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #274550;
  background: #ffffff;
  border: 1px solid #d4e4e0;
  border-radius: 999px;
  padding: 1.5px 6px;
  line-height: 1.25;
}

.mini-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  display: inline-block;
  flex-shrink: 0;
}

.mini-chip strong {
  font-weight: 850;
  color: #123440;
}

.mini-chip.mismatch {
  background: #fff3ec;
  border-color: #f7cbbe;
  color: #a4481b;
}

.mini-chip.mismatch strong {
  color: #b54316;
}

.mini-chip.empty {
  color: #7b949e;
  font-style: italic;
}

/* Report Action Buttons */
.report-actions {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.report-actions .primary,
.report-actions .button {
  min-height: 42px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 750;
  padding: 8px 24px;
}

/* Comparison Dialog (#mix-result) */
.mix-result {
  width: min(500px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 24px 28px;
  border: 1px solid #cbe0dc;
  border-radius: 26px;
  background: #f9fcfa;
  color: #183449;
  box-shadow: 0 24px 80px #102b3355;
  overflow: auto;
}

.mix-result::backdrop {
  background: #102b33a0;
  backdrop-filter: blur(5px);
}

.mix-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.result-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #e5f0ed;
  color: #315d60;
  font-size: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.result-close:hover {
  background: #d5e7e3
}

.mix-result h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: 8px 0 8px;
  letter-spacing: -.6px;
}

.mix-result[data-outcome="correct"] h2 {
  color: var(--teal-primary)
}

.mix-result[data-outcome="incorrect"] h2 {
  color: #b34f24
}

.mix-result>p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.comparison-tubes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.comparison-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d4e7e2;
  border-radius: 18px;
  box-shadow: 0 2px 8px #102b3308;
}

.comparison-card h3 {
  font-size: 15px;
  font-weight: 750;
  margin: 0;
  color: #3b616a;
}

.comparison-tube {
  width: 48px;
  height: 208px;
  filter: drop-shadow(3px 7px 8px #244d4920);
}

.comparison-card>strong {
  font-size: 18px;
  font-weight: 800;
  color: #156963;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 15px;
  text-align: left;
}

.comparison-table thead th {
  font-size: 13px;
  color: #54747b;
  padding: 8px 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.comparison-table tbody th,
.comparison-table td {
  padding: 10px 6px;
  border-top: 1px solid #dbeae6;
}

.comparison-table tbody th {
  font-weight: 700;
  width: 58%;
}

.comparison-table td {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.comparison-table th small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.3;
}

.comparison-table .needs-change small,
.comparison-table .needs-change td:first-of-type {
  color: #b34f24
}

.comparison-table .matches small {
  color: #157d62
}

.ingredient-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chemical);
  margin-right: 6px;
}

.result-actions {
  display: flex;
  margin-top: 20px;
}

.result-actions button {
  width: 100%
}

/* Responsive Tweaks */
@media(max-width:600px) {
  header {
    padding: 4px 12px 2px
  }

  main {
    padding: 0 6px max(6px, env(safe-area-inset-bottom))
  }

  .panel {
    padding: 10px 10px 8px;
    border-radius: 18px
  }

  #intro,
  #try-screen,
  #solution-intro,
  .panel.intro {
    flex: 0 0 auto !important;
    height: auto !important;
    margin: auto 0;
    padding: 20px 16px 18px;
    border-radius: 20px;
  }

  .panel.game {
    padding: 6px 8px 6px
  }

  .game-heading h1,
  #demo-title {
    font-size: 21px;
    margin: 2px 0 4px
  }

  .compact-target {
    padding: 3px 6px;
    margin: 1px 0 3px
  }

  .recipe-ingredients {
    gap: 4px
  }

  .recipe-ingredient {
    padding: 2px 2px;
    border-radius: 6px
  }

  .recipe-ingredient>span {
    font-size: 9.5px
  }

  .recipe-ingredient>strong {
    font-size: 13px
  }

  .chemicals {
    gap: 4px;
    padding: 4px;
    margin: 2px 0 4px
  }

  .chemical {
    padding: 2px 2px;
    gap: 2px
  }

  .chemical-name {
    font-size: 10.5px
  }

  .chemical small {
    font-size: 9.5px;
    padding: 1px 3px
  }

  .mixing-area {
    padding: 3px 8px;
    margin: 2px 0 3px
  }

  .receiver-stage {
    gap: 14px;
    margin: 0 auto;
    justify-content: center;
  }

  .fill-mark {
    font-size: 22px
  }

  .fill-mark span {
    font-size: 10.5px
  }

  .fill-sublabel {
    display: none !important;
  }

  .composition {
    gap: 3px;
    margin-top: 3px;
  }

  .composition span {
    font-size: 13.5px;
    padding: 2.5px 7px
  }

  .composition strong {
    font-size: 14px
  }

  .feedback {
    font-size: 10.5px;
    min-height: 14px;
    margin: 1px 0
  }

  .actions {
    margin-top: 2px;
    gap: 6px
  }

  .primary,
  .button {
    min-height: 34px;
    padding: 4px 14px;
    font-size: 12.5px;
    border-radius: 8px
  }

  .comparison-tube {
    width: 32px;
    height: 140px
  }

  #report.panel.report {
    padding: 8px 10px 8px;
  }

  .score-hero {
    padding: 6px 10px;
    gap: 12px;
    margin: 4px auto 6px;
  }

  .score-circle {
    width: 66px;
    height: 66px;
    min-width: 66px;
    min-height: 66px;
    border-width: 3px;
  }

  .score-circle strong {
    font-size: 30px;
  }

  .score-circle span {
    font-size: 7.5px;
  }

  .report-badge-chip {
    font-size: 10px;
    padding: 2px 7px;
  }

  #report-message {
    font-size: 11px;
    line-height: 1.25;
  }

  .result-row {
    padding: 7px 9px 8px;
    border-radius: 11px;
  }

  .result-row-title {
    font-size: 13px;
  }

  .report-tubes-grid {
    padding: 6px 8px;
    gap: 6px;
  }

  .report-tube-glass {
    width: 20px;
    height: 75px;
  }

  .mini-chip {
    font-size: 9.5px;
    padding: 1px 4.5px;
  }

  .report-actions .primary,
  .report-actions .button {
    min-height: 38px;
    padding: 6px 18px;
    font-size: 13px;
  }

  #lesson-video.panel.video-lesson {
    padding: 6px 10px 8px;
  }

  .video-header h1 {
    font-size: 17px;
    margin: 1px 0 2px;
  }

  #video-status {
    font-size: 11px;
    margin: 1px 0 4px;
  }

  .video-footer .actions .primary,
  .video-footer .actions .button {
    min-height: 36px;
    padding: 5px 14px;
    font-size: 12.5px;
  }
}
/* Asset-only opening screen. Keep the complete portrait artwork visible. */
body:has(#intro:not([hidden]), #solution-intro:not([hidden]), #lesson-video:not([hidden]), #ready:not([hidden])) {
  background: #03161e;
}

body:has(#intro:not([hidden]), #solution-intro:not([hidden]), #lesson-video:not([hidden]), #ready:not([hidden])) > header {
  display: none;
}

body:has(#intro:not([hidden]), #solution-intro:not([hidden]), #lesson-video:not([hidden]), #ready:not([hidden])) > main {
  max-width: none;
  padding: 0;
  align-items: center;
  justify-content: center;
}

#intro,
#solution-intro,
#ready {
  position: relative;
  flex: none !important;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25dvh);
  height: auto !important;
  aspect-ratio: 9 / 16;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.title-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#intro .title-start {
  position: absolute;
  left: 23%;
  top: 80.4%;
  width: 54%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.title-start img {
  display: block;
  width: 100%;
  height: auto;
}

#intro .title-start:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 12px;
}

#solution-intro .image-control {
  position: absolute;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.image-control img {
  display: block;
  width: 100%;
  height: auto;
}

#solution-intro .solution-watch {
  left: 23%;
  top: 60.4%;
  width: 54%;
}

#solution-intro .solution-exit {
  right: 4.2%;
  top: 2.55%;
  width: 7.4%;
}

#solution-intro .image-control:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 12px;
}

/* Portrait video page follows the supplied reference proportions. */
#lesson-video.panel.video-lesson {
  position: relative;
  flex: none;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25dvh);
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url('assets/test-tube-game-assets/images/3-4-video-screen-and-game-screen-bg.webp') center / 100% 100% no-repeat;
}

#lesson-video .video-container {
  position: absolute;
  top: 7.6%;
  left: 4.5%;
  width: 91%;
  height: 74.4%;
  max-width: none;
  margin: 0;
  padding: 2%;
  border: 1px solid #1c91ac;
  border-radius: 4% / 3%;
  background: #0005;
  box-shadow: inset 0 0 0 1px #0b4758;
}

#lesson-video #recipe-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #245a65;
  border-radius: 3% / 2%;
  background: #000;
  box-shadow: none;
  accent-color: #00e3e9;
}

#lesson-video .video-footer {
  position: absolute;
  top: 86.4%;
  left: 6.3%;
  width: 87.4%;
  display: flex;
  align-items: center;
  gap: 3%;
}

#lesson-video .image-control {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

#lesson-video .image-control:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
  border-radius: 12px;
}

#lesson-video #video-status:not(.sr-only) {
  position: absolute;
  top: 82.2%;
  left: 5%;
  width: 90%;
  margin: 0;
  color: white;
  font-size: clamp(9px, 1.8vh, 14px);
}

/* Guided practice: solvent cards above a beaker and live composition. */
.practice-beaker-art { display: none !important; }
body:has(#game:is([data-mode="practice"], [data-mode="game"]):not([hidden])) {
  background: #03161e;
}
body:has(#game:is([data-mode="practice"], [data-mode="game"]):not([hidden])) > header { display: none; }
body:has(#game:is([data-mode="practice"], [data-mode="game"]):not([hidden])) > main {
  max-width: none;
  padding: 0;
  align-items: center;
  justify-content: center;
}
#game:is([data-mode="practice"], [data-mode="game"]) {
  position: relative;
  container-type: inline-size;
  flex: none;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25dvh);
  height: auto;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  --water: #00cfff;
  --acn: #b627ed;
  --meoh: #ffbf25;
  background: url('assets/test-tube-game-assets/images/3-4-video-screen-and-game-screen-bg.webp') center / 100% 100%;
}
#game:is([data-mode="practice"], [data-mode="game"]) .game-meta {
  position: absolute; top: 7.8%; width: 100%; justify-content: center;
}
#game:is([data-mode="practice"], [data-mode="game"]) #progress {
  color: #00eeed; font-size: 3.5cqw; letter-spacing: .06em;
}
#game:is([data-mode="practice"], [data-mode="game"]) .game-heading {
  position: absolute; top: 11.5%; width: 100%; text-align: center;
}
#game:is([data-mode="practice"], [data-mode="game"]) #game-title {
  margin: 0; color: white; font-size: 5.5cqw; line-height: 1.15;
}
#game:is([data-mode="practice"], [data-mode="game"]) .game-heading::after {
  content: 'Select a solvent to add to the container';
  display: block; margin-top: 2cqw; color: #bfcbd0; font-size: 3.9cqw;
}
#game:is([data-mode="practice"], [data-mode="game"]) #lesson-target,
#game:is([data-mode="practice"], [data-mode="game"]) #feedback,
#game:is([data-mode="practice"], [data-mode="game"]) #fill-total { display: none; }
#game:is([data-mode="practice"], [data-mode="game"]) #chemicals {
  position: absolute; top: 23.3%; left: 6.8%; width: 88.4%; height: 29%;
  margin: 0; padding: 0; gap: 4%; border: 0; background: transparent; box-shadow: none;
}
#game:is([data-mode="practice"], [data-mode="game"]) .chemical {
  position: relative; padding: 2cqw 1cqw; gap: 1cqw;
  border: 1px solid var(--chemical); border-radius: 3cqw;
  background: #020b1199; color: white; box-shadow: none; opacity: 1;
}
#game:is([data-mode="practice"], [data-mode="game"]) .chemical-name {
  order: -1; height: 18%; justify-content: center; white-space: normal;
  color: white; font-size: 3.8cqw; line-height: 1.1; text-align: center;
}
#game:is([data-mode="practice"], [data-mode="game"]) .chemical .tube {
  height: 51%; width: auto; max-height: none; margin: 1cqw 0;
}
#game:is([data-mode="practice"], [data-mode="game"]) .chemical small {
  width: 90%; padding: 0; background: none; border: 0; color: white;
  white-space: normal; font-size: 3.6cqw; line-height: 1.3;
}
#game:is([data-mode="practice"], [data-mode="game"]) #mixing-area {
  position: absolute; left: 5.2%; top: 59.2%; width: 90%; height: 31.8%;
  margin: 0; padding: 2%; background: #001c2580;
  border: 1px solid #23869a; border-radius: 3cqw;
}
#game:is([data-mode="practice"], [data-mode="game"]) .receiver-stage {
  width: 100%; height: 100%; gap: 4%; justify-content: space-between;
}
#game:is([data-mode="practice"], [data-mode="game"]) .receiver-wrap {
  width: 48%; height: 90%; align-self: flex-end;
}
#game:is([data-mode="practice"], [data-mode="game"]) #receiver {
  width: auto; height: 100%; aspect-ratio: 814 / 1018; max-height: 100%; filter: none;
}
#game:is([data-mode="practice"], [data-mode="game"]) .receiver-tube-art { display: none; }
#game:is([data-mode="practice"], [data-mode="game"]) .practice-beaker-art { display: block !important; }
#game:is([data-mode="practice"], [data-mode="game"]) #mixture {
  left: 18%; right: 13%; bottom: 12%; height: 64%;
  border-radius: 0 0 18% 18%; mix-blend-mode: normal; opacity: .72;
}
#game:is([data-mode="practice"], [data-mode="game"]) .fill-indicator { width: 48%; align-self: center; margin-bottom: 0; }
#game:is([data-mode="practice"], [data-mode="game"]) #composition { width: 100%; gap: 1.5cqw; margin: 0; }
#game:is([data-mode="practice"], [data-mode="game"]) #composition > span {
  display: grid; grid-template-columns: 3.5cqw 1fr auto; gap: 1.5cqw; align-items: center;
  min-height: 12.5cqw; padding: 2cqw; border-radius: 2cqw;
  border: 1px solid #426575; background: #082833;
  white-space: nowrap; color: white; font-size: clamp(14px, 4cqw, 20px); font-weight: 650; line-height: 1.3;
}
#game:is([data-mode="practice"], [data-mode="game"]) #composition i { width: 3.5cqw; height: 3.5cqw; }
#game:is([data-mode="practice"], [data-mode="game"]) #composition strong { color: white; font-size: clamp(15px, 4.5cqw, 22px); font-weight: 800; font-variant-numeric: tabular-nums; }
#game:is([data-mode="practice"], [data-mode="game"]) #review {
  position: absolute; top: 92%; left: 5%; width: 90%; margin: 0; padding: 1cqw;
  color: white; background: #062d36; border-color: #00b6c6;
}
#game:is([data-mode="practice"], [data-mode="game"]) #review p { margin: 0; }
#game:is([data-mode="practice"], [data-mode="game"]) #review .review-actions { margin: 1cqw 0 0; }
#game:is([data-mode="practice"], [data-mode="game"]) #next { min-height: 0; padding: 1cqw 3cqw; font-size: 3cqw; }

/* Native modal centers the result independently of the game layout. */
#practice-result {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(82vw, 46.125vh);
  width: min(82vw, 46.125dvh);
  height: fit-content;
  max-width: none;
  max-height: 90dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
#practice-result::backdrop {
  background: #00151c80;
  backdrop-filter: blur(3px);
}
#practice-result-panel { display: block; width: 100%; height: auto; }
#practice-result-action {
  position: absolute;
  left: 7%; top: 67%; width: 86%;
  min-height: 0; padding: 0; border: 0;
  background: transparent; box-shadow: none; cursor: pointer;
}
#practice-result-action:focus-visible {
  outline: 2px solid white; outline-offset: 3px; border-radius: 8px;
}

#ready .challenge-start {
  position: absolute;
  left: 23%;
  top: 74.6%;
  width: 54%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
#ready .challenge-start:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
  border-radius: 12px;
}

/* Challenge uses the same responsive board with one shared countdown. */
#game[data-mode="game"] .game-meta { top: 4.7%; }
#game[data-mode="game"] .game-heading { top: 8.4%; }
#game[data-mode="game"] .game-heading::after { content: 'Prepare the perfect solution'; }
#game[data-mode="game"] #seconds {
  position: absolute;
  top: 9cqw;
  left: 32%;
  width: 36%;
  margin-top: 7cqw;
  padding: 1.5cqw 1cqw;
  border: 2px solid #fff;
  border-radius: 3cqw;
  box-shadow: 0 0 2cqw #dffaff80, inset 0 0 1cqw #dffaff50;
  color: white;
  background: #10303c80;
  font-size: 6cqw;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
#game[data-mode="game"] #seconds::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .25em;
  vertical-align: -.12em;
  background: currentColor;
  mask: url('assets/stopwatch.svg') center / contain no-repeat;
  -webkit-mask: url('assets/stopwatch.svg') center / contain no-repeat;
}
#game[data-mode="game"] #timer { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
#game[data-mode="game"]:has(#timer.urgent) #seconds { color: #ff8888; border-color: #ff8888; }
#game[data-mode="game"] #chemicals { top: 28%; height: 28.6%; }
#game[data-mode="game"] #mixing-area { top: 61.5%; height: 31.8%; }
#game[data-mode="game"] #review { top: 94%; }
#game[data-mode="game"] #review > div:first-child { display: none; }
#game[data-mode="game"] #view-result { min-height: 0; padding: 1cqw 2cqw; font-size: 3cqw; }

/* Comparison keeps its navigation visible, even on short mobile screens. */
#mix-result {
  height: min(640px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  padding: 16px;
  overflow: hidden;
}
#mix-result[open] { display: flex; flex-direction: column; }
#mix-result .mix-result-heading,
#mix-result h2,
#mix-result > p,
#mix-result .result-actions { flex-shrink: 0; }
#mix-result h2 { font-size: clamp(20px, 5vw, 26px); margin: 6px 0; }
#mix-result > p { font-size: 14px; line-height: 1.35; margin: 0 0 10px; }
#mix-result .mix-result-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mix-result .comparison-tubes { gap: 10px; }
#mix-result .comparison-card { padding: 8px; gap: 5px; }
#mix-result .comparison-card h3 { font-size: 14px; text-align: center; }
#mix-result .comparison-beaker {
  height: clamp(80px, 19dvh, 130px);
  width: auto;
  aspect-ratio: 814 / 1018;
}
#mix-result .comparison-beaker .mixture {
  left: 18%; right: 13%; bottom: 12%; height: 64%;
  border-radius: 0 0 18% 18%; mix-blend-mode: normal; opacity: .72;
}
#mix-result .comparison-card > strong { font-size: 16px; }
#mix-result .comparison-table { margin-top: 10px; font-size: 14px; }
#mix-result .comparison-table thead th { font-size: 11px; padding: 5px; }
#mix-result .comparison-table tbody th,
#mix-result .comparison-table td { padding: 6px 5px; }
#mix-result .result-actions { margin-top: 10px; padding-top: 8px; border-top: 1px solid #dbeae6; }
#mix-result #result-next { min-height: 44px; }

#mix-result {
  --water: #00cfff;
  --acn: #b627ed;
  --meoh: #ffbf25;
}
#mix-result .comparison-beaker .mixture { opacity: 1; }

/* A double pulse emphasizes the final ten seconds of active play. */
#game[data-mode="game"]:has(#timer.urgent) #seconds {
  color: #ff4747;
  border-color: #ff4747;
  background: #3a1019;
  box-shadow: 0 0 3cqw #ff303080, inset 0 0 1.5cqw #ff303040;
}
#game[data-mode="game"][data-state="playing"]:has(#timer.urgent) #seconds {
  animation: timer-heartbeat .9s ease-in-out infinite;
  transform-origin: center;
}
@keyframes timer-heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.08); }
  25% { transform: scale(1.02); }
  32% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #game[data-mode="game"][data-state="playing"]:has(#timer.urgent) #seconds {
    animation: none;
  }
}

/* Final report mirrors the portrait artwork, with all four results visible. */
body:has(#report:not([hidden])) { background: #03161e; }
body:has(#report:not([hidden])) > header { display: none; }
body:has(#report:not([hidden])) > main {
  max-width: none; padding: 0; align-items: center; justify-content: center;
}
#report.panel.report {
  position: relative;
  container-type: inline-size;
  flex: none;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25dvh);
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: none;
  padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  color: white;
  background: url('assets/test-tube-game-assets/images/9-report-page/report-page-bg.webp') center / 100% 100% no-repeat;
}
#report .report-score { position: absolute; top: 25.5%; left: 5%; width: 90%; text-align: center; }
#report .report-score > div { color: #00e9ef; font-size: 5.8cqw; line-height: 1.2; font-weight: 850; }
#report .report-score h1 { color: white; font-size: 4cqw; margin: 1.3cqw 0 0; letter-spacing: .02em; }
#report #results {
  position: absolute; top: 33.6%; left: 5.4%; width: 89.4%; height: 40.3%;
  margin: 0; padding: 4.2%; border: 1px solid #26b5bd; border-radius: 5cqw;
  display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 1.4cqw;
  overflow: hidden; background: #02141b99;
}
#report .report-solution {
  display: grid; grid-template-columns: 10cqw minmax(0, 1fr) 5.5cqw 24cqw;
  align-items: center; gap: 2cqw; padding: 1.5cqw 2cqw;
  border: 1px solid #244651; border-radius: 4cqw;
  background: linear-gradient(#0b232c, #03161d);
  box-shadow: 0 1cqw 2cqw #0006;
}
#report .report-solution > strong { font-size: 3cqw; font-weight: 650; text-align: left; line-height: 1.2; }
#report .report-solution-icon {
  display: grid; place-items: center; width: 10cqw; height: 10cqw;
  color: var(--badge-color); border: 1px solid currentColor; border-radius: 50%; background: #05242d;
}
#report .report-solution-icon svg { width: 60%; height: 60%; }
#report .report-solution-status svg { display: block; width: 100%; height: auto; }
#report .report-solution-status.is-correct { color: #00dce5; }
#report .report-solution-status.is-incorrect { color: #ff503c; }
#report .image-control {
  display: block; padding: 0; border: 0; border-radius: 0; min-height: 0;
  background: transparent; box-shadow: none; cursor: pointer;
}
#report .image-control:focus-visible { outline: 2px solid white; outline-offset: 3px; border-radius: 8px; }
#report .report-actions {
  position: absolute; top: 81%; left: 10%; width: 80%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin: 0;
}

/* Explicit outcome colors complement the labels and per-solvent feedback. */
#mix-result[data-outcome="correct"] {
  border: 2px solid #168447;
  background: #f1fbf4;
}
#mix-result[data-outcome="incorrect"] {
  border: 2px solid #cb3038;
  background: #fff4f4;
}
#mix-result #mix-result-title {
  padding: 9px 10px;
  border-radius: 10px;
  letter-spacing: -.3px;
}
#mix-result[data-outcome="correct"] #mix-result-title {
  color: #116232; background: #d5f3de; border: 1px solid #94d6aa;
}
#mix-result[data-outcome="incorrect"] #mix-result-title {
  color: #a51925; background: #ffe0e2; border: 1px solid #ee9ba2;
}
#mix-result .comparison-card:last-child {
  border: 2px solid #71ba8b; background: #edfaf1;
}
#mix-result .comparison-card:last-child h3 { color: #116232; }
#mix-result[data-outcome="correct"] .comparison-card:first-child {
  border: 2px solid #71ba8b; background: #edfaf1;
}
#mix-result[data-outcome="correct"] .comparison-card:first-child h3 { color: #116232; }
#mix-result[data-outcome="incorrect"] .comparison-card:first-child {
  border: 2px solid #e78c94; background: #fff0f1;
}
#mix-result[data-outcome="incorrect"] .comparison-card:first-child h3,
#mix-result[data-outcome="incorrect"] .comparison-card:first-child > strong { color: #a51925; }
#mix-result .comparison-table .matches { background: #e7f6ec; }
#mix-result .comparison-table .matches small { color: #116232; }
#mix-result .comparison-table .needs-change { background: #ffe4e6; }
#mix-result .comparison-table .needs-change small,
#mix-result .comparison-table .needs-change td:first-of-type { color: #a51925; }
#mix-result[data-outcome="correct"] #result-next { background: #167c40; }
#mix-result[data-outcome="incorrect"] #result-next { background: #b42330; }

/* Shared viewport position keeps Exit reachable on every screen and modal. */
.game-exit {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, calc((100vw - min(100vw, 56.25dvh)) / 2 + 10px));
  z-index: 100;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 0;
  background: transparent;
  text-decoration: none;
}
.game-exit img { display: block; width: 100%; height: auto; }
.game-exit:focus-visible { outline: 2px solid white; outline-offset: 2px; border-radius: 8px; }

#game:is([data-mode="practice"], [data-mode="game"]) .chemical:disabled {
  filter: grayscale(1);
  opacity: .45;
  cursor: wait;
  transform: none;
  box-shadow: none;
}
#game[data-pouring="true"] #feedback {
  display: block;
  position: absolute;
  top: 54%; left: 5%; width: 90%;
  margin: 0; padding: .8cqw;
  color: #e2e8ec; background: #16333d;
  border: 1px solid #526c76; border-radius: 2cqw;
  font-size: clamp(12px, 3.3cqw, 16px); text-align: center;
}
#game[data-mode="game"][data-pouring="true"] #feedback { top: 57%; }

.practice-result-sticker {
  position: absolute;
  left: 16.4%;
  bottom: calc(100% + 12px);
  width: 67.2%;
  height: min(26.4dvh, 192px);
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 5px 8px #0005);
  transform: rotate(var(--sticker-angle, -4deg));
}
#practice-result[open] .practice-result-sticker.is-visible {
  opacity: 1;
  animation: practice-sticker-pop 2.5s ease-in-out both;
  will-change: transform;
}
@keyframes practice-sticker-pop {
  0% { opacity: 0; transform: translateY(18px) rotate(-10deg) scale(.65); }
  16% { opacity: 1; transform: translateY(-8px) rotate(calc(var(--sticker-angle, -4deg) + 4deg)) scale(1.12); }
  28% { opacity: 1; transform: translateY(2px) rotate(var(--sticker-angle, -4deg)) scale(.98); }
  44% { opacity: 1; transform: translateY(-6px) rotate(calc(var(--sticker-angle, -4deg) - 3deg)) scale(1.06); }
  60% { opacity: 1; transform: translateY(0) rotate(calc(var(--sticker-angle, -4deg) + 2deg)) scale(1); }
  76% { opacity: 1; transform: translateY(-3px) rotate(calc(var(--sticker-angle, -4deg) - 1deg)) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--sticker-angle, -4deg)) scale(1); }
}