:root{font-family:'Nunito',system-ui,sans-serif;color:#214941;background:#ddf1e9;font-weight:700;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:280px}button,select{font:inherit;color:inherit;min-height:44px;border:2px solid #327d70;border-radius:12px;background:#fff8e6;cursor:pointer;padding:8px 12px;touch-action:manipulation}button:hover{background:#ffe6b1}button:focus-visible,select:focus-visible{outline:4px solid #e88b42;outline-offset:2px}button:disabled{cursor:default;opacity:.65}button.selected{background:#246b61;color:white}button[hidden],[hidden]{display:none!important}main{height:100dvh;min-height:330px;max-width:1200px;margin:auto;display:flex;flex-direction:column;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:5px}header{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-shrink:0}header strong{font-size:13px;letter-spacing:1px;line-height:1.1}header strong span{color:#bc562c;font-size:15px}nav{display:flex;gap:4px}nav button{padding:5px 9px;font-size:12px}#pause{font-size:20px;min-width:44px}#hud{display:flex;align-items:center;justify-content:space-between;gap:5px;border-radius:12px;background:#246b61;color:#fff8e6;padding:8px 10px;font-size:12px;min-height:40px;flex-shrink:0}#lessonName{max-width:48%;font-size:13px}#guide{display:flex;align-items:center;justify-content:center;gap:10px;min-height:32px;font-size:13px;flex-shrink:0;text-align:center}#timer{width:64px;height:8px;background:#c4d7c5;border-radius:5px;overflow:hidden;flex-shrink:0}#timer i{display:block;height:100%;background:#d47735;transform-origin:left;transform:scaleX(1)}#stage{background:#fff6df url('assets/stage.webp') center/100% 100% no-repeat;border:3px solid #aa6036;border-radius:16px;flex:1;min-height:0;position:relative;padding:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}#board{width:100%;height:100%;display:grid;gap:6px;max-width:850px;max-height:660px}.card{padding:3px;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#fff9e9;border:2px solid #b89364;box-shadow:0 3px #d5b384;border-radius:12px}.card img{max-height:100%;max-width:100%;object-fit:contain;pointer-events:none}.card.covered{background:repeating-linear-gradient(45deg,#347c70 0 8px,#3f897a 8px 16px);color:#fff4d6;font-size:27px;box-shadow:0 3px #1c5147}.card.matched{background:#e8f8d7;border-color:#60a164;box-shadow:0 3px #84ad60}.card.matched:after{content:'✓';position:absolute;right:3px;bottom:0;background:#e8f8d7;color:#246b61;font-size:16px}.bandPad{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:5px;border:3px solid #347c70;overflow:hidden;position:relative;box-shadow:0 4px #a87a48}.bandPad img{width:100%;height:calc(100% - 42px);max-height:210px;object-fit:contain;pointer-events:none}.bandPad small{font-size:12px}.bandPad strong{font-size:16px}.bandPad.lit{background:#ffd16b;border-color:#db6e2d;box-shadow:0 0 0 4px #fff3ae,0 5px #b66536}.bandPad.lit strong{color:#9b3d1d}.bandPad.feedback{background:#d5efb8}.station{border:2px solid #98744e;border-radius:10px;min-width:44px;min-height:44px;position:relative;overflow:hidden;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 3px #c8a36c}.station.color0{background-color:#ffe0a8}.station.color1{background-color:#c6e9df}.station.color2{background-color:#e5d5f1}.station.pattern0{background-image:radial-gradient(#9c765055 2px,transparent 3px);background-size:14px 14px}.station.pattern1{background-image:repeating-linear-gradient(90deg,transparent 0 9px,#9c765040 9px 13px)}.station .animal{height:64%;width:100%;object-fit:contain;pointer-events:none}.station .objects{height:36%;width:100%;display:flex;justify-content:center}.station .objects img{height:100%;max-width:50%;object-fit:contain;pointer-events:none}.station .objects img:only-child{max-width:70%}.station .number{position:absolute;top:2px;left:3px;background:#fff8e6;border-radius:5px;min-width:18px;font-size:11px}.station.correct{border:4px solid #398253}.station.wrong{border:4px solid #ce603b}#curtain{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#a5452c 0 20px,#bc5838 20px 40px);z-index:3;display:flex;align-items:center;justify-content:center;color:#fff5d9;letter-spacing:2px;font-size:20px}#bank{display:flex;justify-content:center;gap:8px;flex-shrink:0}#bank button{flex:1;max-width:280px}#bankNow{background:#ffc85b}#notice{font-size:11px;line-height:1.25;text-align:center;margin:0;min-height:14px;flex-shrink:0}dialog{border:3px solid #43796b;border-radius:20px;padding:16px;background:#fff9e9;color:#214941;max-width:min(560px,calc(100vw - 16px));width:100%;max-height:calc(100dvh - 16px);overflow:auto;text-align:center}dialog::backdrop{background:#1f433bdd}dialog button{margin:3px}dialog p{font-size:14px;line-height:1.5}h1,h2{line-height:1.12;margin:10px 0}.hero{position:relative;overflow:hidden;border-radius:12px;height:190px;background:#e4e9c9}.hero img{width:100%;height:100%;object-fit:cover}.hero h1{position:absolute;left:12px;top:5px;background:#fff8e6ed;padding:9px;border-radius:9px;font-size:26px;text-align:left;color:#246b61;text-shadow:none}#modeTabs{display:flex;gap:4px}#modeTabs button{flex:1;font-size:13px;margin:0;padding:7px 4px}.settings{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:12px 0}.settings label{display:flex;gap:5px;align-items:center;font-size:13px;min-height:44px}.settings input{width:22px;height:22px;accent-color:#246b61}#lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}#lessons button{margin:0;padding:8px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:78px;font-size:12px}#lessons button img{width:46px;height:46px;object-fit:contain}#lessons button small{color:#ad5b28}#continue{background:#ffd16b;width:100%;margin:12px 0}details{border-top:1px dashed #ad875c;padding-top:12px;margin-top:12px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center}#animals{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}#animals div{font-size:12px}#animals img{width:100%;height:92px;object-fit:contain}#bankRecords p{margin:4px;font-size:12px}#resultAnimal{width:140px;height:140px;object-fit:contain}body[data-motion=true] .bandPad.lit img{transform:translateY(-3px)}@media(max-width:360px){main{padding-left:6px;padding-right:6px}#stage{padding:6px}#board{gap:4px}nav button{padding:4px 6px;font-size:11px}#hud{font-size:11px;padding:6px}#lessonName{font-size:12px}.hero{height:154px}.hero h1{font-size:23px}dialog{padding:12px}.station{padding:3px}.bandPad small{font-size:11px}}@media(max-height:480px) and (min-width:580px){main{gap:3px}header{height:44px}#hud{min-height:30px;padding:3px 12px}#guide{min-height:25px}#stage{padding:6px}#bank{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:75%;z-index:2}#bank:not([hidden])~#notice{min-height:18px}.hero{height:130px}#lessons button{min-height:65px}#animals img{height:75px}}
.card:disabled,.station:disabled,.bandPad:disabled{opacity:1}
.performer{height:calc(100% - 42px);max-height:260px;min-height:0;width:100%;position:relative;display:flex;align-items:center;justify-content:center}.bandPad .bandAnimal{height:100%;width:100%;max-height:240px;object-fit:contain}.bandPad .instrument{position:absolute;bottom:0;right:7%;width:38%;height:28%;min-height:24px;max-height:65px;object-fit:contain}body[data-motion=true] .bandPad.lit .instrument{transform:none}