:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#fff;background:#07162d}*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden;background:#07162d}button{font:inherit}.start,.game{width:100vw;height:100dvh;background:linear-gradient(90deg,rgba(4,17,44,.78),rgba(4,17,44,.15)),url('assets/rescue-campus.png') center/cover;position:relative}.start{display:flex;align-items:center;justify-content:center;gap:clamp(25px,5vw,80px);padding:5vw}.start img{width:min(34vw,430px);border-radius:50%;border:8px solid #55eaff;box-shadow:0 14px 0 #07162d,0 0 40px #36dfff}.start>div{max-width:680px;background:#0a1c39e8;border:4px solid #36dfff;border-radius:30px;padding:clamp(22px,4vw,52px);box-shadow:0 16px 0 #061128}.eyebrow{color:#ffd548;font-weight:900}.start h1{font-size:clamp(42px,6vw,88px);line-height:.95;margin:.2em 0;text-shadow:0 6px #59279e}.start p{font-size:clamp(18px,2vw,28px)}button{border:0;border-radius:18px;background:linear-gradient(#ffe56e,#ffaf18);color:#172342;font-weight:900;padding:14px 28px;box-shadow:0 7px 0 #9d5c00;cursor:pointer}button:active{transform:translateY(4px);box-shadow:0 3px 0 #9d5c00}.game{display:grid;grid-template-rows:auto auto 1fr auto;padding:clamp(10px,1.5vw,24px);gap:12px}.hud{display:flex;justify-content:space-between;align-items:center;background:#07162de8;border:3px solid #55eaff;border-radius:20px;padding:9px 18px}.progress{height:18px;flex:1;max-width:540px;background:#243754;border-radius:20px;overflow:hidden;border:2px solid #fff}.progress i{display:block;height:100%;background:linear-gradient(90deg,#ffe04b,#ff7c45);transition:.4s}.mission{margin:auto;background:#081a37ee;border:4px solid #ffd548;border-radius:22px;padding:10px 24px;text-align:center;box-shadow:0 8px 0 #071021}.mission h2{margin:0;font-size:clamp(20px,2.3vw,36px)}.mission .math{color:#55eaff;font-size:clamp(24px,3vw,44px);font-weight:900}.pens{display:grid;grid-template-columns:1fr 1fr;gap:clamp(15px,3vw,50px);align-items:center;max-width:1300px;width:88%;margin:auto}.pen{min-height:clamp(230px,40vh,470px);border:8px solid #f6f8ff;border-top-color:#ffd548;border-radius:40px;background:#092653c9;box-shadow:0 14px 0 #06142c,inset 0 0 35px #3fe9ff55;padding:18px;display:grid;grid-template-columns:repeat(5,1fr);place-items:center;gap:10px;position:relative}.pen label{position:absolute;top:-25px;background:#101d3c;border:3px solid #fff;border-radius:20px;padding:6px 18px;font-weight:900}.cat{width:clamp(54px,6vw,92px);aspect-ratio:1;border-radius:50%;background-image:url('assets/rescue-cat.png');background-size:cover;border:4px solid #fff;box-shadow:0 6px 0 #07162d;padding:0;transition:.25s}.cat:hover{transform:scale(1.08)}.cat.removed{opacity:.12;transform:translateY(-80px) scale(.3);pointer-events:none}.pen.disabled{opacity:.65}.actions{display:flex;justify-content:center;gap:14px;align-items:center;background:#07162de8;border:3px solid #55eaff;border-radius:20px;padding:9px}.answer{display:flex;gap:10px}.answer button{font-size:24px;min-width:64px}.feedback{min-width:230px;font-weight:900;color:#72ffca}.wrong{animation:shake .35s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.win{height:100dvh;display:grid;place-items:center;text-align:center;background:linear-gradient(#0a1c39aa,#0a1c39dd),url('assets/rescue-campus.png') center/cover}.win div{background:#081a37;border:5px solid #ffd548;border-radius:30px;padding:40px}.win h1{font-size:clamp(40px,7vw,90px);margin:.2em}@media(max-aspect-ratio:4/3){body{overflow:auto}.start{min-height:100dvh;height:auto;flex-direction:column}.start img{width:min(55vw,320px)}.game{height:auto;min-height:100dvh}.pens{width:96%;gap:12px}.pen{min-height:260px}.actions{flex-wrap:wrap}}@media(max-height:650px) and (orientation:landscape){.game{gap:5px;padding:6px}.mission{padding:5px 18px}.pen{min-height:250px}.cat{width:58px}.actions{padding:5px}}