/* Warm paper, candy glass, and a little garden of colors. */
:root {
  color-scheme: light;
  --bg:#fffaf0; --bg-deep:#f6eddc; --surface:#ffffffdd; --surface-solid:#fffdf7;
  --text:#4d4141; --muted:#80706b; --line:#e9ddca; --tube:#fffaf04d; --tube-line:#b9bca5;
  --accent:#e9898b; --accent-2:#bc636c; --teal:#719c89; --teal-dark:#3d7361;
  --gold:#eab456; --shadow:0 18px 50px #866a4220; --soft-shadow:0 4px 0 #a4927220;
  --focus:#3d7361; --glass-highlight:#ffffffbd; --bubble:#92b6a22b; --cheek:#ffbac5;
}
body { background:radial-gradient(ellipse at 5% 0%,#fce9d3 0,transparent 45%),radial-gradient(ellipse at 95% 50%,#e9f0d7 0,transparent 45%),var(--bg); font-weight:650; }
button { touch-action:manipulation; }
.app { width:min(920px,100%); min-height:100svh; gap:16px; padding-top:max(20px,env(safe-area-inset-top)); grid-template-rows:auto auto auto 1fr auto auto; }
.brand-row { display:flex; align-items:center; justify-content:space-between; padding:0 3px; gap:16px; }
.wordmark { display:flex; align-items:center; gap:8px; color:#b76570; font-size:28px; font-weight:950; letter-spacing:-1.3px; }
.brand-mark { width:38px; height:42px; }
.brand-note { font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); }
.topbar { padding:4px 2px; }
.level-label { gap:8px; }
.level-label strong { font-family:inherit; font-size:30px; font-weight:950; line-height:1.1; }
.level-label span { font-size:10px; letter-spacing:1px; font-weight:850; }
.progress-track { height:6px; background:#e7dfcf; width:190px; }
.progress-fill { background:linear-gradient(90deg,#91af8c,#e5b375); }
.icon-actions { gap:6px; }
.icon-btn { width:43px; height:43px; background:#fffdf4; border:1.5px solid var(--line); box-shadow:0 3px 0 #a492721c; }
.icon-btn svg { width:20px; height:20px; }
.status-card { background:#fffdf7d9; border-radius:21px; border:1px solid #e9ddca; box-shadow:0 5px 0 #b6a08012; }
.stat { padding:11px 8px; }
.stat b { font-family:inherit; font-weight:900; font-size:23px; }
.stat small { font-size:9px; letter-spacing:1.4px; }
.game-shell { border:1px solid #e3dac6; border-radius:34px; background:linear-gradient(#fffdf599,#fffdf5d9),repeating-conic-gradient(#e4ebd3 0% 25%,#f6f4e9 0% 50%) 0 / 44px 44px; min-height:345px; padding:48px 20px 58px; box-shadow:inset 0 0 0 7px #fffdf582,0 8px 0 #b6a08010; }
.game-shell::before { width:64px; height:64px; left:12px; top:13px; border:0; box-shadow:none; background:#e6edda77; border-radius:42% 58% 55% 45%; }
.game-shell::after { width:46px; height:46px; right:14px; bottom:14px; border:0; box-shadow:none; background:#f6d5c577; border-radius:57% 43% 36% 64%; }
.garden-sprig { position:absolute; top:17px; right:21px; width:50px; color:#93ae82; transform:rotate(12deg); opacity:.8; }
.board { gap:42px 26px; align-content:center; max-width:730px; margin:auto; }
.tube-wrap { width:64px; height:166px; --tip:58deg; }
.tube { border:3px solid var(--tube-line); border-top:0; border-radius:9px 9px 26px 26px; box-shadow:inset 6px 0 9px #ffffff55,inset -4px 0 8px #7e685018,0 7px 0 #957c4420; }
.tube::before,.tube::after { background:#b9bca5; height:4px; }
.tube-wrap::before { content:''; position:absolute; top:5px; left:-3px; right:-3px; height:8px; border-radius:8px; background:linear-gradient(#fff,#eef0dc); border:2px solid #b9bca5; z-index:8; box-shadow:0 2px 3px #665e3010; }
.tube-wrap::after { content:''; position:absolute; bottom:-6px; left:12%; right:12%; height:6px; background:#91806320; border-radius:50%; z-index:-1; }
.tube-wrap.selected { filter:drop-shadow(0 6px 8px #d89b6840); }
.tube-wrap.selected::before { border-color:#c97b86; }
.tube-wrap.selected .tube { border-color:#c97b86; }
.liquid { background:linear-gradient(90deg,color-mix(in srgb,var(--c) 75%,white),var(--c) 62%,color-mix(in srgb,var(--c) 93%,#937457)); box-shadow:inset 0 3px 0 #ffffff3a,inset 0 -1px 0 #ffffff25; }
.liquid::before { height:3px; background:#ffffff5c; }
.color-symbol { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:13px; color:#3d3535; text-shadow:0 1px 1px #fff; display:none; }
body.patterns .color-symbol { display:block; }
body.patterns .tube-face { display:none; }
.tube-face { opacity:1; bottom:16px; width:34px; height:21px; filter:drop-shadow(0 1px 0 #ffffff88); }
.tube-face::before,.tube-face::after { width:6px; height:8px; top:2px; background:#493c3e; box-shadow:inset 1px 2px 0 #ffffff99; animation:blink 6s 1.2s infinite; }
.tube-face::before { left:5px; } .tube-face::after { right:5px; }
.tube-face i { width:9px; height:5px; border-color:#493c3e; bottom:3px; }
.tube-face i::before,.tube-face i::after { width:7px; height:4px; bottom:3px; background:#f4a7ad; opacity:.85; }
.tube-face i::before { right:11px; } .tube-face i::after { left:11px; }
.tube-wrap.empty .tube-face { opacity:.5; }
.tube-wrap.empty .tube-face::before,.tube-wrap.empty .tube-face::after { height:2px; top:7px; border-radius:3px; box-shadow:none; }
.tube-wrap.selected .tube-face i { height:6px; width:6px; border:2px solid #493c3e; border-radius:50%; }
.tube-wrap.complete .tube-face { opacity:1; }
.tube-wrap.complete .tube-face::before,.tube-wrap.complete .tube-face::after { background:transparent; border:2px solid #493c3e; border-bottom:0; border-radius:7px 7px 0 0; height:5px; box-shadow:none; }
.bottle-bloom { position:absolute; width:24px; height:24px; top:-22px; left:calc(50% - 12px); color:#78a178; display:none; }
.tube-wrap.complete .bottle-bloom { display:block; animation:pop .4s backwards; }
.tube-index { bottom:-24px; font-size:10px; opacity:.8; width:20px; height:20px; display:grid; place-items:center; border:1px solid #d9cdb1; border-radius:50%; background:#fffdf3; }
@keyframes blink { 0%,44%,48%,100% { transform:scaleY(1); } 46% { transform:scaleY(.15); } }
.board-caption { position:absolute; bottom:13px; left:12px; right:12px; text-align:center; font-size:11px; letter-spacing:.2px; color:#7d856c; }
.tools { gap:10px; padding-top:2px; }
.tool-btn { min-height:48px; border:1px solid #ded4bd; background:#fffdf7; border-radius:17px; padding:0 24px; }
.tool-btn.primary-tool { background:#709580; box-shadow:0 4px 0 #527664; }
.tool-btn:disabled { opacity:.4; }
.footer-note { text-align:center; color:#938371; font-size:10px; letter-spacing:1px; padding:1px 0 6px; }
.scrim { background:#66514455; backdrop-filter:blur(7px); padding:20px; z-index:40; }
.modal { background:#fffaf1; border:1px solid #fff; border-radius:32px; box-shadow:0 24px 60px #4d3e3833,inset 0 0 0 6px #fffdf680; padding:27px; max-height:90svh; }
.modal h2 { font-family:inherit; font-weight:950; font-size:29px; color:#705652; line-height:1.1; }
.modal p { color:#85746a; font-size:14px; }
.welcome-hero { display:flex; justify-content:center; align-items:flex-end; height:152px; margin:0 0 15px; position:relative; }
.welcome-hero svg { width:165px; height:154px; overflow:visible; animation:floaty 3.8s ease-in-out infinite; }
@keyframes floaty { 50% { transform:translateY(-6px) rotate(2deg); } }
.eyebrow { font-size:10px; font-weight:850; letter-spacing:2.5px; text-transform:uppercase; color:#a78672; margin:0 0 10px; }
#welcomeScrim .modal { text-align:center; }
#welcomeScrim .how-list { text-align:left; gap:12px; font-size:13px; margin-top:22px; }
.how-list li { grid-template-columns:27px 1fr; gap:10px; }
.how-list b { width:26px; height:26px; background:#efe6d5; font-size:12px; }
.primary-btn { background:#e8a094; color:#513e3c; box-shadow:0 5px 0 #c9857d; min-height:51px; }
.secondary-btn { background:#f0eadb; border:1px solid #e6dcc6; color:#6a6052; }
.modal-actions { margin-top:20px; gap:9px; }
.stars { margin-top:18px; }
.star.earned { color:#e9b757; }
.level-chip { background:#f2eadb; border-color:#e1d5bc; }
.level-chip.active { background:#789c85; }
.level-chip .mini-star { left:0; right:0; bottom:3px; text-align:center; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; }
.settings-row span { display:grid; gap:4px; }
.settings-row small { font-size:11px; color:var(--muted); }
.settings-row input[type=checkbox] { width:22px; height:22px; accent-color:#709580; }
.settings-row input[type=range] { width:125px; accent-color:#709580; }
.text-action { display:block; margin:16px auto 0; border:0; background:none; color:#547c6b; text-decoration:underline; font-size:12px; cursor:pointer; min-height:32px; }
.confetti { z-index:45; }
.confetti i { width:10px; height:10px; border-radius:50% 50% 20% 50%; }
.toast { z-index:60; background:#66574d; color:#fff9ea; border-radius:15px; font-size:13px; }
body.quiet *,body.quiet *::before,body.quiet *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
body.quiet .pour-stream,body.quiet .pour-drop,body.quiet .combo-pop,body.quiet .confetti { display:none; }
body.has-ads .app { padding-bottom:max(80px,calc(env(safe-area-inset-bottom) + 64px)); }
@media (min-width:700px) { .app { padding:28px 32px; } .brand-row { margin-bottom:3px; } .game-shell { min-height:370px; } .tube-wrap { width:72px; height:195px; } }
@media (max-width:580px) {
  .app { padding-left:16px; padding-right:16px; gap:12px; }
  .wordmark { font-size:25px; } .brand-note { font-size:9px; letter-spacing:1.1px; }
  .level-label strong { font-size:24px; } .level-label span { display:block; width:100%; font-size:8px; }
  .progress-track { width:128px; margin-top:7px; }
  .topbar { gap:6px; } .icon-actions { gap:5px; } .icon-btn { width:38px; height:40px; border-radius:14px; }
  .game-shell { min-height:345px; padding:39px 11px 51px; border-radius:27px; }
  .board { gap:36px 14px; }
  .tube-wrap { width:clamp(44px,12.6vw,60px); height:clamp(126px,35vw,155px); }
  .game-shell.many { min-height:440px; }
  .tools { grid-template-columns:repeat(3,minmax(0,1fr)); } .tool-btn { padding:0 6px; font-size:12px; gap:5px; }
  .tool-btn span { display:inline; } .tool-btn svg { width:18px; }
  .stat b { font-size:20px; } .stat small { font-size:8px; }
  .board-caption { font-size:10px; }
}
@media(max-height:710px) and (max-width:580px) { .app { gap:9px; } .game-shell { min-height:280px; } .game-shell.many { min-height:385px; } .welcome-hero { height:115px; } .welcome-hero svg { height:118px; width:127px; } .modal { padding:22px; } }
@media (min-width:360px) and (max-width:580px) {
  .game-shell.many .board { column-gap:8px; }
  .game-shell.many .tube-wrap { width:calc((100% - 40px)/6); min-width:44px; max-width:58px; height:140px; }
}
.tube-face::before,.tube-face::after { animation-delay:var(--face-delay,1.2s); }

.audio-start {border:1px solid #d8c8ad;background:#fffdf3;color:#547762;border-radius:20px;min-height:40px;padding:0 14px;font-weight:850;font-size:12px;cursor:pointer;flex:none;}
.audio-start.ready {background:#eaf0df;}
.sound-test {width:100%;margin-top:20px;cursor:pointer;}
.modal .sound-status {font-size:12px;line-height:1.4;margin:8px 0 0;min-height:32px;color:#527261;}
@media(max-width:370px){.audio-start{font-size:11px;padding:0 10px;}.brand-row{gap:10px;}}