/* Hi Leo! illustrated garden landing */
body{background:#fffcf3}header{position:relative;z-index:5;max-width:1180px;margin:24px auto -110px;padding:12px 22px;border-radius:24px;background:#fffdf6;box-shadow:0 5px 0 #79582c16;display:flex;align-items:center;gap:20px;width:calc(100% - 48px)}
header .brand{flex:0 0 auto;margin:0;padding:0}header .header-brand-logo{width:190px;height:auto;max-width:none}header .header-actions{margin-left:auto;gap:8px;display:flex}header .header-actions button{font-size:12px;padding:12px;border-radius:18px}.garden-nav{display:flex;gap:8px;align-items:center}.garden-nav button{border:0;background:none;font-family:'Lilita One',sans-serif;font-size:20px;padding:12px;color:#514332}.garden-nav button:hover{background:#fff0b2;border-radius:16px}main{max-width:none;padding:0;margin:0}.garden-hero{position:relative;min-height:650px;padding:155px max(5vw,24px) 65px;background:#f9dc78 url('assets/leo-garden-hero.png') center 58%/cover no-repeat;isolation:isolate}.hero-panel{position:relative;z-index:1;background:#fffdf3f5;max-width:495px;padding:32px 36px 35px;border-radius:24px 42px 28px 38px;transform:rotate(-2deg);box-shadow:0 8px 0 #704c2515}.hero-panel .eyebrow{font-size:12px;letter-spacing:2px;margin:0 0 16px;color:#9c702b}.hero-panel h1{font-size:49px;line-height:1.08;margin:0 0 20px}.hero-panel p{font-size:17px;line-height:1.6;margin:0 0 22px;color:#75634c}.hero-cta,.meet-leo button{background:#f4c44e;border:0;border-radius:15px;padding:16px 26px;font-family:'Lilita One',sans-serif;font-size:22px;color:#514332;box-shadow:0 4px 0 #d3a338}.hero-leo{position:absolute;bottom:30px;left:52%;width:230px;height:320px;filter:drop-shadow(0 8px 2px #61411b20)}.hero-leo svg,.meet-portrait svg{width:100%;height:100%}.games-section{max-width:1050px;margin:0 auto;padding:46px 26px 24px;scroll-margin-top:20px}.welcome{margin:0 0 30px;padding:0}.welcome h2{font-size:43px;margin:10px 0 12px}.welcome p{margin:10px 0}.welcome .eyebrow{font-size:12px;letter-spacing:2px;color:#a27b32}.game-choices{gap:26px}.game-choice{border-radius:28px}.choice-art{height:195px}.home-bottom{margin-top:24px}.meet-leo{max-width:998px;margin:20px auto 40px;border-radius:34px;background:#e5eddc;display:flex;align-items:center;justify-content:center;gap:48px;padding:28px 40px;scroll-margin-top:20px}.meet-portrait{width:210px;height:235px;flex-shrink:0}.meet-leo h2{font-size:35px;margin:10px 0}.meet-leo p{line-height:1.65}.meet-leo .eyebrow{font-size:12px;letter-spacing:2px;color:#567655}.meet-leo button{font-size:18px;padding:12px 22px}.home-footer{padding:12px 20px 30px}.legal-footer{padding-bottom:24px}body.playing header{margin:16px auto 20px}body.playing .garden-nav{display:none}#game{max-width:1000px;margin:auto;padding:12px 24px 30px}.hero-panel .ja{font-size:13px;line-height:1.6;letter-spacing:0}.welcome h2 .ja,.meet-leo h2 .ja{font-size:15px}
@media(min-width:1500px){.hero-panel{margin-left:calc((100vw - 1350px)/2)}.garden-hero{min-height:710px}}
@media(max-width:900px){header{gap:8px;padding:12px 16px}.garden-nav button{font-size:16px;padding:8px}header .header-brand-logo{width:155px}.hero-panel{max-width:430px}.hero-panel h1{font-size:42px}.hero-leo{left:62%;width:190px;height:270px}.meet-leo{margin:20px 24px 40px;gap:24px}}
@media(max-width:600px){header{width:calc(100% - 24px);margin:12px 12px -125px;flex-wrap:wrap;padding:10px 12px;border-radius:20px;gap:4px}header .brand{width:auto;flex:1;text-align:left}header .header-brand-logo{width:155px;height:auto}header .header-actions{width:auto;justify-content:flex-end;gap:4px}header .header-actions button{font-size:10px;padding:9px 7px;min-height:34px}.garden-nav{order:3;width:100%;justify-content:center;border-top:1px solid #efe5cf;gap:16px;padding-top:3px}.garden-nav button{font-size:16px;padding:6px 8px}.garden-hero{min-height:640px;padding:153px 22px 195px;background-position:64% center}.hero-panel{padding:24px;max-width:360px;transform:rotate(-1.5deg);border-radius:24px}.hero-panel h1{font-size:36px;margin-bottom:14px}.hero-panel p{font-size:14px;line-height:1.5;margin-bottom:16px}.hero-panel .eyebrow{font-size:10px;margin-bottom:12px}.hero-cta{font-size:20px;padding:12px 23px}.hero-leo{width:135px;height:180px;left:auto;right:35px;bottom:10px}.games-section{padding:30px 20px 15px}.welcome h2{font-size:31px}.welcome p{font-size:14px}.game-choices{gap:22px}.choice-art{height:175px}.meet-leo{margin:10px 20px 28px;padding:24px;gap:10px;flex-direction:column;text-align:center}.meet-portrait{width:145px;height:155px}.meet-leo h2{font-size:29px}.meet-leo p{font-size:14px}.meet-leo .eyebrow{margin:4px}.home-bottom{flex-wrap:wrap;gap:10px}body.playing header{margin:12px;width:calc(100% - 24px)}body.playing .brand{width:auto}#game{padding:8px 12px 24px}}

/* A quiet play mat inside the same illustrated garden. */
body.playing{background:#e2e9b0 url('assets/leo-garden-hero.png') center center/cover fixed no-repeat;min-height:100dvh}
body.playing #game{max-width:1080px;padding-bottom:20px}
body.playing .game-toolbar{background:#fffdf6f5;border:1px solid #eee0bd;border-radius:20px;padding:10px 14px;box-shadow:0 4px 0 #79582c12}
body.playing .play{background:#fffcf3;border:3px solid #ead59a;box-shadow:0 9px 0 #79582c20,0 16px 35px #51433215}
body.playing .pieces{background:#f7f0dc;border-color:#d9bd73}
body.playing .parent-tip{background:#fffdf6f5;border-radius:18px;padding:12px 16px;color:#67553e}
body.playing .legal-footer{background:#fffdf6ed;padding:12px 16px;margin-top:12px}
@media(max-width:600px){body.playing{background-position:64% center}body.playing #game{padding:0 12px 12px}body.playing .game-toolbar{padding:8px;border-radius:16px}body.playing .play{border-width:2px}body.playing .parent-tip{padding:10px}}
/* Illustrated controls and a viewport-sized mobile play mat. */
.ui-icon{display:inline-block;width:28px;height:28px;vertical-align:middle;object-fit:contain}#sound{min-width:44px!important;width:44px;height:44px;padding:8px!important;flex-shrink:0}#phrase,#settings-open{display:inline-flex;align-items:center;justify-content:center;gap:8px}.card-back .ui-icon{width:45%;height:auto}.home-footer .ui-icon{width:24px;height:24px}
@media(max-width:600px){
 body.playing{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background-attachment:scroll}
 body.playing header{flex-wrap:nowrap;flex:none;width:calc(100% - 16px);margin:4px 8px 6px;padding:4px 8px;gap:4px;border-radius:18px}
 body.playing header .brand{min-width:0;flex:1}body.playing .header-brand-logo{width:125px;max-width:100%}
 body.playing header .header-actions{flex:none;width:auto;gap:4px}body.playing #language{min-width:0;padding:6px;font-size:10px;min-height:40px}
 body.playing main{flex:1;min-height:0;display:flex}body.playing #game{width:100%;min-height:0;display:flex;flex-direction:column;padding:0 8px 6px}
 body.playing .game-toolbar{flex:none;padding:3px 8px;margin-bottom:6px;min-height:44px;flex-wrap:nowrap}body.playing .game-toolbar button{padding:6px 10px;min-height:36px}
 body.playing .play{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px;border-radius:20px}
 body.playing .play-head{flex:none;margin:0 0 5px;gap:6px}body.playing .play-head h1{font-size:16px;line-height:1.15}
 body.playing #progress.collection{min-width:108px;max-width:112px;min-height:40px;padding:3px 6px}.collection-cards{min-height:20px;padding-top:0;gap:3px}.collected-pair{width:15px}.collection-count{font-size:10px}
 body.playing #board{flex:1;min-height:0;container-type:size;position:relative}
 body.playing .grid.pairs{height:100%;width:100%;max-width:none}
 body.playing .pairs .card{width:min(24%,13cqh);max-width:none}
 body.playing .leo-companion{flex:none;min-height:32px;height:32px;margin:4px 0 0;gap:8px}body.playing #game-leo{width:27px;height:32px}body.playing #status{font-size:10px;line-height:1.2;min-height:0;max-width:270px}
 body.playing .parent-tip{flex:none;margin:5px 0 0;padding:0;background:none}body.playing .parent-tip>span{display:none}body.playing #phrase{min-height:32px;padding:3px 14px;font-size:13px;background:#fffdf3}body.playing #phrase .ui-icon{width:22px;height:22px}
 body.playing>.legal-footer{display:none}
 body.playing #board:has(.targets){display:flex;flex-direction:column;justify-content:space-evenly;gap:4px}
 body.playing .grid.targets,body.playing .grid.pieces{width:100%;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;padding:8px;margin:0;max-width:none}
 body.playing .targets .card{width:min(100%,25cqh);max-width:90px;grid-column:auto!important}body.playing .pieces .card{width:min(100%,23cqh);max-width:85px;grid-column:auto!important}
 body.playing .hint{margin:0;font-size:10px}body.playing .clear-leo{height:min(25dvh,150px);width:140px}body.playing #finished h2{font-size:27px}body.playing #finished{padding:12px}body.playing #finished button{min-height:40px;margin-top:8px}
 body.playing.show-japanese .ja{font-size:9px;line-height:1.2;margin-top:2px}
}
@media(max-width:600px){body.playing #game{margin:0;flex:1}body.playing main{width:100%;align-items:stretch}}
/* Small cards: restrained edge shadow and proportional corners. */
@media(max-width:600px){
 body.playing .pairs .card,body.playing .target{box-shadow:0 2px 2px #5143321a;border-radius:4px}
 body.playing .pair>svg,body.playing .target>svg{border-radius:4px}
 body.playing #board:not(.face-down) .pair>svg,body.playing #board:not(.face-down) .target>svg{transform:none;backface-visibility:visible}
 body.playing .card-back{border-radius:4px;border-width:2px}
}