/* An in-game welcome and discovery sequence, rather than web dashboard panels. */
.garden-entry-ready #water-pocket{cursor:default;pointer-events:none}
.garden-entry-ready #water-pocket[aria-disabled=true]{opacity:1}
#modal:has(.garden-entry),#modal:has(#wizard-choices){width:min(760px,calc(100vw - 28px));max-height:calc(100dvh - 30px);border:2px solid #e8dfcb;border-radius:34px;background:radial-gradient(ellipse at 50% 20%,#fffaf0,#fbf7ee 80%);box-shadow:0 12px 0 #7e8d5e15,0 28px 100px #34482f33;padding:26px 34px 30px}
#modal:has(.garden-entry)::backdrop,#modal:has(#wizard-choices)::backdrop{background:#69735c5c;backdrop-filter:blur(7px)}
#modal:has(.garden-entry) .modal-top,#modal:has(#wizard-choices) .modal-top{margin-bottom:8px}
#modal:has(.garden-entry) .modal-top .eyebrow,#modal:has(#wizard-choices) .modal-top .eyebrow{font-size:9px;letter-spacing:2px;color:#929582}
#modal:has(.garden-entry) #modal-content>h2,#modal:has(#wizard-choices) #modal-content>h2{text-align:center;font-size:clamp(22px,3vw,29px);font-weight:500;line-height:1.7;letter-spacing:-.4px;margin:0}
.garden-entry{text-align:center}.entry-lead{font-size:15px;line-height:1.9;color:#727b65;margin:12px 0 16px}
.entry-illustration{position:relative;width:230px;height:225px;margin:12px auto 0;border-radius:50%;background:radial-gradient(ellipse,#e9e7d3a6 0,#eee8d378 45%,transparent 68%)}
.entry-illustration>img{position:absolute;width:170px;height:149px;left:30px;bottom:8px;filter:drop-shadow(0 9px 5px #98a08316)}
.entry-pot-smile{position:absolute;bottom:60px;left:0;width:100%;font-size:21px;color:#8b739c}
.entry-little-seed{position:absolute!important;left:calc(50% - 13px);top:25px;width:29px!important;height:40px!important;z-index:2;animation:entry-seed-float 4s ease-in-out infinite}
.entry-leaf-small{position:absolute;width:28px;height:14px;border-radius:0 90% 0 90%;background:#b2c394;left:53%;top:15px;rotate:-20deg}
.entry-orbit{position:absolute;font-size:26px;color:#dcc58d;left:16px;top:56px;animation:entry-sparkle 3s ease-in-out infinite}.orbit-two{left:auto;right:20px;top:105px;font-size:19px;animation-delay:-1.5s}
.entry-fair{font-size:11px;line-height:1.9;color:#92937e;margin:4px 0 18px}
.entry-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.entry-actions .primary{min-width:190px;padding:12px 24px;border:1px solid #49674f;box-shadow:0 4px 0 #d7dfca;font-size:14px}
.entry-text-button,.entry-replay{border:0;background:none;color:#8b917b;font-size:12px;padding:12px;text-decoration:underline;text-underline-offset:5px}
.grown-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 5px;margin:18px auto 20px;max-width:620px}
.grown-cell{min-width:0;position:relative;aspect-ratio:1;display:grid;place-items:center}
.grown-cell:before{content:'';position:absolute;inset:18% 9% 0;border-radius:50%;background:#e6e9d378;box-shadow:0 3px 0 #d8dcc21f}
.grown-example.character{position:relative;display:block;mix-blend-mode:normal;width:100%;height:100%;background-image:url('assets/characters-isolated.png');background-size:400% 300%;background-repeat:no-repeat;filter:drop-shadow(0 4px 2px #6e795817);animation:entry-character-in .6s both;animation-delay:var(--appear-delay)}
.entry-secret{font-size:12px;line-height:1.9;color:#7d876e;margin:5px auto 0}
.planting-fair-note{font-size:10px;line-height:1.8;color:#8f927e;margin:15px 0 0;text-align:center}
#modal:has(#wizard-choices) .lead{text-align:center;font-size:13px;line-height:1.8;color:#7b836d;margin:9px 0 18px}
.mystery-seed-field{grid-template-columns:repeat(6,1fr)!important;gap:10px!important;min-height:230px;align-content:center}
.mystery-seed-field .choice{position:relative;text-align:center;min-width:0;padding:15px 6px 12px;border:1px solid transparent;background:transparent;border-radius:40% 40% 24px 24px;transition:background .2s,transform .2s,border-color .2s}
.mystery-seed-field .choice:before{content:'';position:absolute;left:13%;right:13%;top:58px;height:12px;border-radius:50%;background:#d4dcc044;z-index:0}
.mystery-seed-field .choice .mystery-seed{position:relative;width:23px;height:34px;margin:4px auto 14px;box-shadow:inset -3px -2px #6f5c6517,0 4px 4px #7d865918;transition:transform .2s}
.mystery-seed-field .choice strong{display:block;font-size:10px;font-weight:500;color:#7d846d;white-space:nowrap;letter-spacing:0}
.mystery-seed-field .choice small{display:none}
.mystery-seed-field .choice:hover{background:#f1f0dc88;transform:translateY(-3px)}
.mystery-seed-field .choice.selected{background:radial-gradient(#f3f0d5,#e6ebd0a6);border:1px solid #b9c89d;box-shadow:0 3px 0 #d6dfc6}
.mystery-seed-field .choice.selected .mystery-seed{transform:translateY(-4px) rotate(-8deg)}
#modal:has(#wizard-choices) .wizard-foot{margin-top:20px;border-top:1px solid #e4e5d6;padding-top:15px}
#modal:has(#wizard-choices) .wizard-step{font-size:11px;color:#8a917b}
#modal:has(#wizard-choices) .wizard-foot .button{font-size:12px;padding:10px 19px}
@keyframes entry-seed-float{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-7px) rotate(-5deg)}}
@keyframes entry-sparkle{50%{opacity:.4;scale:.8}}
@keyframes entry-character-in{from{scale:.94;translate:0 5px}to{scale:1;translate:0 0}}
@media(max-width:720px){
 #modal:has(.garden-entry),#modal:has(#wizard-choices){border-radius:27px;padding:18px 19px 24px;max-height:calc(100dvh - 22px)}
 #modal:has(.garden-entry) #modal-content>h2,#modal:has(#wizard-choices) #modal-content>h2{font-size:22px}
 .entry-illustration{width:205px;height:200px;margin-top:2px}.entry-illustration>img{width:154px;height:135px;left:26px}.entry-pot-smile{bottom:54px;font-size:18px}
 .entry-little-seed{top:15px}.entry-leaf-small{top:5px}
 .entry-lead{font-size:13px}.entry-actions{gap:5px;margin-top:15px}.entry-actions .primary{font-size:13px;min-width:190px}
 .grown-gallery{grid-template-columns:repeat(4,1fr);gap:5px;margin:12px auto}.entry-grown .entry-lead{font-size:12px}.entry-secret{font-size:11px}
 .mystery-seed-field{grid-template-columns:repeat(4,1fr)!important;gap:5px!important;min-height:280px}
 .mystery-seed-field .choice{padding:13px 3px 10px}.mystery-seed-field .choice strong{font-size:9px}
 #modal:has(#wizard-choices) .wizard-foot{gap:9px;flex-wrap:wrap}#modal:has(#wizard-choices) .wizard-foot .button{font-size:11px;padding:9px 14px}
 .planting-fair-note{font-size:9px;margin-top:12px}
}
@media(max-height:700px){.entry-illustration{height:158px;width:190px}.entry-illustration>img{width:136px;height:119px;left:27px;bottom:0}.entry-pot-smile{bottom:41px;font-size:17px}.entry-little-seed{top:0}.entry-leaf-small{top:-8px}.entry-lead{margin:8px 0}.entry-fair{margin:8px 0}.grown-gallery{max-width:500px}.mystery-seed-field{min-height:210px}}
@media(prefers-reduced-motion:reduce){.entry-little-seed,.entry-orbit,.grown-example.character{animation:none!important}.mystery-seed-field .choice{transition:none}}

/* Keep planting choices inside the phone screen; actions remain within reach. */
@media(max-width:720px){
 #modal[open]:has(#wizard-choices){display:flex;flex-direction:column;width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);margin:auto;padding:10px 16px 14px;overflow:hidden}
 #modal:has(#wizard-choices) .modal-top{flex:none;margin:0;min-height:38px}
 #modal:has(#wizard-choices) #modal-content{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
 #modal:has(#wizard-choices) #modal-content>h2{flex:none;font-size:clamp(19px,4.8vw,24px);line-height:1.35;margin:2px 0 0;overflow-wrap:anywhere}
 #modal:has(#wizard-choices) .lead{flex:none;font-size:12px;line-height:1.5;margin:8px 0 12px}
 #modal #wizard-choices{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;align-content:start;margin:0;padding:4px 5px 8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #modal #wizard-choices .choice{min-width:0;padding:10px;text-align:center}
 #modal #wizard-choices .choice.selected{padding:9px}
 #modal #wizard-choices .choice strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
 #modal #wizard-choices .choice small{font-size:11px}
 .storybook-garden #modal #wizard-choices .pot-choice{width:min(100%,112px);height:100px!important;margin:0 auto 6px}
 #modal #wizard-choices .soil-choice{max-width:100%;margin:8px auto 12px}
 #modal #wizard-choices.mystery-seed-field{grid-template-columns:repeat(4,minmax(0,1fr))!important;min-height:0;align-content:center;gap:5px!important}
 #modal #wizard-choices.mystery-seed-field .choice{padding:12px 2px}
 #modal #wizard-choices.mystery-seed-field .choice strong{font-size:9px;white-space:normal}
 #modal:has(#wizard-choices) .planting-fair-note{flex:none;font-size:9px;line-height:1.45;margin:8px 0}
 #modal:has(#wizard-choices) .wizard-foot{flex:none;display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding-top:10px}
 #modal:has(#wizard-choices) .wizard-foot>div{display:flex;gap:6px}
 #modal:has(#wizard-choices) .wizard-step{font-size:10px;white-space:nowrap}
 #modal:has(#wizard-choices) .wizard-foot .button{margin:0;min-height:44px;padding:9px 12px;font-size:11px;white-space:nowrap}
 #modal #wizard-choices.option-row{display:flex;flex-direction:column;justify-content:center;gap:12px}
 #modal #wizard-choices.option-row button{flex:none;min-width:0}
}
@media(max-width:360px){
 #modal[open]:has(#wizard-choices){padding-left:11px;padding-right:11px}
 #modal:has(#wizard-choices) .wizard-foot .button{padding:8px 9px;font-size:10px}
 #modal #wizard-choices .choice{padding:8px}
 #modal #wizard-choices .choice.selected{padding:7px}
}