@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap');
:root{--ink:#443c32;--paper:#fff9e1;--orange:#e57948;--gold:#f1c34b;--green:#699260;--blue:#6ca8bb;--shadow:rgba(68,53,36,.18)}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;overflow-x:hidden;color:var(--ink);background:linear-gradient(#b7dfdc 0 45%,#dbe9ad 45%);font-family:"ZCOOL KuaiLe","PingFang SC",sans-serif;user-select:none;-webkit-tap-highlight-color:transparent}button,a{font:inherit;color:inherit}button:focus-visible,a:focus-visible{outline:5px solid rgba(229,121,72,.5);outline-offset:3px}
.parade-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}.parade-bg i{position:absolute;bottom:-65px;width:250px;height:210px;border-radius:50% 50% 0 0;background:#92ba70;opacity:.38}.parade-bg i:nth-child(1){left:-40px}.parade-bg i:nth-child(2){left:35%;transform:scale(.75)}.parade-bg i:nth-child(3){right:-35px}.parade-bg span{position:absolute;color:rgba(255,255,255,.75);font-size:18px}.parade-bg span:nth-of-type(1){left:12%;top:18%}.parade-bg span:nth-of-type(2){right:13%;top:11%}.lineup-app{position:relative;z-index:2;width:min(100%,900px);min-height:100dvh;margin:0 auto}.lineup-screen{display:none;min-height:100dvh;padding:20px clamp(14px,5vw,40px);animation:enter .45s cubic-bezier(.2,.8,.2,1)}.lineup-screen.is-active{display:flex}
.welcome{position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center}.back-link{position:absolute;left:20px;top:22px;padding:8px 13px;border-radius:18px;color:#517053;background:rgba(255,255,255,.62);text-decoration:none}.parade-preview{min-width:310px;padding:17px 21px;display:flex;align-items:center;justify-content:center;gap:7px;border:7px solid #fff0ba;border-radius:34px 14px;background:#f8d487;box-shadow:0 10px 0 rgba(73,69,42,.13),0 18px 30px var(--shadow);transform:rotate(-2deg)}.parade-preview span{font-size:63px;filter:drop-shadow(0 5px 2px rgba(62,48,33,.13))}.parade-preview i{color:#b2703f;font-size:24px;font-style:normal}.kicker{margin:18px 0 5px;color:#557955;letter-spacing:.15em}.welcome h1{margin:0;font-family:"Ma Shan Zheng",cursive;font-size:clamp(58px,15vw,88px);line-height:.87;font-weight:400;text-shadow:0 4px rgba(255,255,255,.65)}.welcome h1 em{color:var(--orange);font-style:normal}.intro{font-size:clamp(18px,4vw,22px);line-height:1.55}.primary-button{min-width:224px;min-height:63px;padding:9px 13px 9px 27px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-radius:40px;color:white;background:var(--orange);box-shadow:0 8px 0 #b65736,0 14px 25px var(--shadow);font-size:22px;cursor:pointer}.primary-button b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--orange);background:white}.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #b65736}.challenge-button{margin-top:18px;padding:9px 17px;display:flex;align-items:center;gap:9px;border:2px solid rgba(72,94,58,.14);border-radius:21px;color:#4b6e4e;background:rgba(255,249,225,.76);box-shadow:0 4px 0 rgba(62,77,48,.1);cursor:pointer}.challenge-button b{padding:3px 7px;border-radius:8px;color:white;background:var(--green);font-size:12px}.quiet-button{margin-top:21px;border:0;color:#527253;background:transparent;cursor:pointer}
.game{position:relative;flex-direction:column;align-items:center;padding-top:14px}.game-header{width:100%;display:flex;align-items:center;gap:7px}.circle-button{flex:0 0 43px;height:43px;border:2px solid rgba(63,72,43,.08);border-radius:50%;background:rgba(255,249,225,.94);box-shadow:0 4px 0 rgba(63,72,43,.12);font-size:20px;cursor:pointer}.progress{flex:1;display:flex;justify-content:center;gap:3px}.progress i{width:clamp(6px,1.5vw,13px);height:9px;border-radius:8px;background:rgba(255,255,255,.6)}.progress i.done{background:var(--gold)}.progress i.current{background:var(--orange);transform:scaleY(1.25)}.animal-count{min-width:68px;padding:7px 9px;border-radius:19px;background:var(--paper);box-shadow:0 3px 0 rgba(63,72,43,.1);font-size:14px}.animal-count span{color:var(--orange)}
.task-card{width:min(100%,700px);margin:15px 0 10px;padding:10px 13px;display:flex;align-items:center;gap:11px;border-radius:23px;background:var(--paper);box-shadow:0 6px 0 rgba(70,69,43,.1),0 12px 23px var(--shadow)}.guide{font-size:43px}.task-card>div:nth-child(2){flex:1}.task-card p{margin:0;color:#71865b;font-size:13px}.task-card h2{margin:1px 0 0;font-size:clamp(20px,4vw,27px);font-weight:400}.listen-all{padding:10px 12px;border:0;border-radius:16px;color:#735d35;background:#ffe19a;cursor:pointer}
.clue-board{width:min(100%,740px);padding:14px;border:6px solid rgba(255,255,255,.74);border-radius:28px 12px;background:rgba(255,249,225,.72);box-shadow:0 8px 0 rgba(65,70,43,.1)}.clue-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.clue-heading h3{margin:0;font-size:20px;font-weight:400}.clue-heading span{color:#7b765e;font-size:12px}.clue-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.clue-card{min-height:71px;padding:7px 8px 7px 13px;display:flex;align-items:center;gap:9px;border:3px solid white;border-radius:18px 8px;background:#fffdf2;box-shadow:0 4px 0 rgba(72,67,43,.1);transition:.2s}.clue-card.failed{border-color:#ed8a5c;background:#fff0d7;animation:shake .4s}.clue-visual{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:26px}.clue-visual i{color:#bd7843;font-size:18px;font-style:normal}.clue-text{display:none}.clue-sound{flex:0 0 40px;height:40px;border:0;border-radius:13px;background:#ffe49c;font-size:18px;cursor:pointer}
.queue-area{width:min(100%,760px);margin-top:15px}.queue-sign{display:flex;justify-content:space-between;align-items:center;padding:0 7px 5px;color:#566b4f;font-size:12px}.queue-sign i{color:#9b6e3c;font-style:normal}.queue-slots{display:grid;grid-template-columns:repeat(var(--slot-count),1fr);gap:clamp(7px,1.5vw,13px);padding:15px;border:7px solid #9b7046;border-radius:27px 10px;background:#c79a5c;box-shadow:0 9px 0 #6e5038,0 17px 28px var(--shadow)}.queue-slot{position:relative;min-width:0;aspect-ratio:.82;display:grid;place-items:center;border:4px dashed rgba(121,88,52,.35);border-radius:25px 10px;background:#fff2c5;font-size:clamp(45px,9vw,78px);cursor:pointer}.queue-slot::after{content:attr(data-position);position:absolute;left:50%;bottom:5px;transform:translateX(-50%);color:#ae9972;font-size:12px}.queue-slot.filled{border-style:solid;border-color:#fff;background:#edf0c8}.queue-slot.selected{box-shadow:inset 0 0 0 6px var(--gold)}.queue-slot.correct{animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.choose-label{margin:16px 0 9px;color:#51684e}.animal-tray{width:min(100%,660px);display:flex;justify-content:center;gap:10px}.animal-button{width:100px;min-height:86px;border:5px solid rgba(255,255,255,.78);border-radius:24px 10px;background:rgba(255,249,225,.92);box-shadow:0 7px 0 rgba(67,73,44,.13),0 12px 20px var(--shadow);font-size:53px;cursor:pointer}.animal-button.used{opacity:.28;filter:grayscale(.5);box-shadow:none}.animal-button.selected{transform:translateY(-5px);border-color:var(--gold);background:#fff0a5}.action-row{display:flex;gap:8px;margin-top:17px}.soft-button,.check-button{min-height:43px;padding:8px 13px;border:0;border-radius:18px;cursor:pointer}.soft-button{color:#526b4e;background:rgba(255,255,255,.72)}.check-button{color:white;background:var(--green);box-shadow:0 5px 0 var(--green-dark,#426646)}.feedback{min-height:39px;margin:15px 0 9px;padding:8px 16px;border-radius:20px;color:#466347;background:rgba(255,255,255,.65);text-align:center}.feedback.good{color:#267043;background:#e5f3c8}.feedback.notice{color:#9c5b34;background:#fff0bd}
.level-overlay{position:fixed;z-index:20;inset:0;display:none;place-items:center;padding:20px;background:rgba(42,59,41,.54);backdrop-filter:blur(6px)}.level-overlay.show{display:grid}.result-card{width:min(92vw,420px);padding:26px;display:flex;flex-direction:column;align-items:center;border:7px solid #f2dca0;border-radius:38px 16px;background:var(--paper);box-shadow:0 18px 0 rgba(41,55,39,.15),0 25px 55px rgba(34,45,31,.3);text-align:center}.result-stars{color:var(--gold);font-size:25px}.result-animals{display:flex;justify-content:center;font-size:55px;letter-spacing:-7px;filter:drop-shadow(0 5px 2px rgba(65,48,32,.13))}.result-card h2{margin:8px 0 2px;font-family:"Ma Shan Zheng",cursive;font-size:48px;font-weight:400;color:var(--orange)}.result-card p{font-size:18px}.finish{flex-direction:column;align-items:center;justify-content:center;text-align:center}.finish h2{margin:0;font-family:"Ma Shan Zheng",cursive;font-size:clamp(52px,13vw,78px);font-weight:400;color:var(--orange);text-shadow:0 4px white}.finish-medal{font-size:100px;animation:pop .7s cubic-bezier(.2,1.5,.4,1)}.finish>p:not(.kicker){font-size:20px}.badge{margin:8px 0 25px;padding:12px 22px;display:flex;align-items:center;gap:10px;border:3px dashed #d1a641;border-radius:23px;background:var(--paper);transform:rotate(-2deg)}.badge span{font-size:52px}.badge strong{font-size:18px;font-weight:400}.finish-link{margin-top:22px;color:#476b4b;text-decoration:none}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}@keyframes shake{25%{transform:translateX(-7px)}60%{transform:translateX(7px)}}@keyframes pop{from{transform:scale(.45)}}
@media(max-width:600px){.lineup-screen{padding-left:9px;padding-right:9px}.clue-list{grid-template-columns:1fr}.clue-card{min-height:57px}.queue-slots{gap:5px;padding:8px;border-width:5px}.queue-slot{border-width:3px;border-radius:17px 7px;font-size:clamp(36px,12vw,56px)}.animal-tray{gap:5px}.animal-button{width:72px;min-height:70px;border-width:3px;font-size:42px}.action-row{flex-wrap:wrap;justify-content:center}.progress i{width:5px}.task-card{border-radius:18px}.listen-all{padding:8px;font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}