:root{--gradient:linear-gradient(110deg,#15ad5b,#50e479,#21be65);--gold:#d1a221;color-scheme:light}body{background:#eafbf2;color:#3c775a}header{height:83px;padding:5px 2.3% 5px 55px;gap:20px;border-bottom:1px solid #ccebd9;box-shadow:0 2px 12px #32955b0a}.logo img{width:211px;height:73px;object-fit:contain}.header-shortcuts{display:flex;align-items:center;gap:12px;flex:1;justify-content:center}.header-shortcuts>a{display:flex;align-items:center;justify-content:center;min-width:90px;min-height:40px;padding:8px 20px;border-radius:26px;background:linear-gradient(#17be68,#56e884);border:1px solid #97edb3;color:white;font-size:12px;font-weight:600;box-shadow:inset 0 1px 2px #ffffff55}.header-shortcuts>a:first-child{background:linear-gradient(#24af4c,#087a3d)}.header-shortcuts>a:hover{filter:brightness(1.07)}.header-actions{gap:9px}.header-actions .outline{background:linear-gradient(#ff7457,#e00000 65%,#b20000);color:white;border:1px solid #f58e63;border-radius:20px}.header-actions .gold-button{background:linear-gradient(#ffde4f,#ffa700 55%,#ec8e00);color:white;border-color:#ffd968;border-radius:20px}.navigation{top:83px;width:250px;gap:10px;padding:25px 18px 15px;background:white;border-color:#e0f4e9}.navigation a,.navigation a:first-child{min-height:49px;background:linear-gradient(#0dbd63,#58e27c);color:white;border:1px solid #a5e6b6;border-radius:11px;font-size:12px;font-weight:600;box-shadow:inset 0 0 0 2px #ffffff65,0 2px 5px #42a96015;padding-left:47px}.navigation a:before{background:#ffffff22;color:#f7fff5;border-radius:50%;width:27px;height:27px}.navigation a:after{color:#e3ffe9;font-weight:700}.navigation a:hover{background:linear-gradient(#00ab50,#43d86b);color:white}main{margin-left:250px;background:linear-gradient(#dcffed,#f7fff9);padding:0 18px}.announcement{margin-left:250px;background:#effff6;color:#5ba47d;border-color:#a4e2bd;padding:9px 19px}.announcement>span{color:#deb039}.announcement>a{color:#43a264}.sky-hero{margin-top:18px;border:1px solid #65d0a0;background:#0c8b65;border-radius:12px;min-height:330px;box-shadow:0 7px 24px #2c9d6614}.sky-hero>img{object-position:center}.sky-hero>div{width:64%;padding:48px 0 34px 5.8%;text-shadow:0 2px 5px #00563455}.sky-hero h2{color:#f2fff3;font-size:clamp(27px,3.1vw,43px);text-shadow:none}.sky-hero strong{color:#ffec95;display:block;font-size:1.15em}.sky-hero p{color:#a1e7ca;font-size:8px}.sky-hero div>span{color:#d7fbe8;font-size:13px}.sky-hero .gold-button{background:linear-gradient(#ffe55d,#ffb31b);border-color:#fff3aa;color:#80510b;border-radius:23px}.page-title h1{color:#1c9f61}.page-title h1 span{color:#69ac8a}.page-title>a{color:#b79b24}.section-heading h2{color:#2b9a60}.section-heading .outline{background:linear-gradient(#ffda4c,#ffaf08);color:#875100;border:1px solid #ffe196;border-radius:22px}.filters button{background:#d8fbe6;border-color:#bdecd0;color:#66b583;border-radius:22px}.filters button.selected{background:linear-gradient(#3bc778,#0fa85a);border-color:#88dfaa;color:white}.game-card{background:#fff;border-color:#b5e6cb;border-radius:13px;box-shadow:0 5px 16px #3aab6410}.card-top{background:linear-gradient(100deg,#d6f9e5,#f5ffe8);border-color:#c5ebd6}.card-top small{color:#83b798}.favorite{background:#fff6bb;color:#b5a139}.favorite[aria-pressed=true]{color:#e26575}.game-card .icon-cover{background:linear-gradient(145deg,#edfff4,#c3f3d9 60%,#faffdf)}.category-icon{color:#56b887}.game-card:hover .category-icon{color:#cfa930}.game-card .icon-cover:before{border-color:#ffffffdd;background:#ffffff65;box-shadow:0 6px 20px #3ba76a10}.game-card h3{background:linear-gradient(#fff,#effff5);border-color:#d1efde;color:#559a73}.game-card:hover{border-color:#48c784}.cover>span{background:#fffcec;color:#668f60;border-color:#b9e6c7}.caption{color:#83b294}.about{background:#f3fff7;border-color:#bde8cf}.about-brand{background:radial-gradient(ellipse,#fff,#d8f7e4);border-color:#b7e5ca}.about-brand img{width:275px}.about-brand small{color:#8eb59b}.about h2{color:#33975d}.about p:not(.eyebrow){color:#78a58a}.text-link{color:#3ea369}.article-grid article{background:linear-gradient(130deg,#fff,#effff4);border-color:#c4e9d0}.article-grid small{color:#a1bf9e}.article-grid h3{color:#53986c}.article-grid p{color:#82ab90}.article-grid a{color:#40a366}.faq h2{color:#499f6a}.faq summary{color:#629975}.faq details{border-color:#cae8d5}.faq details p{color:#81aa8e}footer{margin-left:250px;background:#ecfff2;border-color:#bce4c9}footer .logo img{width:195px}footer nav{color:#6da580}footer>p{border-color:#c3e7cf;color:#91b89a}.guide{max-width:none;padding-top:30px}.breadcrumb{color:#80b68e}.guide h1{color:#309e60}.guide h1 span{color:#b8a54d}.guide .lead{color:#84ad90}.guide-links a{background:#edfff4;border-color:#bfe8ce;color:#5fa578}.guide article{border-color:#bee4cc}.guide article h2{color:#439f66}.guide article h3{color:#99b568}.guide article p:not(.eyebrow){color:#7ba889}.toast{background:#edfff4;border-color:#a1dcb5;color:#4b9c68}
@media(max-width:1150px){header{padding-left:25px;gap:15px}.logo img{width:180px}.header-shortcuts{gap:7px}.header-shortcuts>a{min-width:75px;font-size:11px;padding:8px 13px}.header-actions .outline{display:none}.navigation{width:215px;padding:20px 12px}.navigation a{font-size:11px}main,.announcement,footer{margin-left:215px}}
@media(max-width:900px){.header-shortcuts>a:nth-child(n+3){display:none}.header-shortcuts{justify-content:flex-end}.navigation{width:195px}.navigation a{font-size:10px}main,.announcement,footer{margin-left:195px}.sky-hero>div{width:69%;padding-top:42px}.sky-hero h2{font-size:31px}}
@media(max-width:760px){header{height:78px;padding:5px 14px;gap:10px}.logo img{width:167px;height:65px}.header-shortcuts{display:none}.header-actions{margin-left:auto}.header-actions .gold-button{font-size:9px;padding:8px 12px}.header-actions #menu-toggle{color:#18b567;font-size:27px}.navigation{display:none;position:fixed;left:0;right:0;top:78px;bottom:auto;width:100%;height:auto;max-height:calc(100vh - 78px);padding:13px;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr));background:#f7fffa;border-bottom:1px solid #8bdbab}.navigation.open{display:grid}.navigation a,.navigation a:first-child{padding:10px 22px 10px 43px;font-size:10px;min-height:47px}.navigation a:before{width:25px;height:25px;left:10px}.navigation a:after{right:10px}main,.announcement,footer{margin-left:0}main{padding:0 4%}.announcement{padding:8px 4%}.sky-hero{min-height:300px;margin-top:14px}.sky-hero>img{object-position:55% center;opacity:.9}.sky-hero>div{width:70%;padding:41px 0 28px 6%}.sky-hero h2{font-size:28px}.sky-hero p{font-size:6px;letter-spacing:.6px}.sky-hero div>span{font-size:10px}.sky-hero .gold-button{font-size:8px;padding:9px 13px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.category-icon{width:53px;height:53px}.game-card h3{font-size:9px}.about-brand img{width:235px}.mobile-bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;justify-items:stretch;background:linear-gradient(110deg,#d3f8e3,#eeffed);border-color:#9cdbb3;box-shadow:0 -5px 22px #47aa6c20}.mobile-bottom a{color:#30aa67;text-align:center;align-items:center;justify-content:center}.mobile-bottom span{color:#5e9e76}.mobile-bottom a:hover,.mobile-bottom a:focus-visible{outline-color:#6ec98d;background:#ffffff70}footer{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}.guide h1{font-size:30px}}
@media(max-width:360px){.logo img{width:140px}.header-actions .gold-button{font-size:8px;padding:8px 10px}}

/* ---- CTA system: เข้าสู่ระบบ / สมัครสมาชิก ---- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:11px 24px;border:1px solid transparent;border-radius:26px;font-size:13px;font-weight:700;line-height:1.3;text-align:center;transition:filter .2s,transform .2s}
.cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cta-register{background:linear-gradient(#ffd84a,#ff9f05 60%,#ef8b00);border-color:#ffe489;color:#5a3600;box-shadow:0 4px 14px #e4960038}
.cta-login{background:linear-gradient(#19c06a,#0a9a4c);border-color:#8fe7b0;color:#fff;box-shadow:0 4px 14px #17a85a30}
.cta-ghost{background:#fff;border-color:#9fdfba;color:#1a9458}
.header-actions{align-items:center}
.header-actions .cta{min-height:40px;padding:9px 20px;font-size:12px}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px}
.sky-hero .hero-note{display:block;margin-top:11px;font-size:11px;color:#e4fff1;line-height:1.7}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin:6px 0 36px;padding:26px 30px;border:1px solid #8fdcb0;border-radius:14px;background:linear-gradient(120deg,#e8fff2,#fffbe3);box-shadow:0 6px 20px #2c9d661a}
.cta-band h2{font-size:21px;color:#1f9a5d;margin-bottom:8px}
.cta-band p{font-size:12px;color:#5f9a7b;line-height:1.9;max-width:62ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.page-title .cta{min-height:38px;padding:8px 18px;font-size:12px}
.page-title{flex-wrap:wrap}
.article-grid .cta,.guide .cta{min-height:40px;padding:9px 20px;font-size:12px;margin-top:14px}
.footer-cta{display:flex;flex-wrap:wrap;gap:10px}
.footer-cta .cta{min-height:40px;padding:9px 20px;font-size:12px}
.site-meta{width:100%;margin-top:4px;font-size:10px;line-height:1.9;color:#86ae95}
.site-meta a{color:#2f9c63;text-decoration:underline}
.contact-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.contact-list li{padding:13px 16px;border:1px solid #bee4cc;border-radius:10px;background:#f6fffa;font-size:13px;color:#6f9f85}
.contact-list b{color:#39a066;display:block;font-size:12px;margin-bottom:3px}
@media(max-width:760px){.header-actions .cta{min-height:36px;padding:8px 13px;font-size:11px;border-radius:20px}
.cta{min-height:42px;font-size:12px;padding:10px 18px}
.cta-band{padding:20px 18px;gap:14px}
.cta-band h2{font-size:18px}
.hero-cta{gap:8px}
.sky-hero .cta{min-height:36px;padding:8px 14px;font-size:11px}
.sky-hero .hero-note{font-size:9px}
.mobile-bottom{grid-template-columns:repeat(5,minmax(0,1fr))}
.mobile-bottom .m-cta{background:linear-gradient(#ffd84a,#ff9f05);border:1px solid #ffe489;color:#5a3600;margin:0 3px}
.mobile-bottom .m-cta span{color:#5a3600;font-weight:700}
.sky-hero{min-height:0}
.sky-hero>div{width:88%;padding:34px 0 26px 6%}
.hero-cta .cta-ghost{display:none}}
@media(max-width:520px){.logo img{width:124px;height:54px}
.header-actions{gap:6px}
.header-actions .cta{min-height:34px;padding:7px 11px;font-size:10px;border-radius:18px}
.footer-cta .cta,.cta-actions .cta{flex:1 1 140px}}
@media(max-width:360px){.logo img{width:104px;height:48px}
.header-actions .cta{padding:7px 8px;font-size:9px}}

/* ---- patch: ความชัดเจนของ CTA, คอนทราสต์, การเปิดเผยลิงก์พันธมิตร ---- */
:root{--color-text-body:#1f3a2b;--color-text-muted:#4d6b58;--color-brand-900:#0d4a2b;--color-gold:#d9a441}
body{color:var(--color-text-body)}
.announcement,.caption,.site-meta,.card-top small,.article-grid small,.breadcrumb,.footer>p,footer>p{color:var(--color-text-muted)}
.eyebrow{color:var(--color-brand-900);font-size:10px;letter-spacing:1.6px;font-weight:700}
.about p:not(.eyebrow),.article-grid p,.faq details p,.cta-band p,.guide .lead,.guide article p:not(.eyebrow),.contact-list li,.empty{color:var(--color-text-body);line-height:1.75}
.faq summary{color:var(--color-brand-900);font-weight:600;font-size:14px}
.game-card h3{color:var(--color-text-body);font-weight:600;font-size:12px;background:#f3fff8;border-top:1px solid var(--color-gold)}
.section-heading h2,.about h2,.faq h2,.cta-band h2,.guide article h2{color:var(--color-brand-900);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;line-height:1.45}
.article-grid h3,.guide article h3{color:var(--color-brand-900)}
.text-link,.article-grid a,.site-meta a,.announcement>a{color:#0a7a43;font-weight:600}
.filters button{color:#245c3f;border-color:#9fd9b8}
.about p:not(.eyebrow),.cta-band p,.guide .lead,.article-grid p{max-width:62ch}
.page-title h1{color:var(--color-brand-900)}
.page-title h1 span{color:var(--color-text-muted)}
/* hero: ลำดับชั้นชัดเจน หัวข้อ → คำอธิบาย → ปุ่ม → หมายเหตุ */
.sky-hero>div{position:relative;padding:46px 4% 40px 5.8%;background:linear-gradient(90deg,rgba(5,40,25,.85),rgba(5,40,25,.55) 48%,rgba(5,40,25,0) 78%)}
.sky-hero p{font-size:11px;letter-spacing:1.6px;color:#bdf3d8}
.sky-hero .hero-note{display:block;margin:14px 0 4px;font-size:12px;color:#e3fff1}
.sky-hero .cta-note{color:#d4f6e5}
.hero-cta{margin-top:14px;align-items:center}
/* ระดับของปุ่ม: primary = ส้ม (hero / แถบกลางหน้า / ท้ายเว็บ) */
.cta-lg{min-height:52px;padding:14px 30px;font-size:15px;box-shadow:0 6px 18px #e4960055}
.cta-ghost{background:#fff;border-color:#2aa86a;color:#0b6c3f;font-weight:700}
.cta-note{margin-top:10px;font-size:13px;line-height:1.7;color:var(--color-text-muted)}
.cta-actions .cta-note{flex:1 0 100%;margin-top:2px}
.affiliate-disclosure{width:100%;margin-top:10px;padding-top:12px;border-top:1px solid #c3e7cf;font-size:12px;line-height:1.85;color:var(--color-text-muted)}
/* แบรนด์: เส้นทองบาง ๆ และเขียวเข้มบนการ์ด/แผง */
.game-card,.article-grid article,.about,.cta-band,.contact-list li{border-color:#cfe6d6;box-shadow:inset 0 0 0 1px #d9a4411f,0 5px 16px #3aab6412}
.cta-band{border-color:#e2c57e;background:linear-gradient(120deg,#effff6,#fffaea)}
footer{border-top:4px solid var(--color-brand-900)}
footer nav{color:var(--color-text-body)}
/* เลย์เอาต์: จำกัดความกว้างคอลัมน์เนื้อหา */
@media(min-width:761px){main{max-width:1210px;padding-inline:clamp(20px,3vw,48px)}}
/* การ์ดหมวดหมู่: ลดพื้นที่ว่าง ไอคอนใหญ่ขึ้น */
.game-card .icon-cover{aspect-ratio:16/11;min-height:180px}
.category-icon{width:86px;height:86px}
@media(max-width:760px){.game-card .icon-cover{aspect-ratio:4/3;min-height:0}
.category-icon{width:52px;height:52px}
body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
footer{padding-bottom:24px}
.mobile-bottom a{min-height:48px;padding:5px 2px}
.mobile-bottom svg{color:var(--color-brand-900)}
.mobile-bottom span{font-size:12px;line-height:1.5;color:var(--color-text-body);font-weight:600}
.mobile-bottom .m-cta span{color:#5a3600}
.sky-hero>div{width:92%;padding:32px 5% 30px 6%;background:linear-gradient(90deg,rgba(5,40,25,.9),rgba(5,40,25,.78) 72%,rgba(5,40,25,.45))}
.sky-hero .hero-note,.sky-hero .cta-note{font-size:11px}
.game-card h3{font-size:11px}
.cta-lg{min-height:46px;padding:12px 20px;font-size:13px}}