:root {
  color-scheme: light;
  --wash-ink: #2f1a50;
  --wash-pink: #e93283;
  --wash-purple: #773fbc;
  --wash-blue: #2f83d5;
  --wash-sky: #bcecff;
  --wash-paper: #fffaf5;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #2b1746; }

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  color: var(--wash-ink);
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 229, 102, .22), transparent 22%),
    linear-gradient(145deg, #e93685, #9751d0 55%, #3f9ce0);
  font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif;
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

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

.wash-shell {
  width: min(1460px, 100%);
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin-inline: auto;
  padding: clamp(8px, 1.4vw, 18px);
}

.wash-topbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 7px 0 rgba(47, 19, 76, .32);
}

.wash-back,
.wash-secondary,
.wash-primary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 950;
  text-decoration: none;
}

.wash-back {
  width: fit-content;
  gap: 7px;
  color: var(--wash-ink);
  background: #f5eff9;
}

.wash-brand { display: flex; align-items: center; gap: 10px; }
.wash-brand img { width: 82px; height: 42px; object-fit: contain; }
.wash-brand span { display: grid; }
.wash-brand small { color: #a02c72; font-size: .6rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.wash-brand strong { font-size: .95rem; line-height: 1.1; }

.wash-points { display: grid; justify-self: end; text-align: right; }
.wash-points strong { color: var(--wash-pink); font-size: 1.35rem; line-height: 1; }
.wash-points small { font-size: .58rem; font-weight: 900; text-transform: uppercase; }

[data-wash-view] {
  min-height: 0;
  margin-top: 12px;
  border: 3px solid rgba(255, 255, 255, .86);
  border-radius: 26px;
  background: rgba(247, 245, 255, .96);
  box-shadow: 0 16px 0 rgba(41, 17, 68, .25);
}

[data-wash-view][hidden] { display: none !important; }

.wash-content {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.18fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding: clamp(22px, 4vw, 56px);
}

.wash-content-copy h1,
.wash-game-heading h1,
.wash-result h1 { margin: 7px 0 0; letter-spacing: -.035em; line-height: 1; }

.wash-content-copy h1 { max-width: 13ch; font-size: clamp(2.35rem, 5vw, 5rem); }
.wash-content-copy > p:not(.wash-kicker, .wash-equipment-note) { max-width: 60ch; margin: 18px 0 0; color: #695b76; font-size: 1rem; font-weight: 730; line-height: 1.55; }

.wash-kicker {
  margin: 0;
  color: var(--wash-pink);
  font-size: .7rem;
  font-weight: 1000;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.wash-learning-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.wash-learning-list li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; }
.wash-learning-list b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--wash-pink), var(--wash-purple)); }
.wash-learning-list span { color: #64546f; font-size: .82rem; font-weight: 720; line-height: 1.35; }
.wash-learning-list strong { display: block; color: var(--wash-ink); font-size: .9rem; }

.wash-content-actions,
.wash-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wash-primary { border: 2px solid #421c65; color: #fff; background: linear-gradient(135deg, var(--wash-pink), #c52274); box-shadow: 0 5px 0 #421c65; cursor: pointer; }
.wash-secondary { border: 2px solid #ded2e8; color: #4b2a6c; background: #fff; }
.wash-equipment-note { max-width: 64ch; margin: 18px 0 0; border-left: 4px solid #35a3df; padding-left: 12px; color: #6c5f76; font-size: .7rem; font-weight: 760; line-height: 1.45; }

.wash-poster { min-width: 0; margin: 0; }
.wash-poster img { width: 100%; display: block; border: 2px solid #f1d8e5; border-radius: 22px; background: #fff; box-shadow: 9px 11px 0 rgba(72, 39, 103, .17); }
.wash-poster figcaption { margin-top: 9px; color: #74657f; font-size: .66rem; font-weight: 820; text-align: center; }

.wash-game {
  display: grid;
  align-self: start;
  grid-template-rows: auto auto;
  padding: clamp(14px, 2vw, 24px);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 228, 94, .18), transparent 22%),
    linear-gradient(145deg, #fff, #edf8ff);
}

.wash-game-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 34%); align-items: end; gap: 20px; }
.wash-game-heading h1 { font-size: clamp(1.75rem, 3.5vw, 3.1rem); }
.wash-game-heading p:not(.wash-kicker) { margin: 8px 0 0; color: #72617e; font-size: .82rem; font-weight: 760; }
.wash-progress { height: 12px; overflow: hidden; border: 2px solid #4a2a70; border-radius: 999px; background: #e3dced; }
.wash-progress i { width: 10%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #ffe45e, #ef3b87, #4f9de5); transition: width 260ms ease; }

.wash-practice-layout { display: grid; align-content: start; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.wash-sink { position: relative; height: clamp(330px, 48dvh, 480px); container-type: size; border: 3px solid #49395e; border-radius: 22px; background-color: #d6e9e7; background-image: linear-gradient(#b6ceca 2px, transparent 2px), linear-gradient(90deg, #b6ceca 2px, transparent 2px); background-size: 100% 76px, 96px 100%; box-shadow: inset 0 5px 0 #eaf6f3, 0 5px 0 #e4dbe8; }
.wash-scene { position: absolute; inset: 0; width: min(100cqw, calc(100cqh * 2.25)); height: 100%; margin: auto; }
.wash-counter { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 40%; border-top: 4px solid #49395e; border-radius: 0 0 18px 18px; background: #eadccc; box-shadow: inset 0 12px 0 #fff6e9, inset 0 -15px 0 #d1bdae; }
.wash-basin { position: absolute; z-index: 1; left: 18%; width: 64%; bottom: 8%; height: 38%; border: 4px solid #49395e; border-radius: 40% 40% 45% 45%; background: #f9faf3; box-shadow: 0 8px 0 #a4b6bd, 0 12px 0 #49395e, 0 16px 8px #49395e20; }
.wash-bowl { position: absolute; inset: 7% 6% 10%; border: 3px solid #597788; border-radius: 45%; background: radial-gradient(ellipse at 50% 94%, #d2e8e9 0 35%, #a4c4ce 36% 72%, #7e9fac 73%); box-shadow: inset 0 12px 0 #7899a6; }
.wash-drain { position: absolute; bottom: 20%; left: 46%; width: 8%; height: 13%; border: 3px solid #586178; border-radius: 50%; background: #77929f; box-shadow: inset 0 2px 0 #d3e0e5; }
.wash-fixture { position: absolute; z-index: 3; padding: 0; border: 0; color: #49395e; background: transparent; cursor: pointer; }
.wash-fixture:disabled { cursor: wait; }
.wash-fixture:not(:disabled):hover .wash-fixture-label { background: #fff; }
.wash-fixture:focus-visible { outline-offset: 5px; border-radius: 12px; }
.wash-fixture-label { display: inline-block; margin-top: 8px; border: 2px solid #698e96; border-radius: 7px; padding: 3px 8px; background: #eef6f1; font-size: .7rem; font-weight: 900; }
.wash-tap { left: 36%; top: 2%; width: 20%; height: 54%; }
.wash-tap svg { display: block; width: 100%; height: 100%; filter: drop-shadow(4px 4px 0 #7596a629); }
.wash-paper-dispenser { left: 7%; top: 10%; width: 17%; height: 40%; }
.wash-paper-box { position: relative; display: block; width: 100%; height: 67%; border: 4px solid #49395e; border-radius: 16px 16px 12px 12px; background: #fcf5e8; box-shadow: inset -8px -5px 0 #d9cbbc, 5px 6px 0 #73968d44; }
.wash-paper-box i { position: absolute; left: 37%; top: 18%; width: 27%; height: 9%; border: 2px solid #49395e; border-radius: 5px; background: #d6e9e7; }
.wash-paper-box b { position: absolute; left: 12%; right: 12%; bottom: 9%; height: 8%; border-radius: 6px; background: #49395e; }
.wash-paper-sheet { position: absolute; top: 52%; left: 19%; width: 62%; height: 24%; border: 2px solid #74687d; border-top: 0; border-radius: 0 0 2px 7px; background: repeating-linear-gradient(180deg, #fffdf4 0 12px, #ede4d6 13px 14px); transform-origin: top; }
.wash-paper-dispenser .wash-fixture-label { margin-top: 16%; }
.wash-soap-dispenser { right: 9%; top: 10%; width: 12%; height: 40%; }
.wash-soap-box { position: relative; display: block; height: 75%; border: 4px solid #49395e; border-radius: 20px 20px 12px 12px; background: #fcebf4; box-shadow: inset -7px -5px 0 #e4bbd2, 5px 6px 0 #73968d44; }
.wash-soap-window { position: absolute; left: 29%; top: 18%; width: 42%; height: 30%; border: 3px solid #49395e; border-radius: 30% 30% 50% 50%; background: #ed8abb; }
.wash-soap-pump { position: absolute; left: 17%; right: 17%; bottom: -9%; height: 31%; border: 3px solid #49395e; border-radius: 5px 5px 10px 10px; background: #ed8abb; box-shadow: inset 0 5px 0 #ffd6e8; transform-origin: top; }
.wash-soap-drop { position: absolute; left: 44%; bottom: -34%; width: 17%; height: 20%; border: 2px solid #49395e; border-radius: 50% 50% 50% 8%; background: #f398c3; opacity: 0; }
.wash-hands { pointer-events: none; position: absolute; z-index: 5; left: 35%; top: 29%; width: 30%; aspect-ratio: 1; filter: drop-shadow(0 5px 0 #49395e16); transform-origin: 50% 70%; }
.wash-hand-frame { position: absolute; inset: 0; display: block; background: url('/assets/lavagem-v3/hands-rest.webp') 0 0 / 200% 200% no-repeat; }
.wash-dirt { position: absolute; inset: 13% 14% 27%; opacity: 0; background: radial-gradient(ellipse at 15% 39%, #996854 0 3%, transparent 4%), radial-gradient(ellipse at 34% 19%, #996854 0 2%, transparent 3%), radial-gradient(ellipse at 80% 47%, #996854 0 3%, transparent 4%), radial-gradient(ellipse at 23% 76%, #996854 0 3%, transparent 4%), radial-gradient(ellipse at 73% 75%, #996854 0 2%, transparent 3%); }
.wash-sink[data-wash-sink-state="dirty"] .wash-dirt, .wash-sink[data-wash-sink-state="wet"] .wash-dirt { opacity: 1; }
.wash-foam { position: absolute; left: 14%; right: 14%; top: 26%; height: 40%; opacity: 0; background: radial-gradient(circle at 20% 30%, #fff 0 5%, #e4eef0 6% 7%, transparent 8%), radial-gradient(circle at 45% 40%, #fff 0 6%, #e4eef0 7% 8%, transparent 9%), radial-gradient(circle at 80% 25%, #fff 0 4%, #e4eef0 5% 6%, transparent 7%), radial-gradient(circle at 65% 68%, #fff 0 6%, #e4eef0 7% 8%, transparent 9%), radial-gradient(circle at 26% 77%, #fff 0 4%, #e4eef0 5% 6%, transparent 7%), radial-gradient(circle at 33% 37%, #fff 0 3%, transparent 4%), radial-gradient(circle at 68% 34%, #fff 0 3%, transparent 4%), radial-gradient(circle at 42% 63%, #fff 0 4%, transparent 5%); pointer-events: none; }

.wash-sink[data-wash-sink-state="soapy"] .wash-foam, .wash-sink[data-wash-sink-state="rubbing"] .wash-foam { opacity: .9; }
.wash-tap svg { overflow: visible; }
.wash-water { opacity: 0; pointer-events: none; transition: opacity .15s; }
.wash-sink[data-water="on"] .wash-water { opacity: 1; }
.wash-water-lines { animation: washWaterFlow .45s linear infinite; }
@keyframes washWaterFlow { to { stroke-dashoffset: -21; } }
.wash-motion-label { pointer-events: none; position: absolute; z-index: 7; top: 3%; left: 26%; right: 26%; display: none; border: 2px solid #49395e; border-radius: 9px; padding: 6px 8px; background: #fff9eb; font-size: .74rem; font-weight: 900; text-align: center; }
.wash-sink[data-effect] .wash-motion-label { display: block; }
.wash-sink[data-effect="full"] .wash-motion-label { display: none; }
.wash-motion-fingers, .wash-motion-thumb { display: none; }
.wash-sink[data-effect="fingers"] .wash-motion-fingers, .wash-sink[data-effect="thumb"] .wash-motion-thumb { display: block; }
.wash-sink[data-effect="wet"] .wash-hands, .wash-sink[data-effect="rinse"] .wash-hands { animation: washUnderWater var(--action-duration) ease-in-out both; }
.wash-sink[data-effect="soap"] .wash-soap-pump { animation: washPress 1.1s ease-in-out; }
.wash-sink[data-effect="soap"] .wash-soap-drop { animation: washSoapDrop 1.3s .3s ease-in both; }
.wash-sink[data-effect="soap"] .wash-hands { animation: washCatchSoap var(--action-duration) ease-in-out both; }
.wash-sink[data-effect="soap"] .wash-foam { animation: washFoam var(--action-duration) ease-in-out both; }
.wash-sink[data-effect="rinse"] .wash-foam { animation: washRinse var(--action-duration) ease-in-out both; }
.wash-hands[data-pose="palms"] .wash-hand-frame, .wash-hands[data-pose="back"] .wash-hand-frame, .wash-hands[data-pose="thumb"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-motion.webp'); background-size: 400% 400%; animation: washFrames .8s steps(1) infinite; }
.wash-hands[data-pose="palms"] { --hand-row: 0%; }
.wash-hands[data-pose="back"] { --hand-row: 33.3333%; }
.wash-hands[data-pose="back"] { animation: washAlternate 6.4s steps(1) both; }
.wash-hands[data-pose="fingers"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-motion.webp'); background-size: 400% 400%; animation: washInterlace .8s steps(1) infinite; }
.wash-hands[data-pose="knuckles"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-rest.webp'); background-size: 200% 200%; background-position: 0% 100%; animation: washKnuckles .8s steps(1) infinite; }
.wash-hands[data-pose="nails"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-motion.webp'); background-size: 400% 400%; animation: washNails .8s steps(1) infinite; }
.wash-hands[data-pose="wrists"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-motion.webp'); background-size: 400% 400%; animation: washWrists .8s steps(1) infinite; }
.wash-hands[data-pose="knuckles"], .wash-hands[data-pose="nails"], .wash-hands[data-pose="wrists"] { animation: washAlternate var(--action-duration) steps(1) both; }
@keyframes washInterlace { 0%,100% { background-position: 0% 66.6667%; } 50% { background-position: 33.3333% 66.6667%; } }
@keyframes washNails { 0%,100% { background-position: 66.6667% 66.6667%; } 50% { background-position: 100% 66.6667%; } }
@keyframes washWrists { 0%,100% { background-position: 66.6667% 98%; } 50% { background-position: 100% 98%; } }
@keyframes washKnuckles { 0%,100% { background-position: 0% 100%; } 50% { background-position: 100% 100%; } }
.wash-hands[data-pose="thumb"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-thumb.webp'); background-size: 200% 200%; animation: washThumbFrames 4s steps(1) 2; }
.wash-hands[data-pose="thumb"] { animation: washAlternate 8s steps(1) both; }
.wash-drying-paper { position: absolute; top: 26%; left: 25%; width: 48%; height: 43%; border: 3px solid #74687d; border-radius: 5px 18px 5px 12px; background: repeating-linear-gradient(155deg, #fffef6 0 22px, #e6dfd3 23px 25px); opacity: 0; }
.wash-sink[data-effect="towel"] .wash-paper-sheet { animation: washPullPaper 1s ease-in-out both; }
.wash-sink[data-effect="towel"] .wash-drying-paper { animation: washDryPaper 4.4s ease-in-out both; }
.wash-sink[data-effect="towel"] .wash-hand-frame { animation: washDryHands 4.4s steps(1) both; }
.wash-sink[data-effect="towel"] .wash-hands { animation: washDrySides 4.4s steps(1) both; }
.wash-sink[data-paused="true"] * { animation-play-state: paused !important; }
@keyframes washFrames { 0%, 100% { background-position: 0% var(--hand-row); } 25% { background-position: 33.3333% var(--hand-row); } 50% { background-position: 66.6667% var(--hand-row); } 75% { background-position: 100% var(--hand-row); } }
@keyframes washFingerFrames {
  0%, 8%, 100% { background-image: url('/assets/lavagem-v3/hands-motion.webp'); background-size: 400% 400%; background-position: 0% 66.6667%; }
  4%, 12% { background-position: 33.3333% 66.6667%; }
  16%, 24%, 32% { background-image: url('/assets/lavagem-v3/hands-rest.webp'); background-size: 200% 200%; background-position: 0% 100%; }
  20%, 28% { background-position: 100% 100%; }
  36%, 44%, 52%, 60%, 68%, 76%, 84%, 92% { background-image: url('/assets/lavagem-v3/hands-motion.webp'); background-size: 400% 400%; background-position: 66.6667% 66.6667%; }
  40%, 48%, 56%, 64%, 72%, 80%, 88%, 96% { background-position: 100% 66.6667%; }
}
@keyframes washThumbFrames { 0%, 10%, 20%, 30%, 40%, 100% { background-position: 0% 0%; } 5%, 15%, 25%, 35%, 45% { background-position: 100% 0%; } 50%, 60%, 70%, 80%, 90% { background-position: 0% 100%; } 55%, 65%, 75%, 85%, 95% { background-position: 100% 100%; } }
@keyframes washAlternate { 0%, 49.999% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
@keyframes washWater { from { transform: scaleX(.9); } to { transform: scaleX(1.1); } }
@keyframes washUnderWater { 0%,100% { transform: translateX(0); } 25% { transform: translateX(12%) rotate(5deg); } 65% { transform: translateX(-8%) rotate(-5deg); } }
@keyframes washPress { 0%,100% { transform: translateY(0); } 35%,60% { transform: translateY(18%) scaleY(.8); } }
@keyframes washSoapDrop { 0% { opacity: 0; transform: translateY(-30%); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-145%, 220%); } }
@keyframes washCatchSoap { 0%,100% { transform: translate(0); } 30%,55% { transform: translate(72%, -27%) rotate(10deg); } }
@keyframes washFoam { 0%,35% { opacity: 0; } 100% { opacity: .9; } }
@keyframes washRinse { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes washPullPaper { 0% { transform: scaleY(1); } 65% { transform: scaleY(1.8); } 100% { transform: scaleY(.7); } }
@keyframes washDryPaper { 0%,10% { opacity: 0; transform: translate(-130%, -75%) rotate(-25deg); } 22% { opacity: 1; transform: translate(0) rotate(-10deg); } 30%,100% { opacity: 0; } }
@keyframes washDryHands {
  0%, 20%, 100% { background-image: url('/assets/lavagem-v3/hands-rest.webp'); background-position: 0% 0%; }
  25%, 45%, 65%, 85% { background-image: url('/assets/lavagem-v3/hands-dry.webp'); background-position: 0% 0%; }
  30%, 50%, 70%, 90% { background-position: 100% 0%; }
  35%, 55%, 75%, 95% { background-position: 0% 100%; }
  40%, 60%, 80%, 99% { background-position: 100% 100%; }
}
@keyframes washDrySides { 0%, 54.99%, 100% { transform: scaleX(1); } 55%, 99.99% { transform: scaleX(-1); } }
.wash-controls { display: grid; align-content: start; gap: 10px; padding: 0; border: 0; background: transparent; }
.wash-control-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wash-feedback { min-height: 34px; border-radius: 9px; padding: 8px 12px; color: #594667; background: #f0eaf6; font-size: .8rem; font-weight: 800; line-height: 1.4; }
.wash-feedback.is-error { color: #8b2452; background: #fff0f5; }
.wash-feedback.is-success { color: #166a58; background: #e9faf5; }
.wash-action-grid { display: flex; gap: 12px; }
.wash-action { flex: 1; min-width: 0; min-height: 76px; display: flex; align-items: center; gap: 12px; border: 2px solid #c9bdd6; border-radius: 14px; padding: 12px; color: #3b2359; background: #fffdfb; box-shadow: 0 4px 0 #ded4e6; text-align: left; cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.wash-action:not(:disabled):hover { border-color: var(--wash-pink); background: #fff1f7; }
.wash-action:disabled { cursor: wait; opacity: .7; }
.wash-action-marker { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #f4e7f0; font-size: 1.3rem; }
.wash-action strong { display: block; font-size: .87rem; line-height: 1.25; }
.wash-action small { display: block; margin-top: 4px; color: #786983; font-size: .71rem; font-weight: 700; line-height: 1.3; }
.wash-attempts { flex-shrink: 0; display: flex; align-items: center; gap: 7px; color: #786983; font-size: .7rem; font-weight: 800; }
.wash-attempts strong { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 8px; color: #b72f76; background: #f8e7f1; }

.wash-result { display: grid; place-items: center; padding: clamp(22px, 5vw, 60px); }
.wash-result-card { width: min(680px, 100%); display: grid; justify-items: center; border: 3px solid #3d2264; border-radius: 32px; padding: clamp(24px, 4vw, 46px); background: linear-gradient(145deg, #fff, #f8effd); box-shadow: 10px 12px 0 rgba(57, 30, 86, .2); text-align: center; }
.wash-result-card > img { width: min(180px, 36vw); height: 170px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(51,35,74,.22)); }
.wash-result h1 { max-width: 16ch; font-size: clamp(2rem, 5vw, 4.2rem); }
.wash-result-card > p:not(.wash-kicker) { max-width: 52ch; margin: 13px 0 0; color: #6d5d79; font-weight: 740; line-height: 1.5; }
.wash-result-score { display: grid; margin-top: 20px; border-radius: 22px; padding: 13px 28px; color: #fff; background: linear-gradient(145deg, var(--wash-pink), var(--wash-purple)); }
.wash-result-score strong { font-size: 2rem; line-height: 1; }
.wash-result-score small { margin-top: 3px; font-size: .62rem; font-weight: 900; text-transform: uppercase; }

@media (max-width: 900px) {
  .wash-content { grid-template-columns: 1fr; }
  .wash-poster { order: -1; }
  .wash-poster img { max-height: 48dvh; object-fit: contain; }
  .wash-practice-layout { grid-template-columns: 1fr; }
  .wash-sink { height: 390px; }
}

@media (max-width: 620px) {
  .wash-shell { padding: 6px; }
  .wash-topbar { grid-template-columns: auto 1fr auto; gap: 7px; padding: 7px; }
  .wash-back { width: 44px; padding: 0; font-size: 1.15rem; }
  .wash-back span { display: none; }
  .wash-brand { gap: 5px; }
  .wash-brand img { width: 54px; }
  .wash-brand small { font-size: .48rem; }
  .wash-brand strong { font-size: .7rem; }
  .wash-points strong { font-size: 1rem; }
  .wash-points small { max-width: 8ch; font-size: .45rem; }
  [data-wash-view] { margin-top: 8px; border-width: 2px; border-radius: 20px; }
  .wash-content { padding: 16px; }
  .wash-content-copy h1 { font-size: clamp(2.1rem, 12vw, 3.4rem); }
  .wash-content-actions, .wash-result-actions { display: grid; }
  .wash-content-actions > *, .wash-result-actions > * { width: 100%; }
  .wash-game { padding: 11px; overflow: visible; }
  .wash-game-heading { grid-template-columns: 1fr; gap: 10px; }
  .wash-practice-layout { margin-top: 12px; }
  .wash-sink { height: 320px; background-size: 100% 60px, 66px 100%; }
  .wash-scene { width: 100%; }
  .wash-basin { left: 6%; width: 88%; height: 35%; bottom: 9%; }
  .wash-hands { left: 24%; top: 41%; width: 52%; }
  .wash-tap { left: 32%; top: 2%; width: 35%; height: 47%; }
  .wash-paper-dispenser { left: 4%; top: 9%; width: 25%; height: 33%; }
  .wash-soap-dispenser { right: 4%; top: 9%; width: 19%; height: 33%; }
  .wash-fixture-label { font-size: .58rem; padding: 3px 4px; }
  .wash-motion-label { top: 2%; left: 10%; right: 10%; font-size: .65rem; }
  .wash-sink[data-effect="soap"] .wash-hands { animation-name: washCatchSoapMobile; }
  .wash-action-grid { flex-wrap: wrap; gap: 9px; }
  .wash-action { flex-basis: calc(50% - 9px); min-height: 94px; padding: 9px; gap: 7px; }
  .wash-action-marker { flex-basis: 30px; height: 34px; font-size: 1rem; }
  .wash-action strong { font-size: .74rem; }
  .wash-action small { font-size: .65rem; }
  .wash-feedback { font-size: .73rem; }
  .wash-game-heading h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .wash-controls { min-height: 0; }

}

@keyframes washCatchSoapMobile { 0%,100% { transform: translate(0); } 30%,55% { transform: translate(28%, -34%) rotate(10deg); } }
@media (max-height: 620px) and (orientation: landscape) {
  .wash-game-heading h1 { font-size: 1.6rem; }
  .wash-game { padding: 12px; }
  .wash-sink { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .wash-hands[data-pose="fingers"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-motion.webp'); background-size: 400% 400%; background-position: 0% 66.6667%; }
  .wash-hands[data-pose="back"] .wash-hand-frame { background-position: 0% 33.3333%; }
  .wash-hands[data-pose="thumb"] .wash-hand-frame { background-position: 0% 0%; }
  .wash-sink[data-effect="soap"] .wash-foam { opacity: .9; }
  .wash-sink[data-effect="rinse"] .wash-foam { opacity: 0; }
  .wash-sink[data-effect="towel"] .wash-hand-frame { background-image: url('/assets/lavagem-v3/hands-dry.webp'); background-position: 0% 0%; }
}

.wash-booklet-dialog {
  width: min(1120px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border: 0;
  border-radius: 24px;
  padding: 0;
  background: transparent;
  box-shadow: 0 30px 90px rgba(24, 10, 44, .46);
  scrollbar-width: thin;
  scrollbar-color: #c63684 #f1e8f5;
}

.wash-booklet-dialog::backdrop {
  background: rgba(31, 14, 52, .8);
  backdrop-filter: blur(8px);
}

.wash-booklet-shell {
  padding: 14px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 24px;
  background: linear-gradient(145deg, #f83d91, #954ed0 54%, #43addf);
}

.wash-booklet-shell header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 12px;
  color: #fff;
}

.wash-booklet-shell header > div {
  display: grid;
  gap: 2px;
}

.wash-booklet-shell header small {
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wash-booklet-shell header strong {
  font-size: clamp(.9rem, 2vw, 1.2rem);
}

.wash-booklet-shell header button {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 14px;
  background: #34205f;
  color: #fff;
  font: inherit;
  font-size: 1.6rem;
  cursor: pointer;
}

.wash-booklet-shell > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background: #fff;
}

@media (max-width: 620px) {
  .wash-booklet-dialog {
    width: calc(100% - 10px);
    max-height: calc(100dvh - 10px);
    border-radius: 18px;
  }

  .wash-booklet-shell {
    padding: 8px;
    border-radius: 18px;
  }

  .wash-booklet-shell header {
    padding: 2px 2px 9px;
  }

  .wash-booklet-shell > img {
    border-radius: 12px;
  }
}

.wash-progress-wrap { display: grid; gap: 9px; }
[data-wash-coverage] { text-align: right; font-size: .78rem; font-weight: 900; color: #4a2a70; }
.wash-area-target { pointer-events: none; position: absolute; z-index: 7; bottom: 4%; left: 50%; transform: translateX(-50%); border: 2px solid #e62e81; border-radius: 30px; padding: 7px 18px; background: #fff9fc; color: #a51d61; font-weight: 900; font-size: .85rem; white-space: nowrap; box-shadow: 0 4px 0 #d8b4cb; }
.wash-area-target::before { content: '◎ '; color: #e62e81; }
.wash-sink[data-effect] .wash-area-target { visibility: hidden; }
.wash-action-drawing { flex-basis: 76px; height: 66px; background: #faf0f6 url('/assets/lavagem-v3/hands-motion.webp') 0 0 / 400% 400% no-repeat; border: 1px solid #e9d6e5; }
.wash-action-drawing[data-pose="back"] { background-position: 0% 33.3333%; }
.wash-action-drawing[data-pose="fingers"] { background-position: 0% 66.6667%; }
.wash-action-drawing[data-pose="nails"] { background-position: 66.6667% 66.6667%; }
.wash-action-drawing[data-pose="wrists"] { background-position: 66.6667% 98%; }
.wash-action-drawing[data-pose="knuckles"] { background-image: url('/assets/lavagem-v3/hands-rest.webp'); background-size: 200% 200%; background-position: 0% 100%; }
.wash-action-drawing[data-pose="thumb"] { background-image: url('/assets/lavagem-v3/hands-thumb.webp'); background-size: 200% 200%; }
@media (max-width: 620px) { .wash-action-drawing { flex-basis: 62px; height: 54px; } .wash-action { flex-basis: calc(50% - 9px); } [data-wash-coverage] { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .wash-hands[data-pose="nails"] .wash-hand-frame { background-position: 66.6667% 66.6667%; } .wash-hands[data-pose="wrists"] .wash-hand-frame { background-position: 66.6667% 98%; } }