/* Full-design preview only. Tone follows the approved tone-v1 sample. */
:root{--ink:#172b33;--paper:#e8e6d6;--yellow:#e4c680;--coral:#cf7664;--teal:#72aa9e;--outline:4px solid var(--ink)}
body{background:#102e31}
.game{background-color:#174c49;background-image:url('assets/field-deep.svg');background-size:100% 100%}
.review-note{background:#102e31;color:#c5d5c8}
.edition{color:#d8d9c3;text-shadow:2px 3px 0 var(--ink)}
.music{background:#d7ddc8;border-width:4px;box-shadow:3px 5px 0 var(--ink);font-family:Happy,sans-serif;font-size:15px}
.music button{background:#d7b87d;border-width:3px;width:36px;height:35px}
.music button[aria-pressed=true]{background:#95a69a}
.music output{font-family:Happy,sans-serif;font-size:15px}
.title p{color:#1d4845;font-size:15px;letter-spacing:1px;text-shadow:none}
.title h1{filter:drop-shadow(2px 6px 0 #19333888);letter-spacing:3px}
.title h1 span{color:#dce0df;-webkit-text-stroke:12px var(--ink);paint-order:stroke fill}
.title h1 span:nth-child(3),.title h1 span:nth-child(4){color:#e4c680}
.title-spark{color:#dcb66d;-webkit-text-stroke-color:var(--ink)}
.step-label{color:#1b3b3a;text-shadow:0 1px #b7c5a0}
.step-label b{border-width:3px;background:#e4c680}
.step-label i{height:4px;opacity:.6;border-radius:50%}
.step-label small{color:#234c43;font-weight:700}
.subject-card{border-width:4px;box-shadow:3px 5px 0 var(--ink),inset 0 0 0 2px #172b331c;background:var(--card);isolation:isolate}
.subject-card>img,.subject-stamp img,.hero-book,.end-book{filter:saturate(.77) brightness(.92) drop-shadow(1px 3px 0 #172b3370)}
.subject-card strong{color:var(--ink);font-weight:700}
.subject-card small{color:#273b3a;font-weight:700}
.subject-card .tick{border-width:3px;background:#dce0df;color:var(--ink)}
.corners i{border-color:var(--ink);filter:drop-shadow(1px 2px 0 #94a39a)}
.corners i:after{border-color:#dce0df}
.sound-title{color:#1b3838}
.sound-options button{background:#b6c8a8;border:3px solid var(--ink);box-shadow:2px 4px 0 var(--ink);position:relative;isolation:isolate}
.sound-options button[aria-pressed=true]{background:#d9d8c0;box-shadow:2px 4px 0 var(--ink)}
.sound-options button svg{fill:#e2bf83;stroke-width:3}
.duration-grid button,.restart{background:linear-gradient(170deg,#e4c781 35%,#ddb176 77%,#d59b6e);border:5px solid var(--ink);box-shadow:3px 6px 0 var(--ink),5px 11px 0 #123b383d;isolation:isolate}
.duration-grid strong{color:var(--ink);paint-order:stroke fill;-webkit-text-stroke:1px var(--ink)}
.duration-grid span{font-weight:700}
.duration-grid .living-run,.duration-grid .living-glyph{font:inherit;margin-left:0}
.duration-grid i{opacity:.75}
.game-footer{color:#d1d7b4;text-shadow:1px 2px 0 #183a37;font-weight:700}
.tiny-star{color:#e0bd75}
.subject-stamp{background:#dcd9c4;box-shadow:4px 6px 0 var(--ink);border-width:4px}
.timer-plaque{background:linear-gradient(160deg,#e8cf96,#caa77a);border-width:5px;box-shadow:5px 7px 0 var(--ink)}
.timer-plaque strong{color:#182f35;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
.fuse-map{filter:drop-shadow(2px 5px 0 #183b3a80)}
.scene-caption{color:#cbd2b1;text-shadow:2px 2px 0 #173a37}
.burst{background:#d7ac6c;filter:drop-shadow(5px 7px 0 #17393a)}
.cloud{background:#ddd9c6;border-width:5px;box-shadow:6px 9px 0 var(--ink)}
.cloud h2{color:#c66d5d;-webkit-text-stroke:7px var(--ink);text-shadow:2px 4px 0 var(--ink)}
.confetti{color:#e1d4ad;-webkit-text-stroke-color:var(--ink)}
.c3{color:#bb7767}
.restart .living-run,.restart .living-glyph{margin-left:0}
.kit-title,.kit-panel h3{color:#dce0df;paint-order:stroke fill;-webkit-text-stroke:4px var(--ink);filter:drop-shadow(2px 4px 0 #172b3370)}
.kit-intro{color:#dbe1c5;text-shadow:1px 2px 0 #172b33}
.kit-panel{background:#d9dcc8;border-width:4px;box-shadow:4px 7px 0 var(--ink)}
.kit-panel h3{color:#e4c680;-webkit-text-stroke:4px var(--ink)}
.text-button{position:relative;background:#a9baa4;border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);font-family:Happy,sans-serif}
.swatches i{border-width:4px}

/* The reference's small bubbles and continuously moving lettering. */
.title h1 span,.living-glyph{display:inline-block;transform-origin:50% 70%;animation:living-v2 .96s steps(1,end) infinite;animation-delay:calc(var(--i,0)*-.137s)}
.living-run{display:inline-block;white-space:pre}
.title p,.music>span,.subject-card small,.step-label small,.timer-plaque small,.cloud small,.cloud p,.game-footer,.scene-caption,.kit-intro,.kit-panel p{animation:soft-bob-v2 3.2s steps(1,end) infinite}
.cloud small{display:inline-block}
.bubble-hit{position:relative;isolation:isolate;transform-origin:50% 60%;transition:transform .13s ease-out,translate .13s ease-out}
.bubble-hit.engaged{animation:inflate-v2 .48s both cubic-bezier(.2,.7,.25,1)}
.bubble-hit.down{animation:none!important;transform:translateY(5px) scale(1.10,.87)}
.restart.bubble-hit.down{animation:none!important;transform:none!important;box-shadow:1px 2px 0 var(--ink)}
.bubble-hit .puff{pointer-events:none;position:absolute;z-index:15;width:var(--size);height:var(--size);border-radius:44% 56% 49% 51%;background:#f2f3e7;box-shadow:inset -2px -2px #cfddca,0 1px 0 #172b3360;left:var(--x);top:var(--y);animation:puff-v2 .52s ease-out forwards}
.bubble-hit.engaged:focus-visible{outline-color:#fff;outline-offset:6px}
.subject-card:hover,.duration-grid button:hover,.restart:hover{translate:none}
.subject-card:active,.duration-grid button:active,.restart:active,.sound-options button:active{translate:none}
@keyframes living-v2{0%,100%{transform:translate(0,0) rotate(-1deg) scale(1,1.015)}17%{transform:translate(.3px,-1.5px) rotate(1.5deg) scale(1.025,.985)}34%{transform:translate(-.5px,.5px) rotate(-.8deg) scale(.99,1.02)}51%{transform:translate(.5px,-.5px) rotate(1deg) scale(1.015,.99)}68%{transform:translate(0,1px) rotate(-1.5deg) scale(.985,1.015)}84%{transform:translate(-.3px,-1px) rotate(.6deg) scale(1.02,1)}}
@keyframes soft-bob-v2{0%,100%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}
@keyframes inflate-v2{0%{transform:scale(1)}24%{transform:translateY(-1px) scale(1.16,.94)}52%{transform:translateY(-3px) scale(1.065,1.13)}76%{transform:translateY(-2px) scale(1.115,1.04)}100%{transform:translateY(-2px) scale(1.10,1.07)}}
@keyframes puff-v2{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}18%{opacity:.95;transform:translate(-50%,-50%) scale(1)}65%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.1)}}
.reduce-motion .living-glyph,.reduce-motion .title h1 span{animation:none!important}
.reduce-motion .puff{display:none!important}
@media(prefers-reduced-motion:reduce){.living-glyph,.title h1 span{animation:none!important}.puff{display:none!important}.bubble-hit.engaged{animation:none!important;transform:scale(1.04)}}
@media(max-width:700px){.game{background-size:100% 100%}.title p{font-size:11px}.title h1 span{-webkit-text-stroke-width:9px}.subject-card{box-shadow:2px 5px 0 var(--ink)}.sound-options button{border-width:3px}.duration-grid button{border-width:4px;box-shadow:2px 5px 0 var(--ink)}.cloud h2{-webkit-text-stroke-width:6px}.kit-panel h3{-webkit-text-stroke-width:3px}}