/* Shared full-bleed scenery and a reserved, consistent control area. */
:root{--controls-height:122px}
html{min-height:100%;background:#f5ddc4}
body,body.on-cover,body.on-village,body.on-memory{padding-bottom:var(--controls-height);background:#f5ddc4}
main,.on-village main,.on-memory main{min-height:calc(100svh - var(--controls-height));background:linear-gradient(#fff5e914,#fff5e925),url('assets/memoria/cenario.webp') center top/cover no-repeat;background-attachment:fixed}
.topbar,.on-cover .topbar{position:fixed;inset:auto 0 0;min-height:var(--controls-height);padding:8px 14px calc(5px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:center;gap:4px;background:#fff9eef7;border-top:2px solid #fff;backdrop-filter:blur(10px)}
.topbar .tools,.on-cover .tools{display:flex;flex-wrap:nowrap;justify-content:center;width:auto;gap:8px}
.topbar .tool,.on-cover .tool{min-height:52px;font-size:.88rem;border-radius:20px}
.topbar .game-credits{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px 14px;border:0;padding:0;color:#4a4a61;font-size:.75rem;line-height:1.3;text-align:center}
.game-credits button{min-width:56px;min-height:44px;background:transparent;text-decoration:underline;text-underline-offset:4px;color:#65408b;border-radius:12px;padding:5px 8px;font-weight:bold;font-size:.88rem}
.voice-notice{bottom:calc(var(--controls-height) + 12px)}
button,a,summary{scroll-margin-bottom:calc(var(--controls-height) + 18px)}
.on-cover main{background:#f5dac0}
.on-cover .cover{height:calc(100svh - var(--controls-height));min-height:51vw;background:#f5dac0}
.cover-backdrop{display:none}
.on-cover .cover-art-wrap{inset:0;width:100%;height:100%;max-height:none;mask-image:none}
.on-cover .cover-art{object-fit:cover;object-position:center top;mask-image:none}
.on-cover .cover-play{bottom:20px;left:12px;right:12px}
.on-cover .cover .primary{min-height:58px;border-radius:40px;min-width:220px;font-size:1.65rem}
.village-map{width:100%;min-width:0;margin:0;aspect-ratio:1672/941}
.village-hub{min-height:calc(100svh - var(--controls-height));background:#dfe2bc}
.village-landscape{mask-image:none}
.village-heading{left:30%;right:30%;height:17%;top:0}
.village-below{max-width:none;background:#f4f1dc;padding:10px 22px 16px}
.village-below .adult-panel{max-width:1000px;margin:10px auto}
.village-status{margin:0;font-size:.85rem}
.memory-heading{width:min(520px,65%);margin:0 auto 14px}
.memory-heading img{height:170px}
.memory-layout{grid-template-columns:minmax(0,690px) 220px}
.memory-result button,.memory-finish button,.memory-card{scroll-margin-bottom:calc(var(--controls-height) + 18px)}
@media(min-width:901px) and (max-height:900px){
 .memory-heading{margin:-55px auto 12px;width:420px}.memory-heading img{height:134px}
 .memory-guide{min-height:88px;padding:8px 18px 8px 10px;margin-bottom:14px}.memory-flu{width:64px}.memory-flu img{height:64px}
 .memory-card{height:144px}.memory-card-face{padding:23px 6px 5px}.memory-card-face img{height:78px}
 .memory-side{padding-top:15px}.memory-dentim img{height:174px}
}
.activity-title{padding:22px 26px;background:#fffaeff0;border:3px solid #fff;border-radius:30px;text-align:center}
#about-dialog{width:min(620px,calc(100% - 28px));max-width:620px;max-height:calc(100svh - 28px);overflow:auto;padding:28px 32px;text-align:left}
.about-heading{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:18px}
.about-heading img{width:80px;height:94px;object-fit:contain}
#about-dialog h2{font-size:1.8rem;margin:0;color:#65408b}
#about-dialog p{font-size:1rem;line-height:1.5;margin:0 0 17px}
#about-dialog .about-signature{padding-top:14px;border-top:1px solid #ddd1e5;text-align:center;font-size:.9rem}
#about-dialog .primary{display:flex;margin:18px auto 0;min-height:52px;font-size:1.1rem;border-radius:30px}
@media(max-aspect-ratio:1/1){
 .on-cover .cover{min-height:130vw;background:linear-gradient(#81b1f3,#e6d5d9 40%,#f7dac1 75%)}
 .on-cover .cover-art-wrap{width:100%;height:min(100%,165vw);mask-image:none}
 .on-cover .cover-art{object-fit:cover;object-position:right top;mask-image:linear-gradient(#000 90%,transparent 100%)}
 .on-cover .cover-play{bottom:22px}
}
@media(max-width:900px){.memory-layout{display:block}.memory-heading{margin:4px auto 10px}}
@media(max-width:700px){
 :root{--controls-height:calc(148px + env(safe-area-inset-bottom,0px))}
 .topbar,.on-cover .topbar{padding:7px 8px calc(5px + env(safe-area-inset-bottom,0px));gap:3px;flex-wrap:nowrap}
 .topbar .tools,.on-cover .tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;max-width:530px;gap:4px}
 .topbar .tool,.on-cover .tool,.on-village .topbar .tool{min-width:0;min-height:72px;padding:5px 2px;flex-direction:column;justify-content:center;gap:5px;font-size:.875rem;line-height:1.15;border-radius:18px}
 .topbar .game-credits{display:grid;grid-template-columns:auto 56px;gap:0 10px;font-size:.7rem;line-height:1.45;align-items:center}
 .game-credits span{grid-column:1}.game-credits button{grid-column:2;grid-row:1/3}
 .village-map{width:100%;min-width:0;margin:0;aspect-ratio:2/3}
 .village-hub{background:#dfe2bc}.village-landscape{mask-image:none}
 .village-heading{top:0;left:20%;right:20%;height:16%;padding-top:3px}
 .village-heading h1{height:calc(100% - 24px)}
 .village-heading p{font-size:.85rem;line-height:22px;padding:0 9px}
 .village-back{top:10px;left:8px;padding:5px 10px;min-height:44px;font-size:.875rem;gap:4px}
 .house-playable{font-size:.68rem;margin-top:2px}
 .village-below{padding:12px 16px}
 .on-memory main,main{background-size:auto 100svh;background-attachment:fixed}
 #about-dialog{padding:22px 20px}.about-heading{gap:10px}#about-dialog h2{font-size:1.6rem}
}
@media(max-width:600px){.memory-heading{width:82%;margin:10px auto 8px}.memory-heading img{height:98px}}
@media(max-height:500px) and (min-aspect-ratio:1/1){:root{--controls-height:110px}.on-cover .cover{min-height:51vw}.on-cover .cover .primary{min-height:48px;font-size:1.3rem}}

/* Credits stay below the scene; desktop controls have their own side lane. */
:root{--credits-height:44px}
.topbar,.on-cover .topbar{bottom:var(--credits-height);min-height:calc(var(--controls-height) - var(--credits-height))}
body .game-credits{position:fixed;z-index:6;inset:auto 0 0;min-height:var(--credits-height);padding:0 12px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 12px;border:0;background:#fff9eef2;color:#55546a;font-size:.75rem;line-height:1.3;text-align:center}
.game-credits button{font-size:.82rem;font-weight:500;min-height:44px}
@media(max-width:700px){
 :root{--credits-height:calc(44px + env(safe-area-inset-bottom,0px))}
 .topbar,.on-cover .topbar{padding-bottom:6px}
 body .game-credits{display:grid;grid-template-columns:auto 56px;gap:0 10px;padding:0 8px env(safe-area-inset-bottom,0px);font-size:.75rem;line-height:1.35}
}
@media(min-width:901px){
 :root{--controls-height:44px;--side-controls:116px}
 body,body.on-cover,body.on-village,body.on-memory{padding-right:var(--side-controls);padding-bottom:var(--credits-height);background:linear-gradient(#a6c9ee,#dce6ce 60%,#f5dac0)}
 .topbar,.on-cover .topbar{top:calc((100svh - var(--credits-height))/2);bottom:auto;left:auto;right:12px;width:92px;min-height:0;max-height:calc(100svh - var(--credits-height) - 24px);transform:translateY(-50%);padding:0;gap:0;border:0;background:none;box-shadow:none;backdrop-filter:none;overflow-y:auto;scrollbar-width:thin}
 .topbar .tools,.on-cover .tools{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;gap:8px}
 .topbar .tool,.on-cover .tool,.on-village .topbar .tool{width:100%;min-width:0;min-height:68px;flex-direction:column;justify-content:center;gap:5px;padding:7px 5px;border:2px solid #fff8ec;border-radius:22px;background:#fffaf1f5;box-shadow:0 3px 0 #9faeb752;font-size:.875rem;line-height:1.15}
 .topbar .tool[aria-pressed=true],.on-cover .tool[aria-pressed=true],.on-village .topbar .tool[aria-pressed=true]{background:#e6dcef;border-color:#7754a4}
 .topbar .tool>span{font-size:inherit}
 body .game-credits{font-size:12px;min-height:44px;background:#fff9eed9;gap:2px 14px}
 .game-credits button{font-size:13px}
 .on-cover .cover{height:calc(100svh - var(--credits-height));min-height:0}
 .on-cover .cover-art-wrap{height:100%;width:100%}
 .on-cover .cover-art{object-fit:cover;object-position:center top;mask-image:none}
 .on-cover .cover-play{bottom:18px;left:12px;right:12px}
 .on-cover .cover .primary{min-height:58px;font-size:1.65rem;padding:12px 35px}
 .voice-notice{left:calc((100% - var(--side-controls))/2)}
}
/* Extra-wide windows keep the ensemble above the start button. */
@media(min-width:901px) and (min-aspect-ratio:2/1){
 .on-cover .cover{background:linear-gradient(#8bb5ef,#bad7d3 40%,#efd6bf 78%)}
 .on-cover .cover-art-wrap{width:min(100%,calc((100svh - 44px)*1.8));left:50%;transform:translateX(-50%);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
}