@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes correctPop{0%,to{transform:scale(1);background:var(--bg-main)}50%{transform:scale(1.05);background:rgba(16,185,129,.2);border-color:var(--primary-green)}}@keyframes shakeError{0%,to{transform:translateX(0)}25%{transform:translateX(-10px);border-color:var(--danger)}75%{transform:translateX(10px);border-color:var(--danger)}}@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-regular.woff2)format("woff2")}@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-700.woff2)format("woff2")}:root{--bg-main:#0f172a;--surface:#1e293b;--surface-hover:#334155;--border:#334155;--border-focus:#10b981;--primary-indigo:#3730a3;--text-main:#f8fafc;--text-muted:#94a3b8;--primary-blue:#38bdf8;--primary-pink:#d946ef;--primary-green:#10b981;--danger:#ef4444;--warning:#f59e0b}*{margin:0;padding:0;box-sizing:border-box;touch-action:manipulation}body{font-family:"Kanit",sans-serif;background-color:var(--bg-main);color:var(--text-main);line-height:1.6;user-select:none}.container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}.game-wrapper,.overlay input,header{text-align:center;padding:40px 20px 20px}.overlay h2,header h1{font-size:2.2rem;margin-bottom:10px}header h1 span{color:var(--primary-green)}.overlay p,header p{color:var(--text-muted);font-size:1.1rem}.game-wrapper{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin:0 auto 40px;max-width:650px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5);min-height:550px;display:flex;flex-direction:column;justify-content:center}.stat-box,.status-bar{display:flex;align-items:center}.status-bar{justify-content:space-between;background:rgba(0,0,0,.3);padding:15px 20px;border-radius:12px;border:1px solid var(--border);margin-bottom:20px;gap:10px}.stat-box{flex-direction:column;font-size:1.2rem;font-weight:700;flex:1}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.equation-display,.stat-val.blue{color:var(--primary-blue)}.stat-val.pink{color:var(--primary-pink)}.stat-val.green{color:var(--primary-green);font-variant-numeric:tabular-nums}.stat-val.danger{color:var(--danger);animation:pulse 1s infinite}.equation-display{position:relative;font-size:3rem;font-weight:700;margin:0 0 20px;padding:20px 10px;background:var(--bg-main);border-radius:12px;border:2px dashed var(--border-focus);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;transition:.2s}.answer-input{font-size:3rem;color:var(--text-muted);min-width:80px;border-bottom:4px solid var(--border);display:inline-block;text-align:center}.combo-alert{position:absolute;top:-15px;right:-15px;background:var(--warning);color:#000;font-size:1rem;padding:5px 15px;border-radius:20px;font-weight:700;opacity:0;transform:translateY(10px);transition:.3s}.combo-alert.show{opacity:1;transform:translateY(0)}.correct-pop{animation:correctPop .3s ease}.shake-error{animation:shakeError .3s ease}.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.numpad-btn,.overlay{display:flex;justify-content:center;align-items:center}.numpad-btn{background:var(--surface-hover);color:var(--text-main);border:1px solid var(--border);border-radius:12px;font-size:1.8rem;padding:20px 0;font-family:"Kanit";font-weight:700;cursor:pointer;transition:.1s}.numpad-btn:active{transform:scale(.95);background:var(--primary-blue);color:#000}.numpad-btn.del{background:rgba(239,68,68,.2);color:var(--danger);border-color:rgba(239,68,68,.5)}.numpad-btn.zero{grid-column:span 2}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.98);flex-direction:column;z-index:20;backdrop-filter:blur(5px);overflow-y:auto;padding:20px}.overlay p{margin-bottom:25px;max-width:80%}.overlay input{padding:12px 20px;font-size:1.1rem;border-radius:8px;border:2px solid var(--primary-blue);background:var(--bg-main);color:#fff;font-family:"Kanit";margin-bottom:20px;width:100%;max-width:300px;outline:0}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;width:90%;max-width:400px}.btn-action,.btn-mode{font-family:"Kanit";font-weight:700;cursor:pointer;transition:.2s}.btn-mode{background:var(--surface);border:2px solid var(--primary-indigo);color:#fff;padding:15px;border-radius:12px;font-size:1.3rem}.btn-mode:hover{background:var(--primary-indigo);transform:translateY(-3px)}.btn-mode.mixed{grid-column:span 2;border-color:var(--primary-pink);background:rgba(217,70,239,.1);color:var(--primary-pink)}.btn-mode.mixed:hover{background:var(--primary-pink);color:#000}.btn-action{background:var(--primary-green);color:#000;border:0;padding:12px 24px;border-radius:8px;font-size:1.2rem;width:80%;max-width:300px}.btn-action.blue{background:var(--primary-blue);margin-top:15px}.btn-action:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed}.hidden{display:none!important}.leaderboard-section{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:25px;max-width:800px;margin:0 auto 50px}.leaderboard-section h2{color:var(--primary-pink);text-align:center;margin-bottom:20px}.lb-table{width:100%;border-collapse:collapse;text-align:center}.lb-table th{color:var(--text-muted);padding:10px;border-bottom:1px solid var(--border);font-size:.9rem}.lb-table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.05)}.lb-table tr:nth-child(1) td{color:#fbbf24;font-weight:700;font-size:1.1rem}.lb-table tr:nth-child(2) td{color:#94a3b8;font-weight:700}.lb-table tr:nth-child(3) td{color:#d97706;font-weight:700}.btn-quit{background:0 0;color:var(--text-muted);border:1px solid var(--border);padding:8px 12px;border-radius:8px;font-family:"Kanit";font-size:.9rem;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:5px;margin-bottom:15px;width:fit-content}.btn-quit:hover{background:rgba(239,68,68,.1);color:var(--danger);border-color:rgba(239,68,68,.5)}.lb-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}.lb-filter-btn,.lb-filter-btn.active{background:#1f2937!important;color:#fff!important}.lb-filter-btn{border:0;padding:8px 16px;border-radius:6px;cursor:pointer}.lb-filter-btn.active{border-color:#1f2937!important;font-weight:600}.article-container{margin-top:50px;text-align:left;line-height:1.8;color:var(--text-main)}.section-box{margin-bottom:40px;padding:30px;border-radius:20px;border:1px solid var(--border);background:var(--surface)}.section-title{font-size:22px;margin-top:0;color:#a5b4fc;margin-bottom:15px;border-left:5px solid var(--primary-indigo);padding-left:15px}.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-top:20px}.card-item{background:var(--bg-main);padding:20px;border-radius:16px;border:1px solid var(--border)}.card-item h3{font-size:18px;margin-top:0;margin-bottom:5px;color:var(--primary-green)}@media (max-width:600px){.equation-display{font-size:2rem;min-height:80px}.answer-input{font-size:2rem;min-width:60px}.numpad-btn{padding:15px 0;font-size:1.5rem}.overlay h2{font-size:1.8rem}}