:root{--ink:#35205c;--purple:#7542da;--pink:#ff4f9b;--gold:#ffd43b;--cyan:#35d8ed}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Mitr,system-ui,sans-serif;color:white;background:#351764}button{font:inherit;cursor:pointer;border:0}
.game-shell{width:100vw;height:100dvh;min-height:520px;background:url('assets/parade-bg.png') center/cover no-repeat;position:relative;overflow:hidden}
.game-shell:after{content:"";position:absolute;inset:0;background:linear-gradient(#35176455,#21104022 55%,#180a3b88);pointer-events:none}
.screen{position:absolute;inset:0;z-index:1}.hidden{display:none!important}
.intro,.result{display:grid;place-content:center;text-align:center;background:linear-gradient(90deg,#281255cc,#28125577 50%,transparent);padding:5vw}.logo{filter:drop-shadow(0 8px 0 #3a176b)}.logo small{background:#ff5b55;padding:.35em 1em;border-radius:99px;font-size:clamp(14px,1.4vw,24px)}h1{margin:.15em 0;font-size:clamp(46px,7vw,108px);line-height:.85;text-shadow:0 5px 0 #402273}.logo span{color:var(--gold)}.intro p,.result p{font-size:clamp(18px,2vw,30px);text-shadow:0 2px 5px #000}.primary{background:linear-gradient(#ffe668,#ffb91f);color:#5b2e05;border:4px solid white;border-radius:20px;padding:.55em 1.6em;font-weight:700;font-size:clamp(18px,1.7vw,28px);box-shadow:0 8px 0 #b86608,0 10px 18px #0007}.primary:active{transform:translateY(5px);box-shadow:0 3px 0 #b86608}
.play{display:grid;grid-template-rows:auto auto 1fr auto;padding:clamp(10px,1.2vw,22px);gap:clamp(8px,1vh,15px)}header{display:grid;grid-template-columns:1fr minmax(280px,36%) 1fr;align-items:center;background:#221341dd;border:3px solid #ffffffaa;border-radius:20px;padding:8px 14px;box-shadow:0 6px 0 #140928}.brand{font-size:clamp(15px,1.4vw,24px)}.progress{text-align:center}.progress span{font-size:clamp(13px,1.2vw,20px)}.progress i{display:block;height:12px;background:#ffffff33;border-radius:20px;overflow:hidden}.progress b{display:block;width:10%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:.35s}.tools{text-align:right}.tools button{width:44px;height:44px;margin-left:6px;border-radius:13px;background:#fff;color:var(--ink);font-size:22px;box-shadow:0 4px 0 #bba7dd}
.mission-card{justify-self:center;text-align:center;min-width:min(760px,88vw);background:#fff9e9;color:var(--ink);border:5px solid var(--gold);border-radius:22px;padding:8px 24px;box-shadow:0 8px 0 #a84e28}.mission-card small{color:#e04e3e}.mission-card h2{margin:0;font-size:clamp(20px,2vw,34px)}.mission-card span{font-size:clamp(12px,1vw,17px);color:#7b4fa2}
.stage{position:relative;min-height:0;display:flex;align-items:flex-end;padding:0 5% 3%;}.finish{position:absolute;right:3%;top:4%;background:#fff;color:#553081;border:4px solid var(--gold);padding:.4em .8em;border-radius:18px;font-weight:700;font-size:clamp(14px,1.3vw,21px)}
.parade-line{width:100%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1vw,18px);border-bottom:clamp(12px,1.3vw,22px) solid #ffd66f;padding:0 5% 8px;filter:drop-shadow(0 8px 3px #381b2f99)}.character{width:min(16vw,210px);height:min(31vh,290px);position:relative;display:flex;align-items:flex-end;justify-content:center;border-radius:30px;transition:.22s;touch-action:none}.character img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 3px #0005);pointer-events:none}.character .tag{position:absolute;bottom:-1.25em;background:#fff;color:var(--ink);border:3px solid var(--gold);border-radius:99px;padding:.15em .7em;font-weight:700;font-size:clamp(12px,1.1vw,18px);white-space:nowrap}.character.selected{transform:translateY(-22px);filter:drop-shadow(0 0 12px #fff)}.character.dragging{opacity:.35}.character.wrong{animation:shake .4s}.character.correct{filter:drop-shadow(0 0 15px #6cff9a)}
footer{display:flex;justify-content:center;align-items:center;gap:30px;background:#261445dd;border-radius:18px;padding:9px 18px}footer p{margin:0;font-size:clamp(12px,1.15vw,18px);color:#8fffee}footer .primary{padding:.35em 1.5em}.trophy{font-size:100px}.result{background:#281255dd}
@keyframes shake{25%{transform:translateX(-12px)}50%{transform:translateX(12px)}75%{transform:translateX(-8px)}}
@media(max-aspect-ratio:4/3){.brand{display:none}header{grid-template-columns:1fr auto}.character{width:18vw;height:27vh}.mission-card{min-width:92vw}.stage{padding-left:1%;padding-right:1%}footer p{display:none}}
@media(max-height:650px){.play{padding:7px}.mission-card{padding:4px 18px}.character{height:28vh}.stage{padding-bottom:1%}header{padding:4px 10px}}