/* Independent layers fill the viewport; only scenery may crop. */
html,body{background:#d9d2bd}body::before{display:none}
main{display:block;height:100dvh;width:100%;overflow:hidden}
.stage.layered-stage{width:100%;height:100dvh;aspect-ratio:auto;box-shadow:none;container-type:normal;display:grid;grid-template-rows:minmax(0,25fr) minmax(0,48fr) minmax(0,17fr) minmax(0,10fr);padding:2dvh max(16px,3vw) 1dvh;gap:0;isolation:isolate}
.garden-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 78%;z-index:-2}
.brand{margin:0;min-height:0;width:min(86vw,1020px);height:100%;justify-self:center;display:flex;align-items:center;justify-content:center}
.brand img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px #68645214)}
.mascot-slot{min-height:0;display:flex;align-items:flex-end;justify-content:center}
.mascot{position:relative;display:block;width:min(75vw,46dvh);height:min(75vw,46dvh);max-height:100%;aspect-ratio:1;background:transparent;cursor:pointer;flex:none}
.cat-art{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 7px #3b40232b)}
.mascot .blink{position:absolute;inset:0;width:100%;height:100%;mask-image:radial-gradient(ellipse 9% 5% at 41% 40%,#000 65%,transparent 100%),radial-gradient(ellipse 8% 5% at 75% 38%,#000 65%,transparent 100%)}
.mascot .blink img{width:100%;height:100%;object-fit:contain}
.scene-nav{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,40px);width:min(92vw,850px);height:100%;min-height:0;justify-self:center}
.scene-key{position:relative;display:flex;align-items:center;justify-content:center;left:auto;top:auto;width:calc((100% - 2 * clamp(10px,3vw,40px))/3);height:100%;min-width:0;flex:1;background:none;border:0;padding:0;cursor:pointer}
.scene-key img{width:100%;height:100%;object-fit:contain;transition:filter .18s ease;filter:drop-shadow(0 5px 4px #65513720)}
.scene-key:hover img{filter:brightness(1.08) drop-shadow(0 0 3px #fff4)}
.scene-key:active img{filter:brightness(.95)}
.scene-key:focus-visible{outline:2px dashed #68714d;outline-offset:1px;border-radius:14px}
.ca-slot{display:flex;align-items:center;justify-content:center;min-height:0}
.layered-stage .ca-plaque{position:relative;left:auto;bottom:auto;transform:none;width:min(80vw,500px,74dvh);height:min(6dvh,65px);max-height:100%;border-radius:12px;overflow:hidden}
.layered-stage .ca-plaque img{position:absolute;top:50%;left:0;width:100%;height:auto;transform:translateY(-50%);object-fit:contain}
.layered-stage .ca-text{font-size:clamp(12px,1.8dvh,19px);inset:0 6%}
.layered-stage .ca-plaque.has-address .ca-text{font-size:clamp(8px,1.3dvh,13px)}
/* The shared transparent frame surrounds each full, uncropped PFP. */
.thumbnail-tray button{background:transparent;border:0;overflow:visible;border-radius:6%;padding:0;box-shadow:0 2px 3px #6c583122}
.thumbnail-tray button>img{inset:7%;width:86%;height:86%;object-fit:contain;border-radius:3%}
.thumbnail-tray button::after{content:'';position:absolute;inset:0;z-index:2;background:url('assets/pfp-frame.png') center/100% 100% no-repeat;pointer-events:none;border-radius:6%;transition:filter .18s ease}
.thumbnail-tray button[aria-pressed=true]{border:0;outline:2px solid #6e7c4d;outline-offset:1px}
.thumbnail-tray button:hover::after{filter:brightness(1.08)}
.thumbnail-tray button:focus-visible{outline:2px dashed #52613b;outline-offset:1px}
.preview-frame{background:transparent;border-radius:5%;overflow:hidden}
.preview-frame::after{content:'';position:absolute;inset:0;z-index:7;background:url('assets/pfp-frame.png') center/100% 100% no-repeat;pointer-events:none}
#generator .preview-frame .pfp-preview,.preview-frame .pfp-ghost{inset:7%;width:86%;height:86%;object-fit:contain;border-radius:3%}
.pfp-loader{inset:7%;border-radius:3%}
@media(max-width:640px){.stage.layered-stage{grid-template-rows:minmax(0,27fr) minmax(0,45fr) minmax(0,16fr) minmax(0,12fr);padding:2dvh 10px}.brand{width:96%;}.mascot{width:min(86vw,43dvh);height:min(86vw,43dvh)}.scene-nav{gap:5px;width:100%}.scene-key{width:calc((100% - 10px)/3)}.layered-stage .ca-plaque{width:min(88vw,65dvh);height:min(7dvh,65px)}}
@media(max-height:500px) and (min-width:641px){.stage.layered-stage{grid-template-rows:minmax(0,23fr) minmax(0,46fr) minmax(0,20fr) minmax(0,11fr);padding-top:1dvh}.scene-nav{width:min(88vw,155dvh);gap:2dvh}.mascot{width:43dvh;height:43dvh}.brand{width:80dvh}.layered-stage .ca-plaque{height:8dvh}}
@media(prefers-reduced-motion:reduce){.scene-key img,.thumbnail-tray button::after{transition:none}}
/* Anchor all layers to the same ground line, independent of background cropping. */
.stage.layered-stage{display:block;padding:0;--ground:74dvh;--scenery-height:max(120dvh,66.6667vw)}
.garden-layer{inset:auto;left:50%;top:calc(var(--ground) - var(--scenery-height) * .79);width:max(180dvh,100vw);height:var(--scenery-height);max-width:none;transform:translateX(-50%);object-fit:fill}
.brand{position:absolute;left:50%;top:1dvh;transform:translateX(-50%);width:min(88vw,1000px);height:24dvh}
.mascot-slot{position:absolute;inset:auto;left:50%;bottom:25dvh;transform:translateX(-50%);width:min(78vw,48dvh);height:min(78vw,48dvh);display:block}
.mascot{width:100%;height:100%;max-height:none}
.scene-nav{position:absolute;left:50%;bottom:9dvh;transform:translateX(-50%);width:min(92vw,850px,150dvh);height:15dvh;gap:clamp(8px,3vw,40px)}
.ca-slot{position:absolute;left:0;right:0;bottom:1.6dvh;height:6dvh}
.layered-stage .ca-plaque{width:min(78vw,500px,80dvh);height:100%;max-height:none}
.layered-stage .ca-plaque img{top:-38%;height:180%;width:100%;transform:none;object-fit:fill}
@media(max-width:640px){.brand{top:5dvh;width:96vw;height:22dvh}.mascot-slot{width:min(88vw,45dvh);height:min(88vw,45dvh);bottom:25dvh}.scene-nav{width:96vw;height:13dvh;bottom:10dvh;gap:4px}.ca-slot{bottom:2.5dvh;height:6dvh}.layered-stage .ca-plaque{width:86vw}}
@media(max-height:500px) and (min-width:641px){.brand{top:0;height:23dvh;width:85dvh}.mascot-slot{width:48dvh;height:48dvh}.scene-nav{height:16dvh;bottom:8dvh;width:145dvh;gap:2dvh}.ca-slot{height:6dvh;bottom:1dvh}.layered-stage .ca-text{font-size:clamp(9px,2.8dvh,13px)}}
.stage.layered-stage{--scenery-height:max(128dvh,66.6667vw)}
.garden-layer{width:max(192dvh,100vw)}
.brand img{filter:none}
.mascot .blink{mask-image:radial-gradient(ellipse 10% 6% at 42% 34%,#000 65%,transparent 100%),radial-gradient(ellipse 8% 6% at 71% 33%,#000 65%,transparent 100%)}
.loading-caption{display:block;text-align:center;font:bold clamp(18px,3vw,30px)/1.1 'Times New Roman',serif;color:#30291f;filter:blur(.25px);margin-top:12px}
.pfp-loader .loading-caption{font-size:clamp(13px,2vw,22px);margin-top:6px}