:root{color-scheme:light;font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;background:#a5dff2;color:#65472f}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}
.scene{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;overflow:hidden;background:#a5dff2;user-select:none;-webkit-user-select:none}
.topbar{position:absolute;top:0;left:0;width:100%;padding:calc(18px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:10}
h1{margin:0;font-size:clamp(17px,2.3vw,25px);font-weight:800;letter-spacing:.035em}h1 span{margin-left:.15em}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#pause{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:#fff9;display:grid;place-items:center}#pause svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}button:focus:not(:focus-visible){outline:none}button:focus-visible{outline:3px solid #65472f;outline-offset:4px}
.cloud{position:absolute;width:clamp(110px,20vw,210px);height:clamp(32px,5.5vw,58px);top:24%;left:23%;background:white;border-radius:100px;z-index:1}.cloud:before,.cloud:after{content:"";position:absolute;background:white;border-radius:50%;bottom:14%}.cloud:before{width:47%;aspect-ratio:1;left:16%}.cloud:after{width:35%;aspect-ratio:1;right:12%;bottom:12%}
.meadow{position:absolute;inset:43% 0 0;background:#b6db70;z-index:1}
.grass{position:absolute;width:38px;height:27px;z-index:2}.grass i{position:absolute;bottom:0;left:45%;height:23px;width:6px;border-radius:9px;background:#8db64e;transform-origin:bottom}.grass i:first-child{transform:rotate(-32deg);height:18px}.grass i:last-child{transform:rotate(33deg);height:17px}.grass-one{left:9%;top:57%}.grass-two{left:72%;top:72%;transform:scale(.85)}.grass-three{left:40%;top:90%;transform:scale(.8)}
.animal{position:absolute;left:0;top:0;width:clamp(130px,28vw,290px);will-change:transform;z-index:3;visibility:hidden;pointer-events:auto;border:0;padding:0;background:transparent;touch-action:manipulation}.animal-cat{width:clamp(115px,24vw,250px);z-index:4}.facing{display:block;width:100%;transform-origin:center bottom}.animal img{display:block;width:100%;height:auto;object-fit:contain}.load-error{position:absolute;bottom:20px;left:20px;right:20px;z-index:20;padding:16px;background:#fff;border-radius:14px;text-align:center}.load-error button{border:1px solid currentColor;background:white;border-radius:8px;padding:8px;margin-left:10px}
@media(orientation:landscape) and (max-height:500px){.topbar{padding-top:calc(10px + env(safe-area-inset-top))}.animal{width:clamp(100px,23vw,190px)}.animal-cat{width:clamp(90px,20vw,165px)}.cloud{top:26%;width:130px;height:35px}}
@media(prefers-reduced-motion:reduce){.animal{will-change:auto}}

[hidden]{display:none!important}
.round-button{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:#fff9;display:grid;place-items:center}
.round-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.title-screen{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.title-content{width:min(90vw,650px);text-align:center}
.title-content h1{font-size:clamp(28px,5.5vw,58px);line-height:1.4;letter-spacing:.015em;text-wrap:balance}
.title-content h1 span{display:block;color:#956033;font-size:1.13em}
.title-subtitle{font-size:clamp(14px,2.5vw,20px);font-weight:700;margin:14px 0 0}
.title-animals{height:clamp(140px,24vh,230px);display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,4vw,40px);margin:26px 0}
.title-animals img{width:44%;height:100%;object-fit:contain;object-position:center bottom}.title-animals img:last-child{width:39%}
.start-button{border:3px solid #65472f;border-radius:60px;background:#fff9d8;min-width:190px;min-height:64px;padding:12px 32px;font-size:27px;font-weight:800;box-shadow:0 5px 0 #65472f}.start-button span{font-size:20px;margin-left:12px}.start-button:active{transform:translateY(3px);box-shadow:0 2px 0 #65472f}
.word-card{position:absolute;z-index:8;left:50%;top:45%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(12px,3vw,32px);width:min(88vw,650px);padding:clamp(18px,4vw,32px);border:3px solid #806044;border-radius:28px;background:#fffdf4;box-shadow:0 6px 0 #80604426;pointer-events:none}
.word-card>img{width:100%;height:min(25vh,220px);object-fit:contain}
.word-text p{margin:0}.word-text{min-width:0;text-align:center}
#word-english{font-size:clamp(38px,9vw,76px);line-height:1.1;font-weight:850;color:#82552e}
#word-japanese{font-size:clamp(25px,6vw,42px);font-weight:750;margin-top:10px}
#audio-error{font-size:clamp(12px,2vw,15px);line-height:1.5;margin-top:10px;color:#86532e}
@media(orientation:landscape) and (max-height:500px){.title-content{width:min(90vw,620px)}.title-content h1{font-size:30px;line-height:1.2}.title-content h1 span{display:inline}.title-subtitle{margin-top:7px;font-size:14px}.title-animals{height:105px;margin:12px 0}.title-animals img{width:30%}.title-animals img:last-child{width:26%}.start-button{min-height:50px;font-size:23px;padding:7px 28px}.word-card{top:42%;width:min(65vw,520px);padding:14px 24px;border-radius:22px}.word-card>img{height:110px}#word-english{font-size:52px}#word-japanese{font-size:29px;margin-top:5px}}

.tree-slot{position:absolute;left:69%;top:47%;transform:translate(-50%,-100%);width:clamp(150px,33vw,307.5px);max-width:calc(37.6svh - 12px);z-index:2;aspect-ratio:4/5}.tree{display:block;width:100%;height:100%;border:0;padding:0;background:transparent}.tree img{display:block;width:100%;height:auto}
@media(orientation:landscape) and (max-height:500px){.tree-slot{max-width:calc(39.2svh - 12px);left:76%;top:49%}}

.apple{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);width:24%;min-width:44px;aspect-ratio:12/13;border:0;padding:0;background:transparent;z-index:1}.apple img{display:block;width:100%;height:auto;transform-origin:center}