/* Keep generated artwork; unify spacing, scrolling and reachable actions. */
.play-screen button,.play-screen summary,.play-screen select{touch-action:manipulation}
.play-screen button:focus-visible,.play-screen summary:focus-visible,.play-screen select:focus-visible,.play-screen input:focus-visible{outline:2px solid #2b7868;outline-offset:3px}
.play-screen #panel-title:focus{outline:none}
.play-screen .dialog-heading{padding-inline:46px}
.panel-back{position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;border:0;background:none;padding:0}
.panel-back .ui-icon{width:38px;height:38px;transform:none}
.play-screen #panel-body{scrollbar-gutter:stable;padding-inline:9px;scroll-padding-block:12px}
.play-screen #panel-actions{flex:none;padding:8px 9px 0;display:flex;flex-direction:column;gap:5px}
.play-screen #panel-actions>button{width:auto;min-width:min(260px,100%);max-width:100%;margin-inline:auto}
.play-screen #panel-message:not(:empty){padding:7px 9px 0;max-height:58px;overflow-y:auto;font-size:11px;overflow-wrap:anywhere}
.play-screen #panel-message:empty{padding:0}
.play-screen [hidden]{display:none!important}
.play-screen .upgrade-missing{text-align:center;font-size:11px;line-height:1.6;color:#687d58;margin:9px 0 3px}
.play-screen .seed-choice em{display:block;margin-top:4px;font-style:normal;font-size:11px;color:#527651}
.play-screen .seed-choice.selected:not(:disabled){filter:brightness(1.035)}
.play-screen .seed-choice:disabled{opacity:.6;filter:grayscale(.35)}
.shop-row-info h3,.play-screen .row-text h3,.play-screen .seed-choice strong{overflow-wrap:anywhere}
.play-screen .shop-row-quantity button{min-height:32px;min-width:30px}
.play-screen .shop-row-quantity input{height:30px}
.play-screen .shop-row-purchase .primary{min-height:36px}
.play-screen .item-row .row-text{flex:1}
.play-screen .profile{padding-top:4px;padding-bottom:4px}
.play-screen .profile small{line-height:1.3}
.play-screen .profile strong{line-height:1.2}
.play-screen .plant-summary h3{line-height:1.35;overflow-wrap:anywhere}
.play-screen .plant-progress,.play-screen .progress-line,.play-screen .xp-track{background:var(--ui-slot) center/150% 600% no-repeat;border-radius:3px;overflow:hidden}
.play-screen .plant-progress i,.play-screen .progress-line i,.play-screen .xp-track i{background:var(--ui-button) center/120% 800% no-repeat;border-radius:3px}
.play-screen .plant-stats dd{line-height:1.3}
.play-screen .variant-details summary{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.play-screen .variant-details summary::after{content:'+';font-size:18px;line-height:1}
.play-screen .variant-details[open] summary::after{content:'−'}
.play-screen .variant-details summary span{margin-left:auto}
.play-screen .yield-note{margin-bottom:4px}
.play-screen .empty-state{font-size:13px;line-height:1.65;padding:22px 12px}
.play-screen .return-home{z-index:5}
.play-screen .collection-family .collection-tile{display:flex;flex-direction:column;align-items:stretch}
.play-screen .collection-family h4{flex:1;min-height:3em}
.play-screen .collection-family .collection-tile p{margin-top:auto;padding-top:3px}
@media(max-width:760px) and (orientation:portrait),(max-width:1024px) and (max-height:600px) and (orientation:landscape){
 .play-screen dialog{border-width:16px;padding:6px 7px 10px;max-height:calc(var(--play-height) - 16px)}
 .play-screen dialog[data-kind="plant"],.play-screen dialog[data-kind="upgrade"],.play-screen dialog[data-kind="seeds"]{width:min(740px,calc(var(--play-width) - 22px));max-width:calc(var(--play-width) - 22px)}
 .play-screen .dialog-heading{min-height:40px;padding-top:2px;padding-bottom:9px}
 .play-screen .dialog-heading h2{font-size:21px}
 .play-screen #panel-actions{padding-top:6px}
 .play-screen #panel-actions .primary,.play-screen #panel-actions .secondary{min-height:36px;padding:8px 14px;font-size:12px}
 .play-screen #panel-message:not(:empty){max-height:37px;font-size:10px;line-height:1.4;padding-top:4px}
 .play-screen .plant-summary{gap:12px;margin-bottom:5px;align-items:center}
 .play-screen .plant-portrait{width:61px;height:61px;flex:none}
 .play-screen .plant-summary h3{font-size:16px;margin-bottom:4px}
 .play-screen .plant-summary p{font-size:10px;margin:3px 0 5px}
 .play-screen .plant-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:5px 0}
 .play-screen .plant-stats>div{padding:6px 4px;border-width:6px;border-image-width:12px}
 .play-screen .plant-stats dt{font-size:10px;line-height:1.35;margin-bottom:4px}
 .play-screen .plant-stats dd{font-size:15px;margin:0 0 3px}
 .play-screen .plant-stats small{font-size:9px;line-height:1.4;display:block}
 .play-screen .variant-details{margin:4px 0}
 .play-screen .variant-details summary{min-height:28px;font-size:11px}
 .play-screen .yield-note{font-size:10px;line-height:1.4;margin:3px 0}
 .play-screen .profile{padding-top:4px;padding-bottom:4px}
 .play-screen .profile strong{font-size:10px;margin-bottom:4px}
 .play-screen .profile small{font-size:8px;margin-top:4px}
 .play-screen .xp-track{width:132px;height:5px}
 .play-screen .play-topbar{top:10px}
 .play-screen .unlock-preview{gap:14px;margin:1px 0 6px}
 .play-screen .unlock-preview>.crop-art{height:52px;width:48px}
 .play-screen .unlock-preview>div{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:center}
 .play-screen .unlock-preview small,.play-screen .unlock-preview p{grid-column:1/-1}
 .play-screen .unlock-preview h3{margin:2px 0;line-height:1.2}
 .play-screen .unlock-preview p{margin:2px 0;font-size:10px}
 .play-screen .upgrade-card .level-numbers{display:none}
 .play-screen .upgrade-card>.dialog-copy{margin:5px 0;font-size:11px}
 .play-screen .requirements{margin:5px 0;gap:5px}
 .play-screen .requirements>div{padding:5px;border-width:5px;border-image-width:12px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:3px 5px;align-items:center;min-height:57px}
 .play-screen .requirements .crop-art,.play-screen .requirements .ui-icon{height:27px;width:27px;grid-row:1/3;margin:0}
 .play-screen .requirements strong,.play-screen .requirements small{grid-column:2;margin:0;line-height:1.35}
 .play-screen .requirements>div:not(.enough) strong{color:#9c6045}
 .play-screen .upgrade-missing{margin:4px 0;font-size:10px}
 .play-screen .seed-choice{min-height:72px;padding:7px 9px}
 .play-screen .seed-choice strong{font-size:13px;margin-bottom:3px}
 .play-screen .seed-choice small,.play-screen .seed-choice em{font-size:10px}
 .play-screen .seed-choice .crop-art{height:48px}
 .play-screen .shop-row-quantity button{min-height:30px}
 .play-screen .shop-row-purchase .primary{min-height:32px}
 .play-screen .item-row .secondary{min-height:36px}
 .play-screen .quest-action small{font-size:10px}
 .play-screen{--safe-start:env(safe-area-inset-left,0px);--safe-end:env(safe-area-inset-right,0px)}
 .play-screen .play-topbar{left:max(12px,var(--safe-start));right:max(12px,var(--safe-end))}
 .play-screen .action-dock{left:max(13px,var(--safe-start))}
 .play-screen .quick-rail,.play-screen .game-tools{right:max(12px,var(--safe-end))}
}
@media(max-width:760px) and (orientation:portrait){.play-screen{--safe-start:env(safe-area-inset-top,0px);--safe-end:env(safe-area-inset-bottom,0px)}}
@media(max-width:700px) and (orientation:landscape),(max-height:700px) and (max-width:400px) and (orientation:portrait){
 .play-screen .game-tools{right:9px;gap:8px 5px}
 .play-screen .quick-rail{right:9px;gap:5px}
 .play-screen .scene #world{left:48%;width:min(calc(var(--play-width) - 156px),calc((var(--play-height) - 42px)*1.8))}
 .play-screen .profile{gap:5px}.play-screen .xp-track{width:111px}
 .play-screen .profile small{font-size:7px}
 .play-screen .shop-row{grid-template-columns:42px minmax(0,1fr) 112px;gap:6px;padding-inline:4px}
 .play-screen .shop-row-art{height:52px}
 .play-screen .shop-row-info p{font-size:9px}
 .play-screen .collection-family-heading{gap:7px}
 .play-screen .collection-family .collection-tile{min-width:83px;flex-basis:calc((100% - 28px)/5)}
 .play-screen .plant-stats small{font-size:8px}
}

/* Avoid animating a large blurred scene while a panel has the user's focus. */
.play-screen:has(dialog[open]) .scene *{animation-play-state:paused!important}

.shop-help{font-size:11px;line-height:1.6;color:#718165;margin:0 0 10px}.inline-link{font:inherit;color:#3d765f;border:0;background:none;text-decoration:underline;text-underline-offset:3px;padding:3px 0;min-height:30px;text-align:left}