/* A tactile, self-contained play space within the shared Salam Games shell. */
.letter-garden{width:min(1040px,100%);margin:0 auto;padding:16px 20px 30px;color:#173653}
.letter-garden [hidden]{display:none!important}
.letter-garden button,.letter-garden select{font:inherit;font-weight:900;color:#173653;border:2px solid #c5dce5;border-radius:16px;background:#fff;min-height:46px;padding:10px 16px;cursor:pointer;touch-action:manipulation}
.letter-garden button{box-shadow:0 3px 0 #c5dce5;transition:background .15s,box-shadow .15s}
.letter-garden button:hover:not(:disabled){background:#f0fdfa;border-color:#0f766e}
.letter-garden button:active:not(:disabled){box-shadow:none}
.letter-garden button:disabled{cursor:default}
.letter-garden :focus-visible{outline:4px solid #6d28d9;outline-offset:4px}
.letter-garden h2[tabindex="-1"]:focus{outline:none}
.letter-garden .garden-primary{background:#6d28d9;border-color:#5b21b6;box-shadow:0 5px 0 #4c1d95;color:#fff;padding:14px 25px;font-size:19px;border-radius:20px}
.letter-garden .garden-primary:hover:not(:disabled){background:#5b21b6;border-color:#4c1d95}
.letter-garden .garden-primary:disabled{background:#64748b;border-color:#475569;box-shadow:0 4px 0 #334155}
.garden-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 13px}
.garden-kicker{margin:0 0 3px;font-size:12px;font-weight:900;color:#42637a;letter-spacing:.04em}
.garden-heading h1{margin:0;font-size:clamp(24px,4vw,33px);font-weight:1000;line-height:1.15}
.garden-age{font-size:13px;font-weight:900;background:#fff9;border-radius:30px;padding:10px 15px}
.garden-stage{position:relative;isolation:isolate;height:570px;border:4px solid #fff;border-radius:32px;background:#d6f5ff;overflow:hidden;box-shadow:0 7px 0 #86c8d9,0 16px 35px #174f6f13}
.garden-scenery{position:absolute;inset:0;z-index:-1;background:#cbf0fa url('/assets/scenes/letter-garden-1280.webp') center bottom/cover no-repeat}
.garden-welcome{position:absolute;inset:0;text-align:center;padding:26px 20px 0;background:linear-gradient(#e4f8ff22,#e9fbff77 53%,transparent 78%);z-index:4}
.welcome-letters{display:flex;justify-content:center;align-items:center;gap:22px;height:100px;margin-bottom:10px}
.welcome-letters span{display:grid;place-items:center;border-radius:50%;width:78px;height:78px;background:radial-gradient(circle at 28% 22%,#fff 2%,#fff9 18%,#e7d6ff 65%);border:3px solid #fff;box-shadow:inset -4px -5px 0 #bca5dc38,0 5px 0 #687fb333;font-size:58px;color:#49306c;font-weight:700;line-height:1.4;animation:lg-float 3.5s ease-in-out infinite}
.welcome-letters span:nth-child(2){width:98px;height:98px;background:radial-gradient(circle at 28% 22%,#fff 2%,#fff9 18%,#b0f0e5 65%);color:#126b63;animation-delay:-1s}
.welcome-letters span:nth-child(3){background:radial-gradient(circle at 28% 22%,#fff 2%,#fff9 18%,#ffe6a6 65%);color:#785019;animation-delay:-2s}
.garden-welcome h2{font-size:clamp(30px,5vw,44px);line-height:1.05;font-weight:1000;color:#164e63;margin:14px 0 9px;letter-spacing:-1px}
.garden-welcome>p{margin:0 auto 17px;font-weight:800;max-width:380px;line-height:1.4}
.garden-modes{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
.garden-modes button{display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:15px;min-width:200px;padding:10px 16px;background:#ffffffed;border:2px solid #bbd7dd;border-radius:20px}
.garden-modes button>span{font-size:25px}.garden-modes button small{font-size:11px;font-weight:800;margin-top:2px}
.garden-modes button[aria-pressed=true]{border-color:#6d28d9;background:#f5f0ff;box-shadow:0 4px 0 #8b5bc1}
.garden-welcome .garden-font-status{font-size:12px;margin:12px 0 0;color:#345566;min-height:18px}
.welcome-steps{display:flex;justify-content:center;gap:20px;font-weight:1000;margin-top:17px;font-size:17px}
.garden-hud{position:absolute;top:18px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:2}
.garden-target{display:flex;align-items:center;gap:15px;border:3px solid #fff;border-radius:24px;background:#ffffffed;padding:0 22px 0 4px;box-shadow:0 4px 0 #7cb4c54d}
#gardenTarget{display:grid;place-items:center;width:80px;min-height:88px;font-size:67px;line-height:1.35;font-weight:700;background:#f3ecff;border-radius:21px;color:#4c1d95}
#gardenInstruction{font-size:13px;font-weight:900;color:#466471}#gardenName{margin:0;font-size:24px;line-height:1.2;font-weight:1000}
.garden-drops{display:flex;align-items:center;gap:5px;background:#fff;border-radius:40px;padding:10px 12px;box-shadow:0 4px 0 #7cb4c54d}
.garden-drop{display:inline-block;width:24px;height:30px;clip-path:path('M12 0C10 6 0 13 0 19A12 11 0 0 0 24 19C24 13 14 6 12 0Z');background:#dbe8ed}
.garden-drop.filled{background:#0284c7}
.garden-bubble-area{position:absolute;top:27%;left:4%;right:4%;height:40%;display:flex;align-items:center;justify-content:center;gap:clamp(14px,5vw,65px)}
.letter-garden .garden-bubble{position:relative;flex:0 0 auto;width:150px;height:150px;padding:0;border:4px solid #fff;border-radius:50%;box-shadow:inset -8px -8px 0 #809ccc20,0 6px 0 #4e88a32b,0 12px 18px #32799216;background:radial-gradient(circle at 29% 20%,#fff 0 5%,#ffffffad 13%,var(--bubble,#c8f5ed) 62%,#d7edff 100%);color:#163951;overflow:visible}
.garden-bubble:before{content:'';position:absolute;top:13%;left:15%;width:20%;height:10%;border-radius:50%;background:#fff8;transform:rotate(-35deg)}
.garden-bubble>span[lang=ar]{display:grid;place-items:center;position:absolute;inset:0;font-size:90px;line-height:1.4;font-weight:700;pointer-events:none;padding-bottom:5px}
.garden-bubble .bubble-number{position:absolute;bottom:-14px;left:calc(50% - 12px);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:#446675;font-size:11px;border:1px solid #c5dce5}
.letter-garden .garden-bubble:hover:not(:disabled){background:radial-gradient(circle at 29% 20%,#fff,var(--bubble,#c8f5ed) 70%);border-color:#fff;box-shadow:inset -8px -8px 0 #809ccc20,0 0 0 4px #0e7490}
.garden-bubble.is-help{outline:5px dashed #6d28d9;outline-offset:6px}
.garden-bubble.is-pop{animation:lg-pop .55s ease-out both}.garden-bubble.is-different{animation:lg-wiggle .4s ease-in-out}
.garden-bubble.is-help:after{content:'☝';position:absolute;right:-10px;bottom:-5px;display:grid;place-items:center;width:45px;height:45px;background:#fff;border:2px solid #6d28d9;border-radius:50%;font-size:27px;color:#4c1d95}
.garden-pots{position:absolute;bottom:6px;left:12%;right:12%;height:175px;display:flex;justify-content:space-around;gap:15px;z-index:2;pointer-events:none}
.letter-garden .garden-pot{position:relative;width:150px;height:175px;min-width:0;border:0;background:none!important;box-shadow:none!important;padding:0;pointer-events:auto;cursor:default}
.garden-pot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.garden-pot:disabled{opacity:1}
.garden-pot .pot-letter{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:37px;font-weight:700;color:#7a3d29;line-height:1.35}
.garden-pot .plant-stem{transform:scaleY(var(--grow,0));transform-origin:80px 142px;transition:transform .55s ease-out}
.garden-pot .flower-head{transform:translate(80px,55px) scale(var(--bloom,0));transition:transform .6s cubic-bezier(.2,1.5,.45,1)}
.garden-pot.is-current .soil{fill:#855732}.garden-pot.is-current:after{content:'';position:absolute;bottom:4px;left:30%;right:30%;height:5px;border-radius:50%;background:#fff}
.garden-pot.grown{cursor:pointer}.garden-pot.grown:hover .flower-head{filter:brightness(1.1)}
.garden-stage .garden-pot svg{top:-20px}
.garden-stage .garden-pot .pot-letter{left:calc(50% - 26px);right:auto;bottom:0;width:52px;height:52px;display:grid;place-items:center;background:#fff8e6;border:2px solid #fff;border-radius:15px;box-shadow:0 3px 0 #856b3933;font-size:34px;line-height:1.4;color:#5b3b30}
.garden-stage[data-phase=welcome] .pot-letter{display:none}
.garden-stage[data-phase=welcome] .garden-pots{display:none}
.garden-stage .garden-pot .pot-letter{font-size:30px;padding-bottom:7px}
.garden-water-play{position:absolute;top:22%;left:20%;right:20%;text-align:center;z-index:3}
.garden-water-play>p{font-size:21px;font-weight:1000;margin:6px 0;color:#164e63}
.letter-garden .garden-can{position:relative;display:inline-flex;align-items:center;flex-direction:column;width:164px;height:152px;min-height:0;padding:0 5px 8px;border:3px solid #fff;background:#eaffffed;border-radius:28px;box-shadow:0 5px 0 #74afb9;font-size:15px}
.garden-can svg{width:125px;height:102px;flex-shrink:0}.garden-can.splashing svg{animation:lg-pour .4s ease-out}
.water-meter{display:flex;justify-content:center;gap:8px;margin-top:11px}.water-meter i{width:14px;height:14px;border:2px solid #0f766e;border-radius:50%;background:#fff}.water-meter i.filled{background:#0f766e}
.garden-message{position:absolute;top:65%;left:10px;right:10px;text-align:center;font-size:16px;font-weight:1000;margin:0;z-index:3;pointer-events:none;color:#174e57;text-shadow:0 1px #fff}
.garden-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.garden-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size,12px);height:var(--size,12px);border-radius:50%;background:var(--colour,#fff);animation:lg-burst .85s ease-out both;box-shadow:0 1px 2px #174e5722}
.garden-particle.drop{width:9px;height:16px;border-radius:50% 50% 50% 8%;background:#38bdf8;animation:lg-rain .65s ease-in both}
.garden-toolbar{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:18px 0 0}.garden-toolbar button{font-size:13px;min-width:100px;padding:8px 12px}
.garden-toolbar button:disabled{opacity:.58}.garden-toolbar button[aria-pressed=true]{background:#ddfbf2;border-color:#0f766e}
.garden-voice-status{font-size:12px;text-align:center;color:#42637a;min-height:18px;margin:8px 0 16px;line-height:1.5}
.garden-pause{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:#dbf6f0ee;padding:20px;text-align:center}
.garden-pause>div{max-width:340px;display:grid;gap:15px}.garden-pause h2{margin:0;font-size:30px;line-height:1.2}.garden-pause p{margin:0}.garden-pause>div>span{font-size:62px}
.garden-stage[data-phase=paused] *{animation-play-state:paused!important}.garden-stage[data-phase=paused] .garden-effects{display:none}
.garden-finish{position:absolute;top:8%;left:8%;right:8%;text-align:center;z-index:3}
.finish-tag{display:inline-block;background:#fff8d3;border:2px solid #fff;padding:8px 16px;border-radius:30px;font-size:15px;font-weight:1000;color:#714616}
.garden-finish h2{max-width:540px;margin:15px auto 8px;font-size:clamp(25px,4vw,35px);line-height:1.15;font-weight:1000;color:#164e63}.garden-finish>p{font-weight:800;margin:8px 0 18px}.finish-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.garden-finish .garden-save-status{font-size:12px;margin:16px 0;color:#36515f}
.party-bubbles{position:absolute;inset:0;z-index:9;pointer-events:none}.letter-garden .party-bubble{position:absolute;left:var(--x);top:var(--y);pointer-events:auto;width:62px;height:62px;border-radius:50%;border:3px solid #fff;min-height:0;padding:0;background:radial-gradient(circle at 25% 25%,#fff9 0 10%,#a6edf1aa 50%,#f1c6ffaa);box-shadow:inset -4px -3px #8dd3e56b,0 3px #7eb6c666}.party-bubble.is-pop{pointer-events:none;animation:lg-pop .35s both}
.garden-below{display:grid;grid-template-columns:1fr 1.65fr;gap:16px;margin-top:5px}.garden-options,.garden-collection,.garden-grownups{border:2px solid #fff;background:#ffffffdf;border-radius:24px;padding:22px;box-shadow:0 4px 0 #a9d9e6}
.garden-below h2{font-size:19px;margin:0 0 15px;font-weight:1000}.garden-colours{display:flex;gap:7px;margin-bottom:21px}.garden-colours button{flex:1;min-width:0;font-size:11px;padding:8px 5px;border-radius:14px}.colour-dot{display:block;width:23px;height:23px;margin:0 auto 6px;border-radius:50%;box-shadow:inset -3px -3px #0001}.coral{background:#fb7185}.violet{background:#a78bfa}.gold{background:#fbbf24}.garden-colours button[aria-pressed=true]{border-color:#6d28d9;box-shadow:0 3px 0 #6d28d9;background:#f5f0ff}
.garden-options label{display:block;font-size:13px;font-weight:900;margin-bottom:8px}.garden-options select{width:100%;font-size:13px;padding:10px 7px}.garden-note{font-size:12px;line-height:1.5;color:#486474;margin:12px 0 0}.garden-note a,.garden-grownups a{color:#5b21b6;font-weight:900}
.collection-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.collection-heading>span{white-space:nowrap;font-size:13px;font-weight:1000;color:#4c1d95}.garden-alphabet{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;direction:rtl}
.letter-garden .album-letter{position:relative;font-size:30px;line-height:1.4;font-weight:700;border:2px solid #d9e6ee;border-radius:12px;padding:0 2px;background:#fff;min-height:50px;box-shadow:0 2px #d9e6ee}
.album-letter.grown{background:#ecfdf5;border-color:#5cba97}.album-letter.matched{border-color:#afa1d8;background:#faf5ff}.album-letter small{position:absolute;top:-7px;right:-4px;font-size:15px}.garden-alphabet button:disabled{opacity:.6}
.garden-grownups{margin-top:20px;font-size:14px;line-height:1.7}.garden-grownups summary{font-weight:1000;cursor:pointer;min-height:30px}.garden-grownups p:last-child{margin-bottom:0}
.letter-garden button,.letter-garden select{-webkit-tap-highlight-color:transparent}
@keyframes lg-float{50%{transform:translateY(-7px)}}
@keyframes lg-pop{35%{transform:scale(1.12);opacity:1}100%{transform:scale(1.3);opacity:0}}
@keyframes lg-wiggle{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes lg-pour{40%{transform:rotate(-20deg)}}
@keyframes lg-burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes lg-rain{to{transform:translate(var(--dx),var(--dy));opacity:0}}
@media(min-width:1200px){.letter-garden{padding-top:22px}.garden-stage{height:580px}}
@media(max-width:650px){
 .letter-garden{padding:12px 10px 24px}.garden-age{display:none}.garden-heading{margin-bottom:11px}.garden-kicker{font-size:10px}.garden-stage{height:500px;border-width:3px;border-radius:26px}.garden-scenery{background-image:url('/assets/scenes/letter-garden-768.webp')}
 .garden-welcome{padding:20px 10px 0}.welcome-letters{height:84px;gap:16px;margin-bottom:8px}.welcome-letters span{width:64px;height:64px;font-size:47px}.welcome-letters span:nth-child(2){width:82px;height:82px}.garden-welcome h2{font-size:33px;margin-top:12px}.garden-welcome>p{font-size:14px;max-width:285px;margin-bottom:16px}
 .garden-modes{gap:8px;margin-bottom:18px}.garden-modes button{min-width:0;flex:1;max-width:190px;padding:8px 5px;font-size:12px;border-radius:17px}.garden-modes button small{font-size:9px}.garden-modes button>span{font-size:23px}.garden-welcome .garden-font-status{font-size:10px;margin-top:12px}.welcome-steps{margin-top:14px;font-size:15px;gap:19px}
 .garden-hud{top:12px;left:10px;right:10px;gap:7px}.garden-target{gap:8px;border-radius:20px;padding-right:12px}#gardenTarget{width:59px;min-height:76px;font-size:55px;border-radius:17px}#gardenInstruction{font-size:10px}#gardenName{font-size:18px}.garden-drops{padding:10px 8px;gap:3px}.garden-drop{width:20px;transform:scale(.8);margin:-2px}
 .garden-bubble-area{left:12px;right:12px;top:27%;height:32%;gap:14px}.letter-garden .garden-bubble{width:clamp(78px,25vw,116px);height:clamp(78px,25vw,116px);border-width:3px}.garden-bubble>span[lang=ar]{font-size:clamp(52px,17vw,73px);padding-bottom:3px}.garden-bubble .bubble-number{display:none}.garden-bubble.is-help{outline-width:4px;outline-offset:4px}.garden-bubble.is-help:after{width:33px;height:33px;font-size:22px;right:-5px;bottom:-8px}
 .garden-stage[data-mode=little] .garden-bubble{width:116px;height:116px}.garden-stage[data-mode=little] .garden-bubble>span[lang=ar]{font-size:76px}.garden-stage[data-mode=little] .garden-bubble-area{gap:25px}
 .garden-pots{left:6%;right:6%;height:150px;bottom:6px;gap:8px}.letter-garden .garden-pot{width:110px;height:150px}.garden-pot .pot-letter{font-size:29px;bottom:21px}.garden-message{top:61%;font-size:13px}.garden-water-play{top:23%;left:5%;right:5%}.garden-water-play>p{font-size:17px;margin:0 0 8px}.letter-garden .garden-can{height:134px;width:142px;font-size:14px}.garden-can svg{width:112px;height:91px}.water-meter{margin-top:10px;gap:8px}.water-meter i{width:12px;height:12px}
 .garden-toolbar{gap:6px;margin-top:15px;flex-wrap:nowrap}.garden-toolbar button{min-width:0;flex:1;font-size:11px;padding:8px 3px;border-radius:12px}.garden-voice-status{font-size:10px;margin-bottom:15px}
 .garden-finish{top:7%;left:6%;right:6%}.garden-finish h2{font-size:26px;margin-top:13px}.garden-finish>p{font-size:13px;margin-bottom:14px}.finish-actions{gap:11px}.finish-actions .garden-primary{font-size:15px;padding:12px 18px}.finish-actions button{font-size:13px}.garden-finish .garden-save-status{font-size:10px;margin-top:14px}.finish-tag{font-size:12px;padding:7px 13px}
 .garden-below{grid-template-columns:1fr}.garden-options,.garden-collection{padding:17px}.garden-options{order:2}.garden-collection{order:1}.garden-alphabet{gap:6px}.letter-garden .album-letter{font-size:28px;min-height:46px}.garden-grownups{padding:17px;font-size:13px}.garden-below h2{font-size:17px}.garden-colours button{font-size:12px}.garden-colours{max-width:350px}
}
@media(max-width:350px){.garden-stage{height:485px}.garden-modes button{font-size:11px}.garden-modes button small{font-size:8px}.garden-heading h1{font-size:24px}.garden-bubble-area{gap:12px;left:10px;right:10px}.garden-stage[data-mode=little] .garden-bubble{width:106px;height:106px}.garden-stage[data-mode=little] .garden-bubble-area{gap:22px}.garden-drops{padding:9px 6px}.garden-drop{margin:-3px}.garden-target{padding-right:8px;gap:5px}.garden-finish h2{font-size:24px}.garden-message{font-size:12px}}
.garden-bubble>span[lang=ar]{padding-bottom:18px}
.garden-bubble>span.has-descender{transform:translateY(-9px)}
@media(max-width:650px){.garden-stage[data-mode=little] .garden-bubble>span[lang=ar]{font-size:68px;padding-bottom:17px}}
/* A phone turned sideways keeps the target and play action together. */
@media(min-width:560px) and (max-height:500px){
 .garden-stage:not([data-phase=welcome]){height:max(180px,calc(100svh - 155px))}
 .garden-stage:not([data-phase=welcome]) .garden-hud{top:9px;left:9px;right:auto;width:35%;align-items:flex-start}
 .garden-stage:not([data-phase=welcome]) .garden-target{gap:5px;border-radius:14px;padding-right:10px}
 .garden-stage:not([data-phase=welcome]) #gardenTarget{width:45px;min-height:58px;font-size:40px;border-radius:12px}
 .garden-stage:not([data-phase=welcome]) #gardenInstruction{font-size:9px}.garden-stage:not([data-phase=welcome]) #gardenName{font-size:15px}
 .garden-stage:not([data-phase=welcome]) .garden-drops{position:absolute;top:71px;left:8px;padding:3px 7px;gap:1px}.garden-stage:not([data-phase=welcome]) .garden-drop{transform:scale(.55);width:19px;margin:-6px 0}
 .garden-stage:not([data-phase=welcome]) .garden-bubble-area{left:40%;right:3%;top:3%;height:78%;gap:18px}
 .garden-stage:not([data-phase=welcome]) .garden-bubble{width:82px;height:82px}.garden-stage[data-mode=little]:not([data-phase=welcome]) .garden-bubble{width:104px;height:104px}
 .garden-stage:not([data-phase=welcome]) .garden-bubble>span[lang=ar]{font-size:56px;padding-bottom:15px}
 .garden-stage:not([data-phase=welcome]) .garden-bubble .bubble-number{display:none}
 .garden-stage:not([data-phase=welcome]) .garden-pots{left:2%;right:63%;height:91px;bottom:7px;gap:5px}.garden-stage:not([data-phase=welcome]) .garden-pot{height:91px;width:80px}
 .garden-stage:not([data-phase=welcome]) .garden-pot svg{top:-12px}.garden-stage:not([data-phase=welcome]) .garden-pot .pot-letter{left:calc(50% - 20px);width:40px;height:37px;font-size:24px;padding-bottom:5px;border-radius:10px}
 .garden-stage:not([data-phase=welcome]) .garden-pot.is-current:after{display:none}
 .garden-stage:not([data-phase=welcome]) .garden-message{left:39%;right:3%;top:auto;bottom:12px;font-size:11px}
 .garden-stage:not([data-phase=welcome]) .garden-water-play{left:39%;right:3%;top:10px}.garden-stage:not([data-phase=welcome]) .garden-water-play>p{font-size:14px;margin:0 0 6px}
 .garden-stage:not([data-phase=welcome]) .garden-can{width:120px;height:113px;padding-bottom:5px;font-size:12px}.garden-stage:not([data-phase=welcome]) .garden-can svg{height:79px;width:96px}
 .garden-stage:not([data-phase=welcome]) .water-meter{margin-top:8px}.garden-stage:not([data-phase=welcome]) .water-meter i{width:10px;height:10px}
 .garden-stage:not([data-phase=welcome]) .garden-finish{top:10px;left:39%;right:3%}.garden-stage:not([data-phase=welcome]) .finish-tag{font-size:10px;padding:4px 10px}
 .garden-stage:not([data-phase=welcome]) .garden-finish h2{font-size:19px;margin:7px auto}.garden-stage:not([data-phase=welcome]) .garden-finish>p{font-size:10px;margin:6px 0}.garden-stage:not([data-phase=welcome]) .finish-actions{gap:7px}
 .garden-stage:not([data-phase=welcome]) .finish-actions button{min-height:44px;font-size:11px;padding:8px}.garden-stage:not([data-phase=welcome]) .garden-finish .garden-save-status{font-size:9px;margin-top:9px}
 .garden-pause{padding:12px}.garden-pause>div{grid-template-columns:1fr 1fr;max-width:450px;gap:10px}.garden-pause>div>span{display:none}.garden-pause h2,.garden-pause p{grid-column:1/-1}.garden-pause h2{font-size:24px}.garden-pause p{font-size:13px}.garden-pause button{font-size:14px!important;padding:10px!important}
 .letter-garden .party-bubble{width:46px;height:46px;left:calc(27% + var(--col)*20%);top:calc(12% + var(--row)*28%)}
}
@media(min-width:560px) and (max-height:350px){
 .garden-stage:not([data-phase=welcome]) .garden-pots,.garden-stage:not([data-phase=welcome]) .garden-pot{height:75px}
 .garden-stage:not([data-phase=welcome]) .garden-pots{bottom:3px}
 .garden-stage:not([data-phase=welcome]) .garden-water-play{top:6px}
 .garden-stage:not([data-phase=welcome]) .garden-can{height:96px}.garden-stage:not([data-phase=welcome]) .garden-can svg{height:62px}
 .garden-stage:not([data-phase=welcome]) .water-meter{margin-top:6px}
 .garden-stage:not([data-phase=welcome]) .garden-message{bottom:6px;font-size:10px}
 .garden-stage:not([data-phase=welcome]) .finish-tag{display:none}
 .garden-stage:not([data-phase=welcome]) .garden-finish h2{font-size:16px}
 .garden-stage:not([data-phase=welcome]) .garden-finish>p{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.letter-garden *,.letter-garden *:before,.letter-garden *:after{animation:none!important;transition:none!important}.garden-effects{display:none}}
html[data-sg-calm=true] .letter-garden *,html[data-sg-calm=true] .letter-garden *:before,html[data-sg-calm=true] .letter-garden *:after{animation:none!important;transition:none!important}
html[data-sg-calm=true] .garden-effects{display:none}

.garden-mode-link{margin:0 0 16px;font-size:13px;text-align:right}.garden-mode-link a{display:inline-block;padding:10px 14px;min-height:44px;border:2px solid #b8d6e1;border-radius:15px;background:#fff;color:#5b21b6;font-weight:900;text-decoration:none}.garden-mode-link a:hover{background:#f3eaff}.garden-mode-link a:focus-visible{outline:3px solid #6d28d9;outline-offset:3px}
