@font-face{font-family:Critters;src:url('assets/game-font.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}body{margin:0;background:#76cf90;color:#fff;font-family:Critters,system-ui,sans-serif}button,a,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffdb00;outline-offset:5px}.landscape{position:relative;min-height:640px;height:100svh;background:#5fdaee url('assets/background01.webp') center center/cover no-repeat;overflow:hidden}.navbar{position:relative;z-index:20;display:flex;align-items:center;gap:3vw;margin:16px;padding:10px 2vw;background:#282625;border-radius:24px;min-height:78px}.brand{flex:0 0 130px;display:flex;align-items:center}.brand img{width:130px;height:auto;max-height:58px;object-fit:contain}nav{display:flex;justify-content:space-between;align-items:center;gap:1.5vw;flex:1}nav>a,summary{text-transform:uppercase;font-size:clamp(16px,1.5vw,28px);font-weight:800;white-space:nowrap;min-height:44px;display:flex;align-items:center}summary{list-style:none;gap:10px}summary::-webkit-details-marker{display:none}summary::after{content:'▼';font-size:.8em}details.languages summary::after{display:none}details{position:relative}details[open]>summary{color:#ffdb00}.dropdown{position:absolute;top:calc(100% + 20px);left:0;min-width:220px;max-width:320px;background:#282625;border-radius:14px;padding:12px;box-shadow:0 8px 24px #0004;display:flex;flex-direction:column;gap:4px}.dropdown a,.dropdown span{font-family:system-ui,sans-serif;font-size:16px;padding:10px;border-radius:8px;line-height:1.4}.dropdown a:hover{background:#45413b}.dropdown span{color:#d4d0c9}.dropdown small{font-family:system-ui,sans-serif;font-size:13px;color:#ffdf71;padding:10px}.languages .dropdown{left:auto;right:0}.languages img{object-fit:contain}.hero-logo{position:absolute;left:50%;top:17%;transform:translateX(-50%);width:min(40vw,760px);height:auto;max-height:35%;object-fit:contain}#field{position:absolute;left:3%;right:3%;top:58%;bottom:18%;pointer-events:none}.tatari{position:absolute;bottom:0;width:clamp(100px,13vw,250px);height:100%;max-height:240px;object-fit:contain;object-position:center bottom;will-change:transform}.support{position:absolute;z-index:5;right:3%;bottom:5%;border:0;background:none;display:flex;align-items:center;color:#fff;padding:0}.support span{background:#282625;border-radius:28px 0 0 28px;padding:18px 28px 18px 32px;text-transform:uppercase;font-size:clamp(16px,1.5vw,28px);font-weight:800;margin-right:-18px}.support img{width:clamp(70px,6.4vw,125px);height:auto}.scene-controls{position:absolute;bottom:3%;left:3%;z-index:6}.scene-controls button{background:#282625d9;color:#fff;border:0;border-radius:20px;padding:10px 16px;min-height:44px;font-family:system-ui,sans-serif;font-size:14px}.menu-toggle{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;top:-100px;left:20px;z-index:50;background:#282625;padding:12px}.skip:focus{top:10px}dialog{max-width:min(90vw,440px);border:0;border-radius:20px;padding:28px;color:#282625;font-family:system-ui,sans-serif;background:#fffbee}dialog::backdrop{background:#0006}dialog p{line-height:1.5}dialog button{min-height:44px;border:0;border-radius:10px;background:#282625;color:white;padding:10px 20px}
@media(max-width:1100px){.navbar{gap:16px}.brand,.brand img{width:100px;flex-basis:100px}nav{gap:12px}nav>a,summary{font-size:16px}summary{gap:5px}}
@media(max-width:900px){.landscape{min-height:640px}.navbar{margin:12px;border-radius:18px;padding:10px 16px;justify-content:space-between;min-height:66px}.brand,.brand img{width:100px;flex-basis:100px}.menu-toggle{display:flex;align-items:center;min-height:44px;background:none;border:0;color:#fff;font-size:20px}nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:16px;background:#282625;border-radius:18px;max-height:calc(100svh - 110px);overflow:auto}nav.open{display:flex;flex-direction:column;align-items:stretch;gap:4px}nav>a,summary{font-size:20px;padding:8px 12px}details .dropdown{position:static;min-width:0;max-width:none;box-shadow:none;padding:0 12px 10px;background:#36332f;margin:4px 0 8px}.languages summary::after{content:'Language';display:block;font-size:16px}.hero-logo{top:21%;width:80%;max-height:27%}#field{left:2%;right:2%;top:61%;bottom:20%}.tatari{width:clamp(90px,26vw,160px);max-height:170px}.support{right:4%;bottom:7%}.support span{font-size:16px;padding:14px 22px}.support img{width:76px}.scene-controls{bottom:2%;left:4%}.scene-controls button{font-size:12px}}
@media(max-height:500px) and (min-width:650px){.landscape{min-height:480px}.hero-logo{top:24%;width:35%}#field{top:60%;bottom:15%}.support{bottom:2%}.support img{width:65px}}
/* Headline/navigation font remains the supplied English game font. */
.dropdown a,.dropdown span,.dropdown small,dialog{font-family:Poppins,system-ui,sans-serif}.dropdown{left:auto;right:0;max-width:min(320px,calc(100vw - 32px))}.support{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}.tatari{width:clamp(150px,19.5vw,375px);height:auto;max-height:none;aspect-ratio:1;object-fit:contain;object-position:center bottom}#field{top:50%;bottom:18%}
@media(max-width:900px){.tatari{width:clamp(180px,52vw,320px)}#field{top:45%;bottom:21%}.support{left:50%;right:auto;bottom:5%;max-width:94%}.support span{padding-left:22px}}
/* Blueflick's broad canvas needs more width for comparable visible height. */
.tatari[data-name="Blueflick"]{width:clamp(210px,27.3vw,525px)}
@media(max-width:900px){.tatari[data-name="Blueflick"]{width:clamp(252px,72.8vw,448px)}}
/* Cheerling sets the visual reference; reduce bulkier bodies and lower the lane. */
.tatari{--body-scale:.85;width:clamp(calc(150px * var(--body-scale)),calc(19.5vw * var(--body-scale)),calc(375px * var(--body-scale)))}
.tatari[data-name="Cheerling"],.tatari[data-name="Sparkit"],.tatari[data-name="Punchimp"]{--body-scale:1}
.tatari[data-name="Blueflick"]{--body-scale:1.15;width:clamp(172.5px,22.425vw,431.25px)}
#field{top:65%;bottom:14%}
@media(max-width:900px){.tatari{width:clamp(calc(180px * var(--body-scale)),calc(52vw * var(--body-scale)),calc(320px * var(--body-scale)))}.tatari[data-name="Blueflick"]{width:clamp(207px,59.8vw,368px)}#field{top:64%;bottom:20%}}
/* One centered Ko-fi badge shared by home and status pages. */
.support{left:50%;right:auto;transform:translateX(-50%);gap:0;isolation:isolate}.support span{line-height:1;border-radius:24px;padding:18px 32px;margin-right:-28px}.support img{display:block;position:relative;z-index:1;flex-shrink:0;width:clamp(96px,7.3vw,140px);height:auto;object-fit:contain}
@media(max-width:900px){.support span{padding:14px 24px;margin-right:-24px}.support img{width:96px}}
/* Keep the original landscape, logo and shared navigation; the field is the stage. */
#field{left:2%;right:2%;top:62%;bottom:15%;isolation:isolate}
.home-tatari{position:absolute;pointer-events:none;transform-origin:center;will-change:left,transform}
.home-tatari canvas,.home-tatari img{display:block;width:100%;height:100%;object-fit:contain}
.home-tatari [hidden]{display:none}
.scene-controls{bottom:2%;left:2%;z-index:6}
.scene-controls button{font-family:Poppins,system-ui,sans-serif;background:#282625;color:#fff;border:1px solid #ffffff70;border-radius:10px}
@media(max-width:900px){#field{top:62%;bottom:18%}.scene-controls{bottom:2%;left:3%}.scene-controls button{font-size:12px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.home-tatari{will-change:auto}}