:root{--green:#34E834;--green-ink:#0d9a0d;--ink:#0F1720;--ink2:#5B6B7B;--line:#E3E9DF;--bg:#F7FAF5;--gold:#D4A017;--orange:#E89A34;--dark:#081408;--dark2:#0e2412}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Noto Sans Thai',-apple-system,sans-serif;background:var(--bg);color:var(--ink)}nav{padding:14px 24px;display:flex;align-items:center;gap:10px;background:var(--dark)}nav img{width:30px;height:30px}nav b{font-size:18px;letter-spacing:1px;color:#fff}nav b span{color:var(--green)}.nav-links{margin-left:auto;display:flex;align-items:center;gap:16px}.nav-links a{color:#cfe8cf;text-decoration:none;font-size:14px;font-weight:600}.nav-links a:hover{color:var(--green)}.hero{position:relative;background:linear-gradient(160deg,var(--dark),#123018);color:#fff;overflow:hidden}.hero svg.mapbg{position:absolute;inset:0;width:100%;height:100%;opacity:.45}.hwrap{position:relative;max-width:760px;margin:0 auto;padding:26px 18px 20px}.hero h1{font-size:26px;font-weight:800;letter-spacing:.5px}.hero .en{font-size:11px;letter-spacing:3px;color:#7fd98a;font-weight:700;text-transform:uppercase}.hero .sub{color:#c9dcc9;font-size:13.5px;line-height:1.75;margin-top:8px;max-width:520px}.joinbtn{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#06130a;font-size:14px;font-weight:800;padding:10px 22px;border-radius:12px;border:0;cursor:pointer;font-family:inherit;margin-top:12px}.tabs{position:sticky;top:0;z-index:10;display:flex;background:#fff;border-bottom:2px solid var(--line)}.tabs .twrap{max-width:760px;margin:0 auto;display:flex;flex:1}.tab{flex:1;padding:13px 8px;font:inherit;font-size:14.5px;font-weight:700;background:0 0;border:none;border-bottom:2.5px solid transparent;margin-bottom:-2px;cursor:pointer;color:var(--ink2);text-align:center}.tab.on{color:var(--green-ink);border-bottom-color:var(--green)}.wrap{max-width:760px;margin:0 auto;padding:18px 14px 60px}.hide{display:none!important}.fcard{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;color:inherit;overflow:hidden}.fhead{display:flex;gap:10px;align-items:center;padding:12px 14px 0}.fav{width:42px;height:42px;border-radius:50%;background:#e9fbe9;color:var(--green-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}.fwho{flex:1;min-width:0}.fname{font-size:14.5px;font-weight:800;line-height:1.3}.ftime{font-size:12px;color:var(--ink2);margin-top:1px}.fbody{padding:8px 14px 4px}.fline{font-size:15px;line-height:1.65}.fline b{font-weight:800}.fsub{font-size:14px;color:var(--ink);margin-top:4px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.stars{color:var(--gold);font-size:13px;letter-spacing:1px}.fstat{display:flex;justify-content:space-between;padding:6px 14px;font-size:12px;color:var(--ink2)}.fact{display:flex;border-top:1px solid var(--line)}.fbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink2);background:0 0;border:none;cursor:pointer;padding:10px 4px}.fbtn:hover{background:var(--bg)}.fbtn.liked{color:#e0245e}.fbtn a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.cbox{border-top:1px solid var(--line);padding:10px 14px}.citem{font-size:13px;line-height:1.7;margin-bottom:6px}.citem b{font-weight:800}.cpend{color:var(--ink2);font-style:italic}.cinput{display:flex;gap:8px;margin-top:8px}.cinput input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13.5px}.cinput button{font:inherit;font-size:13px;font-weight:800;background:var(--green);color:#06130a;border:0;border-radius:10px;padding:9px 16px;cursor:pointer}.fempty{color:var(--ink2);font-size:13.5px;text-align:center;padding:30px 10px;line-height:1.8}.fjoin{background:linear-gradient(150deg,var(--dark),#123018);color:#cfe8cf;border-radius:16px;padding:18px;margin:14px 0;font-size:13.5px;line-height:1.8;text-align:center}.pcard{background:linear-gradient(150deg,var(--dark),#123018);color:#fff;border-radius:20px;padding:26px;position:relative;overflow:hidden}.pcard svg.mapbg{position:absolute;inset:0;width:100%;height:100%;opacity:.35}.phead{position:relative;display:flex;align-items:center;gap:18px}.avatar{width:70px;height:70px;border-radius:50%;background:var(--green);color:#06130a;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;flex-shrink:0;border:3px solid rgba(255,255,255,.35)}.pname{font-size:22px;font-weight:800}.prank{display:inline-block;font-size:12px;font-weight:800;color:#06130a;background:var(--green);padding:2px 12px;border-radius:99px;margin-top:6px}.pjoin{font-size:12px;color:#a9c4a9;margin-top:6px}.stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.stat{background:rgba(255,255,255,.07);border:1px solid rgba(127,217,138,.25);border-radius:14px;padding:14px 10px;text-align:center}.stat b{display:block;font-size:26px;font-weight:800;color:var(--green)}.stat span{font-size:12px;color:#a9c4a9}.stat.soon b{color:#7a917a;font-size:14px;padding:6px 0}h2{font-size:18px;font-weight:800;margin-top:26px}.hint{font-size:13px;color:var(--ink2);margin-top:4px}.medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px;margin-top:14px}.medal{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:15px 12px;text-align:center}.medal.earned{border-color:var(--green);box-shadow:0 4px 14px rgba(52,232,52,.15)}.medal .mi{width:48px;height:48px;border-radius:50%;margin:0 auto 9px;display:flex;align-items:center;justify-content:center;background:#e9fbe9;color:var(--green-ink)}.medal.locked .mi{background:var(--bg);color:#b9c2cf}.medal .mt{font-size:13px;font-weight:800}.medal.locked .mt{color:var(--ink2)}.medal .mc{font-size:11.5px;color:var(--ink2);margin-top:3px;line-height:1.5}.medal .soonchip{display:inline-block;font-size:10px;font-weight:800;color:var(--orange);background:#fdf3e4;border-radius:99px;padding:1px 8px;margin-top:5px}footer{text-align:center;font-size:12px;color:var(--ink2);padding:20px;border-top:1px solid var(--line);margin-top:36px}footer a{color:var(--green-ink)}