:root {
  color-scheme:light;
  --ink:#623d2d; --muted:#876e58; --cream:#fff9e8; --water:#24becb;
  --gold:#f6bf27; --pink:#ed578c; --blue:#3975e9;
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  color:var(--ink);background:#1a9eaf;
}
* {box-sizing:border-box}
body {margin:0;min-height:100svh;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 25% 12%,#77e6dd55,transparent 60%),linear-gradient(140deg,#2bbdc5,#118fA5);}
button,select {font:inherit}
button {cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,select:focus-visible {outline:3px solid #2865a5;outline-offset:3px}
canvas:focus-visible {outline:0}
button:disabled {opacity:.45;cursor:default}
button:not(:disabled):active {transform:translateY(2px)}
[hidden] {display:none!important}
.svg-defs {position:absolute;width:0;height:0;overflow:hidden}
.game {width:430px;max-width:100%;padding:12px 16px 8px;background:linear-gradient(155deg,#72e0db44,#51cbd022);}
.top-panel {padding:10px 14px 12px;border:2px solid #fffcf1;border-radius:25px 25px 32px 32px;background:linear-gradient(155deg,#fffdf2,#f3ecd6);box-shadow:inset 0 -4px 5px #d4c4a75c,0 5px 9px #075f7540,0 1px 0 #b5a58c;}
.brand-row {display:flex;align-items:center;justify-content:center;position:relative;height:29px;margin-bottom:5px}
.brand {display:flex;align-items:center;gap:6px}
h1 {margin:0;font-size:26px;line-height:1;letter-spacing:-1.2px;font-weight:900;text-shadow:0 2px 0 #fff}
.river-mark {font-size:29px;line-height:20px;color:#4aa9ac;transform:rotate(-10deg)}
.round-button {position:absolute;right:-2px;top:0;width:29px;height:29px;border:1px solid #d6c9ae;border-radius:50%;background:linear-gradient(140deg,#fffef7,#eee3cb);box-shadow:inset 1px 2px 2px #fff,0 2px 3px #a0885d33;font-size:17px;font-weight:bold}
.hud {display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:43px}
.phase-button {flex:1;min-width:0;border:0;border-radius:13px;background:#e9dfc650;padding:6px 10px;text-align:left;position:relative;box-shadow:inset 0 2px 3px #b99e7738,0 1px 0 #fff;min-height:45px}
.phase-button>span:first-child {display:block;font-size:11px;font-weight:bold;color:#8c735a;margin-bottom:2px}
.phase-button strong {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px;font-size:15px;letter-spacing:-.4px}
.phase-chevron {position:absolute;right:8px;bottom:9px;color:#9b805e;font-size:16px}
.score {text-align:center;white-space:nowrap;min-width:107px;font-size:10px;font-weight:bold}
.score strong {font-size:19px;line-height:21px;margin-right:2px;font-variant-numeric:tabular-nums}
.stars {display:flex;align-items:center;justify-content:center;gap:2px;min-height:27px;color:#d89b1d}
.rating-star {width:27px;height:27px;overflow:visible;filter:drop-shadow(0 2px 1px #9b701c3d)}
.rating-star.empty {filter:grayscale(1);opacity:.4}
.goal-line {display:flex;justify-content:space-between;align-items:center;gap:4px;margin:10px 1px 8px;color:#125869;font-size:9px;font-weight:bold;min-height:18px}
#chapter {max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#target {font-size:10px;white-space:nowrap}
.pond-shell {position:relative;width:min(100%,calc((100svh - 390px)*.75));min-width:210px;margin:auto;border:2px solid #bdfff0ac;border-radius:16px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 3px 0 #107b916b,0 8px 20px #08748a26;background:var(--water)}
#pond {display:block;width:100%;height:100%;aspect-ratio:3/4;touch-action:none}
.guidance {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:66px;padding:7px 0 6px}
#message {margin:0;text-align:center;font-size:11px;line-height:1.3;color:#064e61;max-width:350px}
.directions {display:flex;gap:7px;margin-top:4px}
.directions button {width:44px;min-height:44px;background:#e7fff3c2;border:1px solid #d7fff6;border-bottom:2px solid #448f9a77;border-radius:12px;color:#316572;font-size:22px;line-height:28px;box-shadow:inset 0 1px 2px #fff9}
.actions {display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:7px 12px 8px;border:2px solid #fffdf0;border-radius:29px;background:linear-gradient(135deg,#fffdf0,#f0e6ce);box-shadow:inset 0 -3px 5px #c9b78f55,0 5px 8px #08687940}
.actions button {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:60px;border:0;background:transparent;font-size:11px;font-weight:900;line-height:14px;padding:0 3px}
.button-icon {display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid #c4ad86;background:linear-gradient(140deg,#fffef5,#f0e3c7);box-shadow:inset 1px 2px 1px #fff,0 2px 3px #a0896055;color:#72431e}
.button-icon svg {width:29px;height:29px;filter:drop-shadow(0 1px 0 #fff9)}
.hint-button .button-icon {background:radial-gradient(circle,#fff8d4,#f8eac6);border-color:#d5bd7b}
footer {display:flex;align-items:center;justify-content:space-between;color:#0f5d6d;font-size:10px;font-weight:bold;min-height:26px;padding-top:2px}
footer button {border:0;background:none;min-height:28px;padding:0 2px;font-size:10px}
footer button span {font-size:14px;margin-left:2px}
.loading {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#b4ebe2;color:#236675;font-size:13px}
.loading-ring {width:45px;height:45px;border-radius:50%;border:9px solid var(--pink);border-top-color:#fff2dd;animation:spin 1.5s linear infinite}
@keyframes spin {to{transform:rotate(360deg)}}
dialog {width:min(368px,calc(100% - 32px));max-height:90svh;overflow:auto;padding:30px 24px 20px;color:var(--ink);border:2px solid #fffdf2;border-radius:28px;background:linear-gradient(140deg,#fffdf0,#f1e8d3);box-shadow:inset 0 -4px 5px #c8b68b44,0 22px 70px #00394466}
dialog::backdrop {background:#064951b8;backdrop-filter:blur(5px)}
dialog h2 {margin:0 20px 12px 0;font-size:25px;line-height:1.15;font-weight:900;letter-spacing:-.8px}
dialog p {font-size:13px;line-height:1.6}
.muted {color:var(--muted)}
.close {position:absolute;right:12px;top:10px;width:36px;height:36px;font-size:25px;background:transparent;border:0}
.primary {display:block;width:100%;border:1px solid #e0b52c;border-bottom:3px solid #b58a23;background:linear-gradient(#ffe987,#ffd04b);box-shadow:inset 0 2px 0 #fff4bc;border-radius:16px;padding:14px 10px;min-height:48px;font-weight:bold;margin-top:20px}
.text-button {display:block;margin:10px auto 0;min-height:44px;background:none;border:0;font-size:12px}
#victory {text-align:center}
#victory h2 {margin-right:0}
.victory-ripple {width:78px;height:78px;margin:0 auto 16px;background:linear-gradient(150deg,#9bede0,#40becc);border:3px solid #dcfff0;border-radius:50%;font-size:67px;color:#fff6da;line-height:64px;box-shadow:0 3px 4px #0b6e8540}
.dialog-kicker {margin:4px;color:var(--muted)}
.victory-stars {display:flex;justify-content:center;gap:6px;padding:8px 0}
.victory-stars .rating-star {width:48px;height:48px}
label {display:block;margin:18px 0 8px;font-size:13px;font-weight:bold}
select {width:100%;border:1px solid #c8b998;border-radius:11px;background:#fffdf5;color:var(--ink);min-height:48px;padding:8px 10px;font-size:12px}
.instructions {padding-left:20px;font-size:13px;line-height:1.65}
.instructions li {padding-left:3px;margin-bottom:12px}
.level-group {margin-top:20px}
.level-group h3 {font-size:13px;font-weight:bold;color:var(--muted);margin:0 0 10px}
.level-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.level-grid button {border:1px solid #ddceb0;border-bottom:3px solid #cbbb9b;border-radius:12px;background:linear-gradient(140deg,#fffdf1,#eee0c4);min-height:60px;font-size:18px;font-weight:bold;box-shadow:inset 0 2px 0 #fff}
.level-grid button.current {background:linear-gradient(#ffe98e,#ffd158);border-color:#d4ad39}
.level-grid small {display:block;color:#aa7d1e;font-size:9px;letter-spacing:1px;margin-top:3px}
@media (max-width:480px) {
  body {align-items:flex-start}
  .game {padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(4px + env(safe-area-inset-bottom));min-height:100svh}
}
@media (max-height:720px) and (max-width:480px) {
  .game {padding-left:12px;padding-right:12px}
  .top-panel {padding:7px 12px 9px}
  .brand-row {height:25px;margin-bottom:3px} h1 {font-size:23px}
  .goal-line {margin:7px 1px 6px}
  .pond-shell {width:min(100%,calc((100svh - 364px)*.75))}
  .guidance {min-height:63px;padding:6px 0 5px}
  .actions {padding-top:5px;padding-bottom:5px}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;scroll-behavior:auto!important}}
.resources {display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:43px;margin-top:3px;color:#164e57;font-size:12px;font-weight:bold}
.resources button {min-height:38px;padding:3px 9px;border:1px solid #e3fff1aa;border-radius:18px;background:#e5faf2bd;color:#25535b;font-size:12px;font-weight:bold;display:flex;align-items:center;gap:4px}
.resources .heart {color:#cf4575;font-size:20px}.resources small {font-size:9px;font-variant-numeric:tabular-nums}.star-bank {color:#704719;white-space:nowrap}
.goal-line {margin-top:4px;min-height:24px}
#chapter {padding:5px 8px;border-radius:8px;background:#eaf4d8;color:#425f35;font-size:10px}
#chapter[data-mechanic="impulse"] {color:#733e8b;background:#f1dff3}
#chapter[data-mechanic="flowers"] {color:#903757;background:#fce3eb}
#chapter[data-mechanic="mud"] {color:#71482e;background:#efddc3}
#chapter[data-mechanic="currents"] {color:#15596a;background:#dcf6f2}
#chapter[data-mechanic="portals"] {color:#694192;background:#eae0fb}
.actions small {display:inline-flex;align-items:center;justify-content:center;background:#e9dbb7;border-radius:8px;min-width:17px;padding:0 4px;color:#634724;font-size:10px}
#move-budget {font-size:11px;color:#8b705a;margin-right:2px}
#victory {overflow:hidden;padding-top:26px}#victory>*:not(.confetti){position:relative;z-index:1}
.victory-ripple {font-size:49px;line-height:72px;color:#ed698a;animation:celebrate .6s cubic-bezier(.2,.8,.3,1.4) both}
.victory-stars .rating-star {animation:star-pop .6s both}.victory-stars .rating-star:nth-child(2){animation-delay:.18s}.victory-stars .rating-star:nth-child(3){animation-delay:.36s}
.journey-reward {background:#e6efd1;color:#49683b;border-radius:13px;padding:12px;font-size:13px;font-weight:bold;line-height:1.5}
.journey-track {height:8px;background:#e5dbc6;border-radius:5px;overflow:hidden;margin-top:18px}.journey-track div {height:100%;background:#69b59d;border-radius:5px;transition:width .7s}
#journey-text {font-size:11px;margin:8px 0}.confetti {position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i {position:absolute;left:var(--x);top:-20px;width:7px;height:12px;border-radius:2px;background:hsl(var(--h) 70% 65%);animation:confetti-fall 2.8s calc(var(--i)*.07s) both}
.reward-icon,.tutorial-icon {font-size:52px;text-align:center;color:#d55b85;margin-bottom:16px}.tutorial-icon {color:#6c54a1}.demo-note {font-size:11px;color:#7b6856;line-height:1.5}
.skin-list {display:grid;grid-template-columns:1fr 1fr;gap:12px}.skin-choice {display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid #d5c6a7;border-radius:16px;background:#fff9e9;padding:16px 8px;min-height:130px}.skin-preview {display:grid;place-items:center;border:9px solid #ed8bab;border-radius:50%;width:62px;height:48px;color:#8c4765;font-size:26px}.skin-choice small {font-size:10px;color:#76604e}
.pond-shell {width:min(100%,calc((100svh - 406px)*.75))}
#message {min-height:29px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (max-height:720px) and (max-width:480px) {
  .pond-shell {width:min(100%,calc((100svh - 376px)*.75));min-width:198px}
  .top-panel {padding-top:5px;padding-bottom:7px}
  .resources {min-height:40px}
}
@keyframes celebrate {from{transform:scale(.5) rotate(-15deg);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes star-pop {from{transform:scale(0) rotate(-30deg)}to{transform:scale(1)}}
@keyframes confetti-fall {to{transform:translateY(530px) rotate(560deg);opacity:0}}