:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#293650;--red:#f14e42;--blue:#298ce8;--gold:#ffd047;--purple:#925ce0}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#8fd4f2}button{font:inherit}.screen{width:100vw;height:100dvh;background:linear-gradient(#2e91ca22,#16345a33),url('assets/toy-arena.png') center/cover;position:relative}.start,.finish{display:grid;place-items:center}.panel{width:min(850px,91vw);padding:clamp(24px,4vw,50px);text-align:center;background:#fff9e9f2;border:7px solid #fff;border-radius:38px;box-shadow:0 15px 0 #75422b,0 24px 45px #2b345866}.panel h1{font-size:clamp(48px,7vw,90px);line-height:1;margin:.05em;color:#e64a38;text-shadow:0 5px #ffd75c,0 9px #7e2c27}.panel h2{font-size:clamp(25px,3vw,42px);margin:.4em;color:#24569b}.panel p{font-size:clamp(18px,2vw,27px);font-weight:800}.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px}.btn{border:4px solid #fff;border-radius:22px;padding:14px 22px;background:linear-gradient(#ffe36e,#f8ad27);color:#684000;font-size:clamp(18px,2vw,27px);font-weight:900;box-shadow:0 8px 0 #a45a0b;cursor:pointer}.btn.blue{background:linear-gradient(#62dbff,#258eda);color:#12365e;box-shadow:0 8px 0 #14629b}.btn small{display:block}.sound{position:fixed;right:18px;bottom:18px;z-index:30;width:58px;height:58px;border:4px solid #fff;border-radius:50%;background:#293650;color:#fff;font-size:24px;box-shadow:0 6px 0 #111b30}.game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:clamp(7px,1.2vw,18px)}.hud,.controls{z-index:6;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,22px);padding:8px 76px;background:#293650ed;border:4px solid #fff;border-radius:23px;color:#fff;box-shadow:0 7px 0 #111b30}.hud strong{white-space:nowrap}.progress{height:19px;flex:1;max-width:620px;border:3px solid #fff;border-radius:20px;background:#536078;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#29d9ca,#ffd047,#f14e42);transition:.4s}.small{border:2px solid #fff;border-radius:12px;padding:7px 12px;background:#ffd047;color:#513200;font-weight:900;cursor:pointer}.arena{z-index:3;align-self:center;justify-self:center;width:min(1510px,97vw);height:min(76vh,790px);position:relative}.mission{position:absolute;z-index:6;top:2%;left:50%;transform:translateX(-50%);min-width:min(620px,80vw);text-align:center;background:#fff;border:5px solid #ffd047;border-radius:24px;padding:7px 22px;box-shadow:0 7px 0 #a75b19}.mission b{font-size:clamp(22px,2.5vw,36px)}.mission small{display:block;color:#5e6680;font-weight:900}.lineup{position:absolute;left:5%;right:5%;bottom:6%;height:62%;display:flex;align-items:end;justify-content:center;gap:clamp(7px,1.3vw,22px)}.warrior{flex:0 1 210px;max-width:210px;height:100%;border:5px solid #fff;border-radius:28px;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:0 11px 0 #3b2949,0 16px 25px #252b4b55;display:flex;flex-direction:column;align-items:center;justify-content:end;padding:8px;cursor:grab;transition:transform .2s,filter .2s;position:relative}.warrior:hover,.warrior.selected{transform:translateY(-12px);filter:brightness(1.08)}.warrior.selected{outline:7px solid #ffe457}.warrior.dragging{opacity:.45}.helmet{position:absolute;top:8%;width:67%;height:34%;border-radius:48% 48% 18% 18%;background:var(--armor);border:5px solid #fff;box-shadow:inset 0 -10px #0002}.helmet:before{content:"";position:absolute;left:42%;top:-23%;width:16%;height:34%;background:var(--crest);border-radius:10px 10px 0 0}.helmet:after{content:"•   •";white-space:pre;position:absolute;left:13%;right:13%;bottom:13%;height:38%;border-radius:18px;background:#ffd7b5;color:#23304a;font-size:clamp(13px,1.7vw,23px);line-height:1.25}.body{width:58%;height:35%;background:var(--armor);border:5px solid #fff;border-radius:20px 20px 13px 13px;box-shadow:inset 0 -12px #0002}.shield{position:absolute;bottom:6%;width:clamp(70px,8vw,112px);height:clamp(70px,8vw,112px);display:grid;place-items:center;border-radius:50%;background:#fff;border:8px solid var(--crest);box-shadow:0 7px 0 #303a54;color:#223350;font-size:clamp(30px,4vw,54px);font-weight:900}.warrior.wrong{animation:shake .38s}.controls{min-height:88px}.controls .btn{padding:10px 27px}.feedback{min-width:220px;color:#70f6d3;font-weight:900}.finish .medal{font-size:80px}.finish h1{font-size:clamp(45px,7vw,80px);color:#d83d34}@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}@media(max-height:680px) and (orientation:landscape){.game{padding:5px;gap:4px}.hud,.controls{padding-top:4px;padding-bottom:4px}.arena{height:76vh}.mission{padding:3px 18px}.lineup{height:65%;bottom:3%}.warrior{max-width:160px;border-radius:20px}.shield{width:66px;height:66px;border-width:5px}.controls{min-height:60px}}@media(max-aspect-ratio:4/3){body{overflow:auto}.screen{height:auto;min-height:100dvh}.game{grid-template-rows:auto auto auto}.arena{height:660px}.hud,.controls{flex-wrap:wrap;padding:8px 68px 8px 12px}.lineup{left:1%;right:1%;gap:5px}.warrior{min-width:0}.modes{grid-template-columns:1fr}}
/* Rounded toy-character treatment */
.warrior{border:0!important;border-radius:38%;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 12px 7px #26354d66);overflow:visible}
.warrior:hover,.warrior.selected{filter:brightness(1.08) drop-shadow(0 12px 7px #26354d66)}
.helmet{z-index:3;top:7%;width:72%;height:36%;border-radius:52% 52% 25% 25%;background:linear-gradient(145deg,#ffffff99 0 12%,var(--armor) 34%);box-shadow:inset 0 -10px #0002,0 5px 0 #0002}
.helmet:after{left:10%;right:10%;bottom:9%;height:44%;border-radius:50% 50% 42% 42%;font-size:clamp(14px,1.7vw,23px)}
.body{position:absolute;bottom:11%;width:64%;height:45%;background:linear-gradient(145deg,var(--c1),var(--c2));border-radius:48% 48% 30% 30%}
.body:before{content:"";position:absolute;top:17%;left:-24%;width:27%;height:51%;border-radius:55% 35% 48% 55%;background:var(--armor);border:4px solid #fff;box-shadow:calc(100% + 48px) 0 0 -1px var(--armor)}
.body:after{content:"";position:absolute;left:9%;bottom:-16%;width:29%;height:25%;border-radius:42% 42% 58% 58%;background:#5c4036;border:4px solid #fff;box-shadow:50px 0 0 -1px #5c4036}
.shield{z-index:5;bottom:4%;border-radius:50% 50% 45% 45%;background:linear-gradient(145deg,#fff,#eaf1ff)}
.warrior.illustrated{height:100%;overflow:hidden;border:5px solid #fff!important;border-radius:30px;background:linear-gradient(145deg,var(--c1),var(--c2))!important;box-shadow:0 10px 0 #293650,0 18px 30px #17213b66!important;filter:none;padding:0}
.warrior.illustrated:hover,.warrior.illustrated.selected{filter:brightness(1.08)}
.warrior.illustrated img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border:0;pointer-events:none}
.warrior.illustrated .shield{bottom:3%;width:clamp(68px,7vw,102px);height:clamp(68px,7vw,102px);border-width:7px;background:#fff}