@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#edf2e9;background:#061d20}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 42%,#123336 0,#061d20 65%)}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #d3e4d817}.brand{font-family:'Playfair Display',Georgia,serif;font-size:23px;letter-spacing:-.5px}.brand-star{color:#eac685;margin-left:17px;font-size:29px}.header-note,.eyebrow,footer span:last-child{font-size:12px;letter-spacing:2.3px;color:#adc0b9}main{position:relative;max-width:1440px;margin:auto;text-align:center}.intro{position:relative;z-index:2;padding-top:38px;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:2.5px;color:#d3bb86;margin:0 20px 15px}h1{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(48px,5.4vw,78px);letter-spacing:-2px;margin:0 0 15px;line-height:1.13}.intro>p:last-child{color:#bdcdc6;font-size:16px;line-height:1.7;margin:0}.scene{position:relative;width:min(920px,100%);height:420px;margin:-20px auto -44px;overflow:hidden;isolation:isolate}.scene img{width:100%;height:100%;object-fit:cover;object-position:center 55%;mask-image:linear-gradient(to bottom,transparent 0%,black 16%,black 76%,transparent 100%);opacity:.93}.scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#061d20,transparent 22%,transparent 78%,#061d20);opacity:.8}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.scene-caption{position:absolute;left:1%;top:48%;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:16px;color:#b4c8bc;writing-mode:vertical-rl;transform:rotate(180deg);z-index:3}.action{position:relative;z-index:3;padding:0 20px 28px}#message{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:#d2ddd3;font-size:18px;min-height:25px;margin:0 0 18px}button{border:1px solid #ffdf9f;background:linear-gradient(120deg,#f2d89f,#dcb265);color:#173033;min-height:62px;padding:17px 35px;border-radius:50px;box-shadow:0 7px 32px #d1ab5820;font:600 16px 'DM Sans',sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s}button>span:first-child{font-size:23px;vertical-align:-2px;margin-right:10px}button:hover{transform:translateY(-3px);box-shadow:0 8px 45px #e2ba6845}button:active{transform:translateY(0) scale(.97)}button:focus-visible{outline:2px solid #fff;outline-offset:6px}button:disabled{cursor:wait;opacity:.8}.hint{font-size:12px;color:#94ada5;margin:17px 0 0}footer{margin:0 5vw;padding:23px 0;border-top:1px solid #d3e4d817;display:flex;justify-content:space-between;gap:20px;color:#8fa9a1;font-size:13px}footer span:first-child{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px}footer span:last-child{font-size:10px}@media(min-height:950px){.intro{padding-top:60px}.scene{height:500px}.action{padding-bottom:48px}}@media(max-width:600px){header{height:76px;padding:0 24px}.header-note{display:none}.brand{font-size:21px}.intro{padding-top:38px}.eyebrow{font-size:10px;letter-spacing:1.8px;max-width:260px;margin:0 auto 19px;line-height:1.8}h1{font-size:49px;letter-spacing:-1.5px}.intro>p:last-child{font-size:15px}.scene{height:350px;margin:-10px auto -26px}.scene img{width:145%;max-width:none;transform:translateX(-15.5%)}.scene-caption{display:none}footer{justify-content:center;padding:20px 0}footer span:last-child{display:none}.action{padding-bottom:28px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

