:root{--deep:#0a2818;--deep2:#071d12;--green:#1b6a42;--gold:#be9442;--gold2:#ead08c;--muted:#a8b5ad;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai",Tahoma,sans-serif;color:#fff;line-height:1.7;background:radial-gradient(760px 390px at 9% -5%,rgba(27,106,66,.56),transparent 63%),radial-gradient(640px 360px at 96% 4%,rgba(190,148,66,.18),transparent 64%),var(--deep2);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(1120px,calc(100% - 32px));margin:auto}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:8px}
.bar{position:sticky;z-index:80;top:0;background:rgba(7,29,18,.91);backdrop-filter:blur(13px);border-bottom:1px solid rgba(234,208,140,.2)}
.bar .wrap{min-height:60px;display:flex;align-items:center;gap:14px}.home{font-weight:800;white-space:nowrap}.home em{font-style:normal;color:var(--gold2)}.bar-title{margin-left:auto;text-align:right;color:rgba(255,255,255,.62);font-size:12px}.bar-title b{display:block;color:#fff;font-size:14px}
.hero{text-align:center;padding:clamp(42px,7vw,76px) 0 28px}.hero-icon{font-size:48px;line-height:1}.tag{display:inline-flex;margin-top:15px;padding:6px 14px;border:1px solid rgba(234,208,140,.44);border-radius:999px;color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.15em}.hero h1{font-size:clamp(31px,5.8vw,52px);line-height:1.12;margin:15px 0 12px}.lead{max-width:66ch;margin:auto;color:rgba(255,255,255,.72);font-size:15.5px}.meter{max-width:520px;margin:27px auto 0}.track{height:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.13)}.track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--gold2));transition:width .55s ease}.meter-copy{margin-top:10px;color:rgba(255,255,255,.72);font-size:13px}.meter-copy b{color:var(--gold2)}
.filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px}.filter{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:12px;font-weight:800}.filter[aria-pressed="true"]{background:var(--gold2);border-color:var(--gold2);color:var(--deep2)}
.album{padding:18px 0 74px}.group{padding:34px 0 9px}.group.bonus{margin-top:16px;padding:30px 20px 20px;border:1px solid rgba(234,208,140,.28);border-radius:24px;background:linear-gradient(145deg,rgba(190,148,66,.08),rgba(255,255,255,.025))}.group-head{display:flex;align-items:end;justify-content:space-between;gap:18px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.12)}.eyebrow{color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.group h2{font-size:clamp(22px,3.8vw,31px);line-height:1.2;margin-top:6px}.group-desc{color:rgba(255,255,255,.61);font-size:13.5px;margin-top:5px}.group-count{flex:none;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 12px;color:rgba(255,255,255,.68);font-size:12px;font-weight:800}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}
.ach-card{position:relative;display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.055);color:#fff;text-align:left;transition:transform .2s,border-color .2s,box-shadow .2s}.ach-card.is-link{cursor:pointer}.ach-card.is-link:hover{transform:translateY(-5px);border-color:rgba(234,208,140,.86);box-shadow:0 34px 64px -40px rgba(0,0,0,1)}.ach-card.unlocked{border-color:rgba(234,208,140,.44);box-shadow:0 24px 50px -38px rgba(0,0,0,.9)}.ach-card.bonus-card{border-color:rgba(234,208,140,.7);box-shadow:0 24px 62px -36px rgba(190,148,66,.42)}
.ach-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(190,148,66,.15),transparent 54%),#071a10}.ach-art img{display:block;width:100%;height:100%;object-fit:cover}.ach-card.locked:not(.secret) .ach-art img{filter:brightness(.28) saturate(.65)}.ach-card.secret.locked .ach-art{background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 9px,transparent 9px 18px),#071a10}.ach-card.secret.locked .ach-art img{display:none}
.state{position:absolute;z-index:3;top:10px;right:10px;display:grid;place-items:center;min-width:29px;height:29px;padding:0 7px;border-radius:999px;background:rgba(2,13,7,.82);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:900}.ach-card.unlocked .state{background:var(--green)}.new{position:absolute;z-index:4;left:10px;top:10px;padding:5px 9px;border-radius:999px;background:var(--gold2);color:var(--deep2);font-size:9px;font-weight:900;letter-spacing:.08em}
.ach-body{display:flex;flex:1;flex-direction:column;padding:15px 16px 17px}.kind{color:var(--gold2);font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.ach-name{display:flex;align-items:flex-start;gap:8px;font-size:17px;line-height:1.35;margin-top:5px}.name-icon{flex:none;width:1.25em;text-align:center}.hint{color:rgba(255,255,255,.63);font-size:13px;line-height:1.55;margin-top:5px}.ach-card.locked .ach-name{color:rgba(255,255,255,.56)}.ach-card.locked .hint b{color:var(--gold2)}.ach-card.unlocked .hint b{color:#8fe0ae}.go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;color:var(--gold2);font-size:12px;font-weight:800}
.empty{padding:36px 18px;text-align:center;color:rgba(255,255,255,.62);border:1px dashed rgba(255,255,255,.15);border-radius:18px;margin-top:18px}.note{margin-top:34px;padding:18px 20px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);font-size:13.5px}.note b{color:#fff}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:19px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:1px solid rgba(255,255,255,.22);border-radius:12px;font-weight:800;font-size:13px}.btn.gold{background:var(--gold2);border-color:var(--gold2);color:var(--deep2)}
footer{text-align:center;padding:30px 0 50px;color:rgba(255,255,255,.48);font-size:12px}footer a{color:var(--gold2);font-weight:700}
.hud{position:fixed;left:14px;bottom:14px;z-index:80;display:flex;align-items:center;gap:11px;background:#f8f6f0;color:#12281c;border:1px solid rgba(18,40,28,.12);border-radius:999px;padding:8px 20px 8px 8px;cursor:pointer;font-weight:800;font-size:13.5px;box-shadow:0 16px 34px -14px rgba(18,40,28,.62);transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,border-color .18s}.hud:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 22px 42px -14px rgba(18,40,28,.7)}.hud:active{transform:translateY(-1px) scale(.97)}.hud .ico{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gold);color:#fff;font-size:15px;line-height:1;box-shadow:0 0 0 0 rgba(190,148,66,.5);animation:hudRing 2.6s ease-out infinite}@keyframes hudRing{0%{box-shadow:0 0 0 0 rgba(190,148,66,.55)}70%{box-shadow:0 0 0 12px rgba(190,148,66,0)}100%{box-shadow:0 0 0 0 rgba(190,148,66,0)}}.hud .lbl{white-space:nowrap;line-height:1.3}.hud .lbl small{display:block;font-weight:500;font-size:11.5px;color:#637068;margin-top:1px}.hud .eq{display:none;align-items:flex-end;gap:2.5px;height:15px;margin-left:-3px}.hud .eq i{width:3px;border-radius:2px;background:var(--green);height:5px;animation:eqBar .9s ease-in-out infinite}.hud .eq i:nth-child(2){animation-delay:.15s}.hud .eq i:nth-child(3){animation-delay:.3s}.hud .eq i:nth-child(4){animation-delay:.45s}@keyframes eqBar{0%,100%{height:4px}50%{height:15px}}.hud.playing{border-color:rgba(27,106,66,.4)}.hud.playing .eq{display:flex}.hud.playing .ico{background:var(--green);animation:none;box-shadow:none}
.intro-event{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px;background:rgba(1,8,5,.88);backdrop-filter:blur(10px)}.intro-card{position:relative;width:min(520px,100%);overflow:hidden;border:1px solid rgba(234,208,140,.62);border-radius:24px;padding:clamp(24px,6vw,38px);background:radial-gradient(420px 210px at 50% -15%,rgba(190,148,66,.34),transparent 65%),linear-gradient(155deg,#123b25,#071d12);box-shadow:0 38px 100px rgba(0,0,0,.72);text-align:center}.intro-tag{display:inline-flex;padding:5px 12px;border:1px solid rgba(234,208,140,.48);border-radius:999px;color:var(--gold2);font-size:10px;font-weight:900;letter-spacing:.16em}.intro-bag{font-size:58px;line-height:1;margin:18px 0 8px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}.intro-card h2{font-size:clamp(24px,6vw,34px);line-height:1.2}.intro-story{margin:14px auto 0;max-width:40ch;color:rgba(255,255,255,.78);font-size:15px;line-height:1.85}.intro-item{display:flex;align-items:center;gap:13px;margin:20px auto 0;padding:13px 15px;border:1px solid rgba(234,208,140,.35);border-radius:15px;background:rgba(255,255,255,.07);text-align:left}.intro-disc{font-size:38px;line-height:1}.intro-item small{display:block;color:var(--gold2);font-size:9.5px;font-weight:900;letter-spacing:.14em}.intro-item b{display:block;margin-top:2px;font-size:16px}.intro-hint{margin-top:17px;color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.7}.intro-open{width:100%;min-height:50px;margin-top:22px;border:0;border-radius:13px;padding:12px 18px;background:var(--gold2);color:var(--deep2);cursor:pointer;font-weight:900;font-size:14px;transition:transform .16s,filter .16s}.intro-open:hover{transform:translateY(-2px);filter:brightness(1.06)}.intro-open:active{transform:scale(.98)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap{width:min(100% - 24px,1120px)}.bar-title{display:none}.group-head{align-items:start}.grid{grid-template-columns:1fr}.hero{padding-top:35px}.ach-card{border-radius:17px}.group.bonus{padding:24px 12px 14px}.hud{left:10px;bottom:10px;padding:7px 16px 7px 7px;font-size:12.5px;gap:9px}.hud .ico{width:32px;height:32px;font-size:14px}.hud .lbl small{display:none}.intro-event{padding:14px}.intro-card{border-radius:20px}.intro-bag{font-size:50px}.intro-story{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.track i,.ach-card{transition:none}.ach-card.is-link:hover{transform:none}}