:root { --yellow:#ffc907; --blue:#2ea3dd; --ink:#1d242d; --cream:#fffdf7; --sand:#f4f0e6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--cream); color:var(--ink); font-family:'Nunito Sans','Avenir Next',Avenir,Arial,sans-serif; }
.site-header { height:66px; padding:0 clamp(20px,5vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e9e5da; background:#fff; }
.brand { display:flex; align-items:center; text-decoration:none; }.brand img { display:block; width:300px; height:auto; }.game-tag { font-size:10px; letter-spacing:2px; font-weight:800; color:#68727a; }
main { width:min(100%, 960px); margin:0 auto; padding:36px 20px 30px; }.intro { max-width:650px; text-align:center; margin:0 auto 25px; }.eyebrow { margin:0 0 9px; color:#69777f; font-size:10px; font-weight:800; letter-spacing:1.5px; }.intro h1 { font:900 clamp(34px,5vw,58px)/.98 'Nunito Sans','Avenir Next',Arial,sans-serif; letter-spacing:-2.8px; margin:0; }.intro em { color:var(--blue); font-style:normal; }.instructions { margin:15px auto 0; max-width:500px; font-size:13px; line-height:1.6; color:#59636b; }
.level-panel { display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:800px; margin:0 auto 10px; }.level-copy { display:grid; gap:3px; }.level-copy span { font-size:9px; color:#68747b; letter-spacing:1px; font-weight:800; }.level-copy strong { font-size:13px; }.difficulty-buttons { display:flex; background:#eeeae0; border-radius:99px; padding:3px; gap:2px; }.difficulty { appearance:none; border:0; background:transparent; color:#657078; padding:8px 13px; border-radius:99px; font:700 11px 'Nunito Sans',sans-serif; cursor:pointer; }.difficulty.active { background:white; color:var(--ink); box-shadow:0 1px 5px #0002; }
#game-container { position:relative; width:100%; max-width:800px; margin:auto; background:#dff3fa; overflow:hidden; border-radius:14px; box-shadow:0 15px 40px #11253825; } canvas { display:block; width:100%; height:auto; cursor:crosshair; touch-action:none; }
#hud { position:absolute; inset:14px 14px auto; display:grid; grid-template-columns:auto auto minmax(90px,1fr) auto auto; gap:10px; align-items:center; pointer-events:none; }.water-readout,.score-readout { display:grid; padding:7px 10px; background:#fffffff0; border-radius:7px; box-shadow:0 2px 10px #24546520; }.water-readout span,.score-readout span { font-size:8px; letter-spacing:1px; color:#68747b; font-weight:800; }.water-readout strong,.score-readout strong { font-size:15px; }.score-readout small { font-size:8px; color:#68747b; font-weight:700; white-space:nowrap; }.progress-track { height:7px; background:#ffffff99; border-radius:10px; position:relative; overflow:visible; }.progress-track div { height:100%; width:0; border-radius:10px; background:var(--blue); transition:width .25s; }.milestone-dot { position:absolute; top:50%; width:10px; height:10px; transform:translate(-50%,-50%); border-radius:50%; border:2px solid white; background:#aac9d3; }.first{left:25%}.second{left:50%}.third{left:75%}.milestone-dot.reached { background:var(--yellow); }
.icon-btn { pointer-events:auto; appearance:none; border:0; width:34px; height:34px; color:var(--ink); background:#fffffff0; border-radius:50%; cursor:pointer; font:700 20px Arial; box-shadow:0 2px 10px #24546520; }.icon-btn.muted { color:#a0a8aa; }
#milestone { position:absolute; top:69px; left:50%; transform:translateX(-50%) translateY(-10px); border-radius:99px; padding:7px 12px; color:#fff; background:var(--ink); font-size:10px; font-weight:800; letter-spacing:.3px; opacity:0; transition:.25s; pointer-events:none; white-space:nowrap; }#milestone.show { opacity:1; transform:translateX(-50%) translateY(0); }
#win-screen { display:none; position:absolute; inset:0; align-items:center; justify-content:center; padding:20px; background:#153748b8; }.win-card { width:min(380px,100%); padding:30px 25px; text-align:center; background:#fffdf7; border-radius:13px; box-shadow:0 15px 40px #0004; }.sun { display:inline-flex; width:44px; height:44px; justify-content:center; align-items:center; border-radius:50%; background:var(--yellow); font-size:26px; }.win-card h2 { font:900 40px/.95 'Nunito Sans','Avenir Next',Arial,sans-serif; letter-spacing:-2px; margin:10px 0; }.win-card > p:last-of-type { color:#5e686e; font-size:13px; }.win-actions { display:flex; justify-content:center; gap:8px; margin-top:21px; }button:not(.difficulty):not(.icon-btn) { border:0; cursor:pointer; border-radius:5px; padding:11px 14px; background:var(--yellow); color:var(--ink); font:800 11px 'Nunito Sans',sans-serif; }.secondary { background:#e9e5da!important; }
footer { border-top:1px solid #e9e5da; background:#fff; padding:23px 20px calc(23px + env(safe-area-inset-bottom)); text-align:center; color:#667178; font-size:11px; }footer p { margin:0 0 13px; }footer a { color:var(--ink); font-weight:700; text-decoration:none; }footer nav { display:flex; gap:18px; justify-content:center; }
@media (max-width:600px) { .site-header{height:56px;padding:0 16px}.brand img{width:215px} main{padding:25px 0 22px}.intro{padding:0 20px;margin-bottom:22px}.intro h1{font-size:36px}.instructions{font-size:12px;margin-top:13px}.level-panel{padding:0 16px;margin-bottom:9px;align-items:end}.level-copy strong{font-size:11px}.difficulty-buttons{gap:0}.difficulty{padding:8px 7px;font-size:9px}#game-container{border-radius:0;box-shadow:none}#hud{inset:9px 9px auto;grid-template-columns:auto auto 1fr auto auto;gap:4px}.water-readout,.score-readout{padding:5px 6px}.water-readout strong,.score-readout strong{font-size:11px}.water-readout span,.score-readout span,.score-readout small{font-size:6px}.icon-btn{width:28px;height:28px;font-size:16px}.progress-track{height:6px}#milestone{top:51px;font-size:9px;padding:6px 9px}.win-card{padding:22px 18px}.win-card h2{font-size:34px} footer{font-size:10px} }