:root { font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; color:#303b45; background:#e6f5ff; font-synthesis:none; -webkit-text-size-adjust:100%; }
* { box-sizing:border-box; }
body { min-height:100vh; min-height:100dvh; margin:0; background:radial-gradient(circle at 15% 12%,#fff 0 6px,transparent 7px),linear-gradient(160deg,#f5fcff,#cfeeff); }
button,select,input { font:inherit; } button { touch-action:manipulation; } [hidden] { display:none!important; }
.app-shell { min-height:100vh; min-height:100dvh; }
.screen { width:min(100%,960px); min-height:100vh; min-height:100dvh; margin:auto; padding:max(30px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(35px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.back-link { position:fixed; z-index:10; top:max(10px,env(safe-area-inset-top)); left:max(10px,env(safe-area-inset-left)); padding:8px 12px; border:2px solid #a6bd7d; border-radius:99px; color:#46573b; background:#ffffffdf; font-size:.8rem; font-weight:900; text-decoration:none; }
.home-screen,.result-screen { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.corner-voice { position:absolute; top:10px; right:15px; display:flex; align-items:center; gap:5px; color:#68725c; font-size:.68rem; opacity:.75; }
.corner-voice select { max-width:130px; min-height:34px; border:1px solid #a6bd7d; border-radius:8px; background:#ffffffc9; font-size:16px; }
.bus-mark { display:flex; align-items:center; justify-content:center; gap:4px; width:230px; height:112px; margin-top:20px; padding:15px; border-radius:28px; background:#ffd95c; box-shadow:0 7px 0 #d39b2f; font-size:3.1rem; }
.bus-mark span:first-child { display:grid; place-items:center; width:62px; height:62px; border:3px solid #326487; border-radius:8px; background:white; font-size:2.7rem; transform:rotate(-4deg); }
.eyebrow { margin:22px 0 4px; color:#56802e; font-weight:900; letter-spacing:.1em; }
h1,h2 { margin:0; color:#35402f; line-height:1.14; } h1 { font-size:clamp(2.5rem,9vw,4.8rem); } .home-copy { margin:13px 0 20px; font-size:clamp(1rem,3vw,1.3rem); font-weight:800; line-height:1.7; }
fieldset { width:100%; margin:0 0 22px; padding:0; border:0; } legend { margin:0 auto 11px; font-weight:900; }
.level-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.level-card { position:relative; display:grid; place-items:center; min-height:128px; padding:11px 7px; border:3px solid #b8c990; border-radius:22px; background:#ffffffd9; cursor:pointer; }
.level-card input { position:absolute; opacity:0; } .level-card.selected { border-color:#e8923d; background:white; box-shadow:0 5px 0 #efc486; transform:translateY(-3px); }
.level-icon { font-size:2.35rem; } .level-card small { color:#66715e; font-size:.75rem; }
.game-header { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:14px; }
.round-button { width:54px; height:54px; border:3px solid #91aa69; border-radius:50%; background:white; font-size:1.7rem; }
.game-header p { margin:0 0 4px; font-weight:900; }.progress-track { height:14px; overflow:hidden; border:2px solid #7e9862; border-radius:99px; background:white; }.progress-track span { display:block; width:0; height:100%; background:#e6b93f; transition:width .3s; }.level-badge { padding:9px 12px; border-radius:99px; background:white; font-weight:900; }
.bus-scene { display:flex; align-items:end; justify-content:center; min-height:115px; margin:20px auto 10px; padding:8px 20px; border-bottom:10px dashed #f2d35e; font-size:3rem; overflow:hidden; }.bus-stop{font-size:3.5rem}.game-bus{position:relative; display:flex; align-items:end; width:235px; min-width:235px; transform-origin:center bottom}.game-bus>span{font-size:7rem; line-height:1}.bus-passengers{position:absolute; z-index:2; top:5px; left:57px; display:grid; grid-template-columns:repeat(3,30px); grid-auto-rows:27px; align-items:center; justify-content:center; width:94px; min-width:0; overflow:visible; font-size:1.2rem}.bus-passengers>span{display:grid; place-items:center; min-width:0; line-height:1}.bus-bump{animation:bus-bump .4s ease}.bus-depart{animation:bus-depart 1.5s ease-in-out both}
.game-screen h2 { text-align:center; font-size:clamp(1.55rem,5vw,2.2rem); }.instruction { margin:9px 0; text-align:center; color:#48662f; font-size:clamp(1.2rem,4vw,1.6rem); font-weight:900; }.listen-button { display:block; min-height:48px; margin:0 auto 18px; padding:7px 16px; border:3px solid #427aa7; border-radius:15px; color:white; background:#5795c6; font-weight:900; }
.sorting-boxes { display:flex; justify-content:center; gap:clamp(10px,3vw,22px); }.sorting-box { display:grid; place-items:center; min-width:clamp(96px,22vw,150px); min-height:112px; border:4px solid #a47f43; border-radius:18px; background:#fff3bf; box-shadow:0 6px 0 #d4a85b; cursor:pointer; }.sorting-box span { font-size:1.5rem; }.sorting-box b { font-size:3.2rem; }.sorting-box small { font-weight:800; }.sorting-box.target { border-style:dashed; }.sorting-box.correct { background:#ddf3ca; border-color:#4e8a42; transform:scale(1.05); }
.card-help { margin:22px 0 9px; text-align:center; font-size:.85rem; font-weight:800; }.word-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }.word-card { display:grid; place-items:center; width:clamp(96px,18vw,130px); min-height:125px; padding:8px; border:4px solid #b59a73; border-radius:22px; background:white; box-shadow:0 6px 0 #d8c39f; cursor:pointer; }.word-card>span { font-size:clamp(3.2rem,8vw,4.5rem); }.word-card small { font-weight:900; }.word-card.selected { border-color:#397caf; background:#eaf6ff; transform:translateY(-3px); }.word-card.try-again { animation:shake .3s; }.feedback { min-height:2em; margin:20px 0 0; color:#76511c; text-align:center; font-size:1.15rem; font-weight:900; }
.word-cards.classification-mode .word-card { width:clamp(150px,28vw,190px); min-height:155px; cursor:default; }
.word-cards.classification-mode .word-card>span { font-size:clamp(4.7rem,12vw,6rem); }
.word-cards.classification-mode .word-card small { font-size:1.15rem; }
.result-screen { justify-content:center; }.result-scene { font-size:clamp(3rem,10vw,6rem); }.result-screen h2 { font-size:clamp(2rem,7vw,4rem); }.result-screen p:not(.eyebrow) { font-weight:800; }.primary-button { min-width:210px; min-height:62px; margin-top:22px; border:4px solid #95552d; border-radius:99px; color:white; background:#e8923d; box-shadow:0 6px 0 #b96a32; font-size:1.25rem; font-weight:900; }.text-button { margin-top:18px; padding:12px; border:0; background:transparent; color:#53604b; font-weight:800; text-decoration:underline; }
button:focus-visible,a:focus-visible { outline:5px solid #175fbe; outline-offset:4px; }
@keyframes shake { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes bus-bump { 35%{transform:translateY(-7px) rotate(-2deg)} 70%{transform:translateY(0) rotate(2deg)} }
@keyframes bus-depart { 0%{transform:translateX(25vw)} 25%{transform:translateX(0)} 65%{transform:translateX(0)} 100%{transform:translateX(-55vw)} }
@media(max-width:620px){.screen{padding-top:max(20px,env(safe-area-inset-top));}.bus-mark{margin-top:34px}.level-grid{grid-template-columns:repeat(2,1fr)}.level-card{min-height:108px}.game-header{grid-template-columns:52px 1fr}.level-badge{grid-column:1/-1;justify-self:center}.bus-scene{margin-top:8px;min-height:90px}.game-bus{width:190px;min-width:190px}.game-bus>span{font-size:5.8rem}.bus-passengers{top:3px;left:46px;grid-template-columns:repeat(3,25px);grid-auto-rows:23px;width:78px;font-size:1rem}.sorting-box{min-width:88px;min-height:98px}.sorting-box b{font-size:2.7rem}.word-card{flex:0 1 calc(33.333% - 10px);min-width:88px;min-height:110px}}
@media(orientation:landscape) and (max-height:620px){.bus-mark{display:none}.home-copy{margin-block:5px 10px}.eyebrow{margin-top:4px}.level-card{min-height:78px;grid-template-columns:auto 1fr}.level-icon{grid-row:1/3}.bus-scene{display:none}.game-screen h2{margin-top:8px}.sorting-box{min-height:84px}.word-card{min-height:90px}.word-card>span{font-size:3rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.row-button.selected,.level-card.selected,.sorting-box.correct,.word-card.selected{transform:none}}