.support{max-width:380px;margin:28px auto 0;padding:24px 12px 0;border-top:1px solid #d3e4d825;animation:reveal .6s ease both}.support[hidden],.support-link[hidden]{display:none}.support>p:first-child{font-family:'Playfair Display',Georgia,serif;font-size:19px;margin:0 0 9px}.support-copy{font-size:14px;color:#bdcdc6;line-height:1.6;margin:0 0 14px}.support-link{display:inline-flex;align-items:center;gap:13px;min-height:44px;color:#eac685;font-size:14px;text-underline-offset:5px;text-decoration-thickness:1px}.support-link:hover{color:#ffe6b8}.support-link:focus-visible{outline:2px solid #eac685;outline-offset:5px;border-radius:3px}.support-note{font-size:12px;color:#94ada5;line-height:1.6;margin:12px 0 0}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.support{animation:none}}

:root{--sky:#061d20;--glow:#123336;--ink:#edf2e9;--muted:#bdcdc6;--accent:#d3bb86;--line:#d3e4d825;--quiet:#94ada5;background:var(--sky);color:var(--ink);transition:background-color 1.5s,color 1.5s}
:root[data-ambience="day"]{color-scheme:light;--sky:#e6f1ee;--glow:#fbfff7;--ink:#173d38;--muted:#405e55;--accent:#756029;--line:#173d382b;--quiet:#4e6b60}
:root[data-ambience="evening"]{--sky:#33251f;--glow:#654536;--ink:#fff1df;--muted:#e0c7ac;--accent:#edc58a;--line:#edc58a30;--quiet:#ceb497}
body{background:radial-gradient(ellipse at 50% 42%,var(--glow) 0,var(--sky) 65%)}.scene:after{background:linear-gradient(90deg,var(--sky),transparent 22%,transparent 78%,var(--sky))}.scene img{position:absolute;inset:0;transition:opacity 1.5s ease}.intro>p:last-child,.header-note,.scene-caption,#message,.support-copy{color:var(--muted)}.eyebrow,.brand-star,.support-link{color:var(--accent)}.hint,footer,.support-note,footer span:last-child{color:var(--quiet)}header,footer,.support{border-color:var(--line)}:root[data-ambience="day"] button:focus-visible{outline-color:#173d38}:root[data-ambience="day"] .support-link:hover{color:#5a441a}@media(prefers-reduced-motion:reduce){:root,.scene img{transition:none}}

.ritual-steps{list-style:none;display:flex;justify-content:center;gap:28px;margin:0 0 20px;padding:0;font-size:14px;color:var(--quiet)}.ritual-steps li{padding-bottom:7px;border-bottom:1px solid transparent}.ritual-steps .active{color:var(--accent);border-color:currentColor}.ritual-steps .done{color:var(--muted)}.ritual-hint{font-size:14px;color:var(--muted);line-height:1.6;max-width:380px;margin:16px auto 4px;min-height:45px}.sound-toggle{min-height:44px;border:0;border-radius:6px;background:none;box-shadow:none;color:var(--quiet);font-size:13px;font-weight:400;padding:8px 16px}.sound-toggle:hover{transform:none;box-shadow:none;color:var(--ink)}.sound-toggle:active{transform:none}.action>.hint{margin-top:4px}#throw:disabled{cursor:default} .action{padding-top:12px}

/* Full 16:9 frame: the fountain must never be cropped. */
.scene{width:min(100%,1040px);height:auto;aspect-ratio:16/9;margin:24px auto 12px;border-radius:16px}.scene img,.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;mask-image:none;opacity:1}.scene video{transition:opacity .65s ease;pointer-events:none}.scene:after{display:none}.scene-caption{left:16px;top:auto;bottom:16px;writing-mode:horizontal-tb;transform:none;color:#fff;text-shadow:0 1px 5px #000;background:#061d2066;padding:6px 10px;border-radius:20px;font-size:14px}.intro{padding-top:28px}.action{padding-top:10px}#aim{position:absolute;inset:0;z-index:3;pointer-events:none}#aim.enabled{pointer-events:auto;cursor:crosshair}#aim:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:16px}#aim-marker{position:absolute;width:34px;height:16px;border:2px solid #fff3b3;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #063b3b55,0 0 18px #fff4ad88;pointer-events:none}#aim-marker:after{content:'';position:absolute;inset:4px 13px;border-radius:50%;background:#fff3b3}#aim-marker[hidden]{display:none}@media(max-width:600px){.scene{border-radius:0;margin:20px auto 12px}.scene img{width:100%;transform:none}.scene-caption{display:none}.intro{padding-top:24px}#aim-marker{width:28px;height:14px}.ritual-steps{gap:22px}}@media(prefers-reduced-motion:reduce){.scene video{transition:none}}
/* Keep support quiet and below the completed ritual. */
.support{max-width:430px;padding:25px 20px;margin-top:24px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--sky) 80%,var(--glow))}.support h2{font:400 27px 'Playfair Display',Georgia,serif;margin:0 0 10px}.amounts,.payment-methods{display:flex;gap:8px;margin:18px 0 12px}.amounts button{flex:1;min-height:44px;border-radius:10px;padding:10px 8px;font-size:14px;background:none;color:var(--ink);border:1px solid var(--line);box-shadow:none;white-space:nowrap}.amounts button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}.payment-methods button{flex:1;min-height:46px;padding:12px;border-radius:12px;font-size:14px;box-shadow:none}.payment-methods #pay-paypal{background:transparent;border:1px solid var(--accent);color:var(--ink)}.payment-status{font-size:13px;line-height:1.5;color:var(--muted)}.text-button{background:none;border:0;box-shadow:none;color:var(--muted);font-size:14px;font-weight:400;min-height:44px;padding:10px 16px;text-decoration:underline;text-underline-offset:4px}.text-button:hover{box-shadow:none;color:var(--ink);transform:none}.completion-actions{margin-top:12px}.completion-actions[hidden]{display:none}#share-status{font-size:13px;color:var(--muted);margin:0}.about{max-width:760px;padding:65px 24px 55px;margin:auto;text-align:left}.about>.eyebrow{margin:0 0 14px;font-size:12px;line-height:1.5}.about h2{font:400 clamp(28px,4vw,38px) 'Playfair Display',Georgia,serif;margin:0 0 18px}.about p{font-size:16px;line-height:1.75;color:var(--muted)}.faq{margin-top:30px}.faq details{border-top:1px solid var(--line);padding:18px 0}.faq summary{font-size:16px;line-height:1.5;cursor:pointer;padding-right:12px}.faq details p{margin-bottom:0}.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}#throw{touch-action:none;user-select:none}#throw.dragging{transform:translateY(-12px) scale(.97);box-shadow:0 15px 40px #e2ba6845}.intro h1{font-size:clamp(39px,5vw,65px)}header{height:76px}.intro{padding-top:22px}.intro .eyebrow{font-size:11px}.scene{width:min(100%,900px);margin:16px auto 8px}.action{padding-bottom:12px}.ritual-steps{margin-bottom:10px}#message{margin-bottom:12px}.ritual-hint{margin-top:10px}.support-note{font-size:13px}@media(max-width:600px){header{height:62px}.intro h1{font-size:36px;letter-spacing:-1px}.intro{padding-top:20px}.intro .eyebrow{display:none}.scene{margin:16px auto 8px}.action{padding-left:18px;padding-right:18px}.support{padding:22px 14px}.amounts{gap:6px}.about{padding-top:44px}#throw{min-height:54px}.ritual-steps{font-size:13px}.ritual-hint{font-size:13px;min-height:42px}}

/* Keep controls usable at narrow widths and with enlarged text. */
#throw{max-width:100%;white-space:normal}
.amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.amounts button,.payment-methods button{min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(min-width:400px){.amounts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){
 .intro{padding:16px 14px 0}.intro h1{font-size:clamp(1.875rem,8.8vw,2.25rem)}
 .intro>p:last-child{font-size:1rem;line-height:1.5}
 .ritual-steps,.ritual-hint,.sound-toggle{font-size:.875rem}
 .ritual-hint{min-height:0}.scene{margin-top:12px}
}
@media(max-width:600px) and (max-height:700px){
 header{height:50px}.intro{padding-top:12px}.intro h1{margin-bottom:8px}
 .scene{margin-top:10px;margin-bottom:4px}.action{padding-top:4px}
 .ritual-steps{margin-bottom:6px}#message{margin-bottom:8px}
 #throw{padding:10px 24px}.ritual-hint{margin-top:8px}
}
.languages{display:flex;gap:4px;margin-left:18px}.languages a{display:grid;place-items:center;min-width:44px;min-height:44px;color:var(--muted);font-size:14px;text-decoration:none;border-radius:8px}.languages a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px var(--accent)}.languages a:focus-visible{outline:2px solid var(--accent)}.header-note{margin-left:auto}.privacy{max-width:760px;margin:0 auto 32px;padding:0 24px;text-align:left;font-size:14px;color:var(--muted);line-height:1.7}.privacy summary{cursor:pointer;min-height:44px}.privacy-controls{display:flex;gap:10px;flex-wrap:wrap}.privacy button{font-size:14px;min-height:44px;padding:10px 16px;border-radius:10px;background:none;color:var(--ink);border-color:var(--line);box-shadow:none}.privacy button[aria-pressed=true]{border-color:var(--accent)}.privacy button:hover{transform:none}.sound-toggle{color:var(--muted)}
@media(max-width:600px){header{padding:0 16px}.brand-star{margin-left:8px}.languages{margin-left:auto}.intro h1{font-size:clamp(1.75rem,8.1vw,2.25rem)}.ritual-hint{min-height:44px}.about{padding-top:38px}}
@media(prefers-reduced-motion:reduce){#throw.dragging,button:hover,button:active{transform:none}}

#scene-coin{position:absolute;z-index:4;left:50%;bottom:2%;transform:translateX(-50%);width:54px;height:54px;min-height:54px;padding:0;display:grid;place-items:center;background:#173033d9;border:1px solid #f2d89f;box-shadow:0 3px 16px #0006;touch-action:none;user-select:none;cursor:grab}
#scene-coin[hidden]{display:none}#scene-coin>span{margin:0;font-size:36px;line-height:1}#scene-coin:hover{transform:translateX(-50%) scale(1.08)}#scene-coin.dragging{transform:translate(-50%,-12px);cursor:grabbing}#water{z-index:5}
@media(prefers-reduced-motion:reduce){#scene-coin:hover,#scene-coin.dragging{transform:translateX(-50%)}}

/* Supplied coin faces, shared by the picker and throwing controls. */
.coin-face{display:inline-block;width:36px;height:36px;background-image:url('/media/coin-gold.png');background-size:200% 100%;background-position:left center;background-repeat:no-repeat;vertical-align:middle;flex-shrink:0}
.coin-face.silver{background-image:url('/media/coin-silver.png')}
.coin-picker{display:flex;justify-content:center;gap:10px;margin:0 auto 14px}
.coin-picker button{display:flex;align-items:center;gap:8px;padding:6px 14px;min-height:48px;border-radius:12px;background:transparent;color:var(--ink);border:1px solid var(--line);font-size:14px;box-shadow:none}
.coin-picker button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
#scene-coin>span.coin-face{width:48px;height:48px;margin:0}
#scene-coin{background:transparent;border:0;box-shadow:none}
#throw>.coin-face{width:28px;height:28px;margin-right:5px}

/* Slightly larger secondary text; keep the existing typography and palette. */
.header-note,.eyebrow,.intro .eyebrow,.about>.eyebrow,footer span:last-child{font-size:13px}
.hint,.support-note,.payment-status,#share-status,.sound-toggle{font-size:14px;line-height:1.6}
.ritual-steps,.ritual-hint{font-size:15px}
#throw{display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.25}
#throw>.coin-face{margin:0;vertical-align:initial}
#button-label{display:block}

.action>.hint{font-weight:600}

/* Reflection glow, held until the coin reaches the water. */
#throw.wish-magic{background:linear-gradient(120deg,#359c78,#20775f);border-color:#b0f3cc;color:#ffffff;opacity:1;box-shadow:0 0 20px #76d8b52e}
#throw.wish-thinking{animation:wish-breathe 2s ease-in-out infinite}
@keyframes wish-breathe{0%,100%{background-color:#174d42;box-shadow:0 0 12px #76d8b526;filter:brightness(1)}50%{box-shadow:0 0 28px #76d8b566;filter:brightness(1.2)}}
@media(prefers-reduced-motion:reduce){#throw.wish-thinking{animation:none}}

.action>.hint{font-size:16px;font-weight:600}
#scene+#sound{display:block;margin:0 auto 8px;text-decoration:underline;text-underline-offset:4px}

/* Make the landing target unmistakable when reflection ends. */
#aim-marker{width:44px;height:24px;border:3px solid #8bffd0;background:#123d3299;box-shadow:0 0 0 5px #174e3b99,0 0 22px #66ffc6b3}
#aim-marker:after{inset:50% auto auto 50%;width:6px;height:6px;transform:translate(-50%,-50%);background:#c3ffe5;box-shadow:0 0 8px #8bffd0}
#aim.enabled #aim-marker{animation:target-appear 1.1s ease-in-out 3}
@keyframes target-appear{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 0 8px #246d5080,0 0 30px #66ffc6dd}}
@media(prefers-reduced-motion:reduce){#aim.enabled #aim-marker{animation:none}}

/* Keep touch aiming in the fountain from turning into page scrolling. */
#aim.enabled{touch-action:none;user-select:none}