@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans Thai',Tahoma,sans-serif;color:#173d48;background:#e9f6f1;font-size:16px}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;border:1px solid #b1cec8;background:white;color:#174954;padding:11px 18px;border-radius:12px;font-weight:600}button:hover:not(:disabled){background:#d9f2eb;transform:translateY(-1px)}button:focus-visible,select:focus-visible{outline:3px solid #e99e26;outline-offset:3px}button:disabled{opacity:.55;cursor:default}header{background:#07576a;color:white;display:flex;align-items:center;gap:30px;padding:20px 4%}header strong{font-size:27px}header span{flex:1;font-size:14px}main{max-width:1400px;margin:auto;padding:26px 4%}h1{font-size:29px;margin:0}h2{font-size:23px;margin:0 0 15px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.heading p{color:#567570;margin:8px 0 24px}label{font-size:13px;display:block}select{padding:12px;background:white;border:1px solid #b1cec8;border-radius:10px;margin:6px 0 22px;width:100%;color:#173d48}.layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr);gap:22px}.hud{display:flex;align-items:center;gap:22px;padding:12px 18px;background:#fff;border-radius:16px 16px 0 0}.hud button{margin-left:auto;padding:6px 10px}.field{position:relative;background:#90c989;border-radius:0 0 16px 16px;overflow:hidden}canvas{width:100%;display:block;aspect-ratio:900/580}#banner{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#07576aeb;color:white;padding:8px 20px;border-radius:20px;font-size:14px;text-align:center;width:max-content;max-width:95%;pointer-events:none}.slots{display:flex;gap:8px;margin:12px 0}.slots button{flex:1;padding:7px}.shop{display:flex;gap:10px}.shop button{flex:1;padding:13px 6px}.shop .selected{background:#07576a;color:white;border-color:#07576a}small{display:block;font-size:11px;margin-top:6px}.actions{display:flex;gap:12px;margin-top:14px}.primary{background:#0a7d76;color:white;border-color:#0a7d76}.primary:hover:not(:disabled){background:#07576a}aside{background:#fff;border:1px solid #c6ded7;border-radius:20px;padding:24px}aside h2{color:#08796d}details{background:#eef8f3;padding:12px;border-radius:10px;font-size:14px;line-height:1.8}summary{cursor:pointer;font-weight:bold}#quiz h3{font-size:20px;line-height:1.6}#quiz button{display:block;width:100%;text-align:left;margin:10px 0;font-size:15px;font-weight:500}#quiz .correct{background:#d5f3d9;border-color:#36885c;opacity:1}#quiz .wrong{background:#ffe5df;border-color:#d77869;opacity:1}#feedback{line-height:1.7;font-size:14px;margin:14px 0}.hint,footer{font-size:12px;color:#53716c;line-height:1.8}footer{text-align:center;margin-top:30px}dialog{border:0;border-radius:20px;max-width:620px;width:90%;padding:30px;color:#173d48;max-height:85vh}dialog::backdrop{background:#002c3dbb}#modalBody{line-height:1.9;margin-bottom:20px}.resultrow{padding:10px 0;border-bottom:1px solid #ddd}@media(max-width:850px){header{gap:10px;padding:14px}header strong{font-size:20px}header span{display:none}header button{margin-left:auto}.layout{grid-template-columns:1fr}.heading{display:block}h1{font-size:25px}.heading button{margin-bottom:18px}.hud{gap:12px;font-size:13px;padding:10px}.shop button{font-size:13px}aside{padding:20px}main{padding:22px 14px}.slots button{padding:8px 2px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.arsenal{margin-top:16px;padding:16px;background:#f5fbf8;border:1px solid #c6ded7;border-radius:16px}.arsenal h2{margin:0;font-size:20px}.arsenal>p{margin:4px 0 12px;font-size:13px;color:#3e6762}.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.shop button{text-align:left;min-width:0;padding:10px;line-height:1.5;min-height:68px}.shop button.selected small{color:#d5f1ed}.shop small{font-size:12px;margin-top:3px}.arsenal>.tower-tactic{margin:10px 0 0;min-height:1.5em}.boss-card{background:#fff2de;border:1px solid #edcb98;border-radius:12px;padding:12px 14px;margin:0 0 14px;color:#613b22}.boss-card span{font-size:12px;font-weight:700}.boss-card h3{font-size:17px;margin:4px 0}.boss-card p{font-size:13px;line-height:1.6;margin:0}.boss-card progress{width:100%;height:10px;margin-top:8px;accent-color:#b44636}@media(max-width:520px){.shop{grid-template-columns:repeat(2,minmax(0,1fr))}.arsenal{padding:12px}.shop button{font-size:13px}}
.setup{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:0 14px;margin-bottom:18px}.setup select{margin-bottom:5px}.setup>p{grid-column:1/-1;color:#3e6762;font-size:13px;margin:4px 0}#recap{border-top:1px solid #c6ded7;margin-top:18px;padding-top:6px;font-size:14px;line-height:1.65}#recap ol{padding-inline-start:22px}#recap li{margin-bottom:10px}.hud #maxHp{display:inline}@media(max-width:520px){.setup{grid-template-columns:1fr;gap:8px}.setup>p{margin:0}}
.actions{flex-wrap:wrap;align-items:center}.actions a,#backToField{color:#08655e;text-underline-offset:3px;font-size:14px;font-weight:700}#lessonPanel,#waveControls{scroll-margin-top:14px}