/* The approved portrait home screen. Game views keep their own layout. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900;1000&display=swap');
#app[data-screen="home"]{min-height:100dvh;background:radial-gradient(ellipse at 50% 10%,#fffaf0 25%,#ecdfcb 100%);padding-top:12px}
#app[data-screen="home"]>header{display:none}
#app[data-screen="home"]>main{max-width:510px;padding:0 12px 100px;background:#fff9ef;border:1px solid #ecdfc8;border-radius:34px 34px 0 0;box-shadow:0 12px 65px #7855381a;overflow:hidden}
.village-home{position:relative;margin:0 -1px;font-family:Nunito,'Trebuchet MS',sans-serif}
.village-cover{height:236px;margin:0 -12px;background-image:url('assets/home-scenes.png');background-size:200% 600%;background-position:0 2%;border-radius:32px 32px 0 0;position:relative;background-color:#d8edce}
.village-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#fff9ef 100%)}
.village-title{position:relative;text-align:center;margin:-26px -5px 14px;z-index:1}
.village-title h1{font-family:Nunito,'Trebuchet MS',sans-serif;font-size:39px;font-weight:1000;line-height:1.2;letter-spacing:-1.7px;color:#603015;margin:0;paint-order:stroke fill;-webkit-text-stroke:7px #fff9ef;text-shadow:0 4px 0 #d6ad7e,0 5px 6px #5e30132b}
.village-title p{font-size:19px;font-weight:800;color:#8b6851;margin:4px 0 0;letter-spacing:-.4px}
.village-game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.village-game-card{aspect-ratio:1.07;position:relative;overflow:hidden;border-radius:23px;isolation:isolate;border:2px solid #fff8eccc;box-shadow:0 4px 7px #7556391c;background:var(--card-color)}
.village-card-art{position:absolute;inset:0;background-image:url('assets/home-scenes.png');background-repeat:no-repeat;background-size:200% 300%;z-index:-2}
.village-game-card:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--card-color) 0%,transparent 35%,transparent 65%,#61482c19)}
.village-game-card h2{font-family:Nunito,'Trebuchet MS',sans-serif;font-size:23px;font-weight:1000;line-height:1.15;letter-spacing:-.8px;text-align:center;margin:10px 3px;color:#352525;paint-order:stroke fill;-webkit-text-stroke:3px #fff7eb77}
.game-street{--card-color:#d5edd1;--button-top:#8edc68;--button-bottom:#3a9c36;--button-shadow:#286d26}.game-street .village-card-art{background-position:100% 0%}
.game-lunch{--card-color:#f9c9d2;--button-top:#ffcb52;--button-bottom:#f4a006;--button-shadow:#bc6d04}.game-lunch .village-card-art{background-position:0% 50%}
.game-room{--card-color:#c1eaf4;--button-top:#60ccff;--button-bottom:#2484db;--button-shadow:#18599f}.game-room .village-card-art{background-position:100% 50%}
.game-cafe{--card-color:#e7d2f5;--button-top:#bba0ff;--button-bottom:#7b52d8;--button-shadow:#5333a3}.game-cafe .village-card-art{background-position:0% 100%}
.game-cafe h2{font-size:20px}
.game-delivery{--card-color:#c3eafa;--button-top:#5bd1ff;--button-bottom:#168be2;--button-shadow:#1665a9;grid-column:1/-1;aspect-ratio:auto;height:145px}.game-delivery .village-card-art{background-size:200% 600%;background-position:100% 100%}.game-delivery h2{text-align:left;margin:10px 16px}
.village-play{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);width:69%;height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:28px;background:linear-gradient(var(--button-top),var(--button-bottom));border:3px solid #fff9ee;color:#fff;font-family:Nunito,sans-serif;font-size:23px;font-weight:1000;line-height:1;text-shadow:0 2px 1px #71452255;box-shadow:0 3px 0 var(--button-shadow),0 5px 9px #59371536,inset 0 2px 1px #ffffff70;transition:filter .15s,transform .15s}
.village-play svg{width:19px;height:19px;filter:drop-shadow(0 1px 0 #80502b33)}
.village-play:hover{filter:brightness(1.06)}.village-play:active{transform:translate(-50%,2px);box-shadow:0 1px 0 var(--button-shadow)}.village-play:focus-visible{outline:3px solid #5c3719;outline-offset:3px}
.game-delivery .village-play{width:43%;bottom:12px}
.village-nav svg{width:25px;height:25px;fill:currentColor;flex-shrink:0}
#app[data-screen="home"]>.village-nav{max-width:510px;width:100%;left:50%;right:auto;transform:translateX(-50%);border:1px solid #f1e5d2;border-radius:27px 27px 0 0;background:linear-gradient(#fffdf7,#f6ecdc);box-shadow:0 -4px 15px #80553813;gap:0;justify-content:space-around;padding:10px 8px max(11px,env(safe-area-inset-bottom))}
#app[data-screen="home"]>.village-nav button{display:flex;flex-direction:column;gap:3px;font-family:Nunito,sans-serif;font-size:14px;font-weight:800;color:#746154;min-width:85px;min-height:53px;padding:2px 15px}
#app[data-screen="home"]>.village-nav button.active{color:#d97424;filter:drop-shadow(0 1px 0 #fff)}
#app:not([data-screen="home"]) .village-nav svg{width:18px;height:18px}
@media(max-width:540px){#app[data-screen="home"]{padding-top:0;background:#fff9ef}#app[data-screen="home"]>main{border:0;border-radius:0;box-shadow:none;padding:0 12px 90px}.village-cover{height:195px;border-radius:0;background-size:200% 600%;background-position:0 2%}.village-title{margin-top:-24px;margin-bottom:11px}.village-title h1{font-size:31px;letter-spacing:-1.4px;-webkit-text-stroke-width:6px}.village-title p{font-size:16px;margin-top:3px}.village-game-grid{gap:9px}.village-game-card{border-radius:20px}.village-game-card h2{font-size:20px;margin-top:9px}.game-cafe h2{font-size:17px;letter-spacing:-.7px}.village-play{height:40px;font-size:21px;bottom:10px;width:73%}.game-delivery{height:119px}.game-delivery h2{margin:9px 13px}.game-delivery .village-play{height:40px;width:42%;bottom:10px}#app[data-screen="home"]>.village-nav{border-radius:24px 24px 0 0;max-width:510px}}
@media(max-width:360px){.village-title h1{font-size:27px}.village-cover{height:175px}.village-game-card h2{font-size:18px}.game-cafe h2{font-size:15px}.village-play{font-size:19px;height:37px}.game-delivery{height:110px}}
.village-cover{overflow:hidden;background-image:none}
.village-cover:before{content:'';position:absolute;width:100%;aspect-ratio:1;left:0;top:50%;transform:translateY(-50%);background-image:url('assets/home-scenes.png');background-size:200% 300%;background-position:0 0}
.village-card-art{inset:auto 0;top:50%;transform:translateY(-50%);width:100%;aspect-ratio:1;background-size:200% 300%}
.game-delivery .village-card-art{background-size:200% 300%;background-position:100% 100%}