*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#173d46;background:#42cbd0}.screen{width:100vw;height:100dvh;position:relative;background:url('assets/adventure-valley.png') center/cover no-repeat;overflow:hidden}.screen:after{content:"";position:absolute;inset:0;background:linear-gradient(#30bfc51e,#07505455);pointer-events:none}.start,.win{display:grid;place-items:center}.panel{position:relative;z-index:2;width:min(780px,88vw);padding:clamp(25px,4vw,48px);border:6px solid #fff;border-radius:32px;text-align:center;background:linear-gradient(145deg,#fffef3f5,#dffdf5f5);box-shadow:0 13px 0 #217779,0 22px 50px #07505466}.badge{display:inline-block;padding:7px 17px;border-radius:99px;background:#ffca42;color:#614100;font-weight:900}.panel h1{margin:12px 0 4px;font-size:clamp(36px,5.8vw,72px);line-height:1;color:#14878b;text-shadow:0 4px #b9fbef}.panel h2{margin:8px;color:#ef6c56}.panel p{font-size:clamp(17px,2vw,23px);line-height:1.5}.btn{border:4px solid #fff;border-radius:17px;padding:13px 27px;background:linear-gradient(#ffce4b,#f08a24);color:#563100;font:900 clamp(20px,2.3vw,27px)/1 Tahoma,sans-serif;box-shadow:0 7px 0 #a24d19;cursor:pointer}.sound{position:fixed;right:17px;bottom:17px;z-index:20;width:53px;height:53px;border:3px solid #fff;border-radius:15px;background:#167f87;color:#fff;font-size:24px;cursor:pointer}.hud{position:absolute;z-index:5;left:2vw;right:2vw;top:12px;height:64px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:15px;padding:8px 15px;border:4px solid #fff;border-radius:18px;background:#126c75e8;color:#fff;box-shadow:0 6px 0 #084a51}.hud strong{white-space:nowrap}.progress{height:18px;border:3px solid #fff;border-radius:99px;background:#164958;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#ffce43,#ff795a);transition:.4s}.small{padding:7px 12px;border:3px solid #fff;border-radius:11px;background:#235e79;color:#fff;font-weight:900;cursor:pointer}.game-area{position:absolute;z-index:3;left:2vw;right:2vw;top:88px;bottom:2vh;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);gap:16px}.chart-card,.answer-card{min-width:0;border:6px solid #fff;border-radius:26px;box-shadow:0 10px 0 #14575b;background:#f8fffbf2;overflow:hidden}.chart-card{display:flex;flex-direction:column;padding:15px}.chart-title{text-align:center;font-size:clamp(21px,2.3vw,31px);font-weight:900;color:#157b80;margin-bottom:9px}.picture-chart{flex:1;min-height:0;display:grid;border:4px solid #2d8b8d;border-radius:17px;overflow:hidden;background:#fff}.picture-chart.columns{grid-template-columns:repeat(4,1fr)}.picture-chart.rows{grid-template-rows:repeat(4,1fr)}.category{display:flex;min-width:0;min-height:0;border-right:2px solid #8fc8bf;border-bottom:2px solid #8fc8bf}.columns .category{flex-direction:column}.rows .category{flex-direction:row}.category-label{display:flex;align-items:center;justify-content:center;gap:7px;padding:5px;background:var(--color);color:#fff;font-weight:900;text-shadow:0 2px #28524d;white-space:nowrap}.rows .category-label{width:25%;flex:0 0 25%}.icon-sample{width:32px;height:32px}.icon-sample svg,.picto svg{width:100%;height:100%}.pictos{flex:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:clamp(3px,.6vw,8px);padding:7px}.picto{width:clamp(31px,4vw,53px);height:clamp(31px,4vw,53px);filter:drop-shadow(0 3px 1px #163f3933)}.legend{text-align:center;margin-top:8px;padding:6px;border-radius:11px;background:#d8f8ec;font-weight:800;color:#356c64}.answer-card{display:flex;flex-direction:column;align-items:center;padding:clamp(13px,2vw,24px);background:linear-gradient(#fffdf3f5,#e7fff8f5)}.question-tag{padding:5px 13px;border-radius:99px;background:#ff866a;color:#fff;font-weight:900}.question{margin:12px 0;text-align:center;font-size:clamp(19px,2vw,27px);font-weight:900;line-height:1.35;color:#164e5a}.tally-pad{width:100%;flex:1;min-height:140px;border:5px dashed #22a6a2;border-radius:20px;background:#fff;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:15px;padding:16px;cursor:pointer;box-shadow:inset 0 0 0 6px #ddfaf1}.placeholder{color:#58a7a2;text-align:center;font-weight:800}.tally-group{position:relative;width:78px;height:92px;display:flex;justify-content:space-around;align-items:center}.stroke{display:block;width:8px;height:75px;border-radius:8px;background:#173d46;box-shadow:2px 2px 0 #69c0b0}.stroke.cross{position:absolute;width:9px;height:88px;left:35px;top:3px;transform:rotate(67deg);background:#e65c48;box-shadow:2px 2px 0 #8f2e25}.count-line{margin:9px 0;font-size:20px;font-weight:900;color:#157b80}.actions{display:flex;gap:9px}.check,.erase{border:3px solid #fff;border-radius:13px;padding:9px 16px;color:#fff;font-weight:900;cursor:pointer}.check{background:#ef6b57;box-shadow:0 5px 0 #a13930}.erase{background:#278f99;box-shadow:0 5px 0 #145b65}.feedback{min-height:31px;margin-top:9px;text-align:center;font-weight:900;color:#197d73}.tally-pad.wrong{animation:shake .35s;border-color:#f05b58}.tally-pad.correct{border-color:#48cc71;background:#eaffed}.stars{font-size:60px;color:#ffc83d}@keyframes shake{25%,75%{transform:translateX(-8px)}50%{transform:translateX(8px)}}@media(max-height:680px) and (orientation:landscape){.hud{height:53px}.game-area{top:76px}.chart-card{padding:8px}.chart-title{margin:0;font-size:20px}.legend{margin-top:3px;padding:3px}.answer-card{padding:9px}.question{margin:5px;font-size:18px}.tally-pad{min-height:90px;padding:7px}.tally-group{height:65px}.stroke{height:55px}.stroke.cross{height:65px}.count-line{margin:4px}.check,.erase{padding:6px 12px}}@media(max-aspect-ratio:4/3){html,body{overflow:auto}.screen{height:auto;min-height:100dvh;overflow:visible}.game-area{position:relative;left:auto;right:auto;top:auto;bottom:auto;padding:88px 12px 20px;grid-template-columns:1fr}.chart-card{min-height:520px}.answer-card{min-height:430px}}