:root{color-scheme:dark;--bg:#101923;--bg2:#14212b;--panel:#1a2934;--panel2:#20303b;--text:#f7f4ec;--muted:#a4b1b8;--line:rgba(216,231,226,.13);--gold:#f4b763;--teal:#8fd2c0;--white:#fff;--radius:18px;--shadow:0 18px 80px rgba(0,0,0,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;color:var(--text);background:var(--bg);font-family:'Noto Sans Thai Looped',Tahoma,Arial,sans-serif;line-height:1.65;overflow-x:hidden}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.skip-link{position:absolute;left:16px;top:-100px;background:var(--gold);color:#101923;z-index:200;padding:8px 15px;border-radius:8px}.skip-link:focus{top:12px}.ambient{position:absolute;z-index:-1;pointer-events:none;filter:blur(12px);opacity:.5}.ambient-one{width:500px;height:500px;right:-240px;top:130px;background:radial-gradient(circle,rgba(45,118,111,.19),transparent 65%)}.ambient-two{width:600px;height:600px;left:-370px;top:250px;background:radial-gradient(circle,rgba(183,112,58,.13),transparent 65%)}
.site-header{height:87px;position:sticky;top:0;z-index:100;background:rgba(16,25,35,.88);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(20px)}.nav-inner{display:flex;height:100%;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;min-width:244px}.brand-mark{width:45px;height:45px;display:grid;place-items:center}.brand-mark svg{width:100%;height:100%}.brand-copy{display:flex;flex-direction:column;line-height:1.35}.brand-copy strong{font-size:16px;font-weight:800;letter-spacing:-.3px}.brand-copy small{font:600 9px/1.7 'Outfit',Arial,sans-serif;letter-spacing:2.3px;color:var(--gold)}.desktop-nav{display:flex;align-items:center;justify-content:center;gap:33px;flex:1}.desktop-nav a{font-size:13px;font-weight:600;color:#c2cbd0;transition:.2s}.desktop-nav a:hover{color:var(--gold)}.nav-cta{border:1px solid rgba(244,183,99,.43);font-size:13px;color:var(--gold);font-weight:700;padding:9px 18px;border-radius:10px;white-space:nowrap}.nav-cta span{margin-left:10px}.nav-cta:hover{background:rgba(244,183,99,.10)}.menu-toggle,.mobile-nav{display:none}
.hero{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:64px;padding-top:75px;padding-bottom:74px}.eyebrow,.section-kicker{font:700 11px/1.5 'Outfit',Arial,sans-serif;letter-spacing:2.6px;color:var(--gold);display:flex;align-items:center;gap:11px}.tiny-dot{width:7px;height:7px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 5px rgba(244,183,99,.11)}.eyebrow-line{width:18px;height:1px;background:rgba(244,183,99,.4)}.hero h1{margin:23px 0 20px;font-size:clamp(38px,4.5vw,64px);line-height:1.28;letter-spacing:-2px;font-weight:800}.hero h1 span{color:var(--gold)}.hero-desc{max-width:540px;font-size:15px;line-height:2.1;color:var(--muted);margin:0}.hero-buttons{display:flex;gap:13px;align-items:center;margin:32px 0 48px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border-radius:11px;padding:12px 22px;min-height:48px;font-weight:700;font-size:14px;border:1px solid transparent;transition:transform .15s,background .15s,box-shadow .15s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--gold);color:#17212a;box-shadow:0 8px 30px rgba(244,183,99,.17)}.button-primary:hover{background:#ffd08c}.button-ghost{border-color:#3e5057;color:var(--text);background:rgba(255,255,255,.025)}.button-ghost:hover{background:rgba(255,255,255,.06)}.hero-stats{display:flex;gap:25px;align-items:center}.hero-stats>div:not(.stat-divider){display:flex;flex-direction:column;gap:1px}.hero-stats b{font:700 25px/1.2 'Outfit',Arial,sans-serif;color:var(--text)}.hero-stats span{font-size:11px;color:var(--muted)}.stat-divider{height:28px;width:1px;background:var(--line)}
.hero-art{min-height:530px;position:relative;overflow:hidden;background:radial-gradient(circle at 60% 40%,#2e635a 0%,#1c4241 32%,#16323a 56%,#18242f 94%);border:1px solid rgba(180,214,199,.16);border-radius:25px;box-shadow:var(--shadow);isolation:isolate}.hero-art:before{content:'';position:absolute;inset:0;opacity:.17;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(circle at 45% 40%,black,transparent 75%)}.hero-art:after{content:'';position:absolute;width:330px;height:150px;top:145px;left:65px;background:rgba(129,232,193,.11);filter:blur(65px);border-radius:50%;z-index:-1}.art-top{position:absolute;top:28px;left:30px;right:30px;display:flex;align-items:center;gap:8px;color:#cfe4d9;font:600 10px 'Outfit',Arial,sans-serif;letter-spacing:2px}.art-top>span:last-child{margin-left:auto;font-size:24px;color:var(--gold)}.live-dot{width:8px;height:8px;border-radius:50%;background:#93dfbd;box-shadow:0 0 0 4px rgba(147,223,189,.17)}.orbit{position:absolute;border:1px solid rgba(179,235,201,.17);border-radius:50%;transform:rotate(-23deg)}.orbit-a{width:630px;height:280px;left:-95px;top:90px}.orbit-b{width:530px;height:210px;left:-20px;top:130px}.art-disc{width:365px;height:365px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(225,236,207,.12);background:radial-gradient(circle,#366961 0,#214e4d 54%,rgba(22,44,52,.5) 73%);position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);box-shadow:0 0 0 21px rgba(174,240,194,.027),0 0 0 46px rgba(174,240,194,.023)}.disc-ring{width:80%;transform:rotate(-9deg);filter:drop-shadow(0 24px 13px rgba(0,0,0,.35))}.art-caption{position:absolute;bottom:36px;left:35px;right:25px;display:flex;flex-direction:column;line-height:1.1}.art-label{font:600 10px/1.5 'Outfit',Arial,sans-serif;letter-spacing:2.4px;color:#a0d2b6}.art-caption strong{font:800 clamp(54px,6vw,86px)/.96 'Outfit',Arial,sans-serif;letter-spacing:-4px;margin-top:6px}.art-caption strong i{color:var(--gold);font-style:normal}.art-bottom{font-size:12px;margin-top:16px;color:#c9ddd5}.art-corner{position:absolute;bottom:32px;right:25px;writing-mode:vertical-rl;font:600 11px 'Outfit';letter-spacing:1.4px;color:#b9d4cd}.art-corner b{color:var(--gold)}.art-pixel{position:absolute;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}.pixel-one{top:120px;right:62px}.pixel-two{top:240px;left:43px;width:5px;height:5px;background:var(--teal)}.pixel-three{top:310px;right:30px;width:5px;height:5px}
.notice{border:1px solid rgba(143,210,192,.18);background:#182a34;display:flex;align-items:center;gap:16px;border-radius:14px;padding:17px 22px}.notice-icon{display:grid;place-items:center;border-radius:9px;background:rgba(143,210,192,.11);color:var(--teal);font-size:23px;width:37px;height:37px;flex-shrink:0}.notice p{font-size:12px;color:#bdccd0;margin:0;flex:1}.notice b{color:var(--text);margin-right:7px}.notice>span{font:700 10px 'Outfit';letter-spacing:1.6px;color:var(--teal);white-space:nowrap}
.catalog-section{padding-top:114px;padding-bottom:125px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:25px}.section-kicker{display:block}.section-top h2,.about-left h2{font-size:clamp(29px,3.2vw,43px);font-weight:800;letter-spacing:-.9px;line-height:1.45;margin:11px 0 8px}.title-period{color:var(--gold)}.section-top p{font-size:13px;color:var(--muted);margin:0}.counter-chip{font-size:12px;color:#a9c4ba;border:1px solid rgba(143,210,192,.25);background:rgba(143,210,192,.07);padding:7px 13px;border-radius:100px;white-space:nowrap}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:34px 0 27px}.search-wrap{display:flex;align-items:center;gap:12px;max-width:490px;width:100%;border:1px solid #3b4a53;background:#192630;border-radius:11px;padding:0 15px;transition:border .2s}.search-wrap:focus-within{border-color:var(--gold)}.search-wrap svg{width:18px;height:18px;color:#9eb0b6;flex-shrink:0}.search-wrap input{height:50px;color:white;outline:none;border:0;min-width:0;width:100%;font-size:13px;background:none}.search-wrap input::placeholder{color:#82929b}.filter-controls{display:flex;gap:6px;padding:5px;border:1px solid #2c3e49;border-radius:11px;background:#16232d}.filter{background:transparent;border:0;border-radius:8px;font-size:12px;color:#9cabb2;padding:9px 15px;white-space:nowrap}.filter:hover{color:white}.filter.is-active{background:#35424c;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.13)}.mod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.mod-card{background:#192630;border:1px solid #2e404a;border-radius:19px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .2s,border-color .2s}.mod-card:hover{transform:translateY(-4px);border-color:#5b6c67}.cover{position:relative;height:215px;overflow:hidden;display:flex;flex-direction:column;justify-content:end;padding:24px;background:radial-gradient(ellipse at 80% 18%,#476b4d 0,transparent 45%),linear-gradient(145deg,#182b2e,#315e51 49%,#132b36)}.cover:before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 25%,rgba(0,0,0,.5)),radial-gradient(ellipse at 22% 55%,rgba(227,193,104,.19),transparent 32%)}.cover:after{content:'';position:absolute;right:-40px;bottom:-50px;width:200px;height:200px;border:1px solid rgba(223,236,195,.3);border-radius:36%;transform:rotate(35deg);box-shadow:0 0 0 24px rgba(255,255,255,.025),0 0 0 55px rgba(255,255,255,.017)}.cover.navy{background:linear-gradient(130deg,#26384d,#345b67,#1d252f)}.cover.gold{background:linear-gradient(135deg,#564632,#8e6341,#352b31)}.cover-mark{position:absolute;right:25px;top:54px;font:800 110px/1 'Outfit';color:rgba(246,217,168,.12);transform:rotate(-10deg)}.cover-pill{position:absolute;top:17px;left:18px;border-radius:7px;color:#e6f4e7;background:rgba(10,29,24,.66);backdrop-filter:blur(4px);padding:6px 11px;z-index:1;font:600 10px 'Outfit';letter-spacing:1px}.cover-title{position:relative;z-index:1;font:800 28px/1.06 'Outfit',Arial,sans-serif;letter-spacing:-.7px;max-width:90%;text-shadow:0 4px 10px rgba(0,0,0,.27)}.cover-sub{position:relative;z-index:1;color:#e0dcbb;font:600 10px 'Outfit';letter-spacing:2.5px;margin-top:9px}.mod-info{padding:21px;flex:1;display:flex;flex-direction:column;gap:12px}.mod-info h3{font-size:18px;line-height:1.5;margin:0}.mod-summary{font-size:12px;color:var(--muted);line-height:1.9;min-height:47px;margin:0}.mod-meta{display:flex;flex-wrap:wrap;gap:8px;margin:1px 0 6px}.meta-tag{border:1px solid #364852;color:#c2d0d0;font:600 10px/1.5 'Outfit',Arial,sans-serif;padding:5px 9px;border-radius:6px}.meta-tag.ready{color:#a4e2c2;border-color:#457a6d;background:rgba(83,170,135,.09)}.meta-tag.pending{color:#f4ca90;border-color:#75634b;background:rgba(244,183,99,.06)}.card-action{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;gap:8px}.card-action span{font-size:11px;color:#afc2bf}.card-action button{background:transparent;border:0;padding:6px 0 6px 7px;color:var(--gold);font-size:12px;font-weight:700}.card-action button:hover{text-decoration:underline}.empty-state{text-align:center;border:1px dashed #42545c;background:#182630;border-radius:16px;padding:55px 25px}.empty-state>div{font-size:50px;color:var(--gold);line-height:1}.empty-state h3{font-size:18px;margin:15px 0 2px}.empty-state p{color:var(--muted);font-size:13px;margin:0 0 22px}
.how-section{background:linear-gradient(180deg,#182731,#17242e);border-block:1px solid var(--line);padding:100px 0 104px}.muted-word{color:var(--teal)}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.step{border:1px solid #32434d;background:#1d2d36;border-radius:17px;padding:27px 29px;min-height:228px;position:relative}.step-no{font:700 11px 'Outfit';color:var(--gold);letter-spacing:2px}.step-symbol{font-size:35px;position:absolute;right:26px;top:19px;color:var(--teal);font-family:Arial}.step h3{font-size:18px;margin:31px 0 7px}.step p{color:var(--muted);font-size:12px;line-height:1.95;margin:0}.about-section{padding-block:110px 116px;display:grid;grid-template-columns:1fr 400px;gap:75px;align-items:center}.about-left h2{margin:16px 0 22px}.about-left h2 span{color:var(--gold)}.about-left p{font-size:14px;line-height:2.15;color:var(--muted);max-width:590px}.text-link{display:inline-flex;align-items:center;gap:15px;color:var(--gold);font-weight:700;font-size:13px;margin-top:15px;border-bottom:1px solid #967347;padding-bottom:7px}.text-link:hover{color:#f5ce98}.about-card{background:linear-gradient(140deg,#244d4c,#19353b 60%,#1e2e36);border:1px solid #40685f;padding:29px;border-radius:20px;min-height:275px}.about-card-top,.about-foot{display:flex;align-items:center;justify-content:space-between;gap:15px}.about-card-top{font:600 11px 'Outfit';letter-spacing:2px;color:#b9dccd}.about-card-top>span:last-child{font-size:24px;color:var(--gold)}.about-card h3{font-size:26px;line-height:1.5;margin:27px 0 6px}.about-card p{font-size:11px;line-height:2;color:#bfd4d2}.about-foot{margin-top:25px;border-top:1px solid rgba(255,255,255,.14);padding-top:14px;font:600 10px 'Outfit';letter-spacing:1px;color:#d0ded5}.about-foot span{color:#8bd5c0}.footer{background:#0c151d;border-top:1px solid #28363e}.footer-inner{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8e9fa5;font-size:11px}.footer-brand{color:#e9e7dd;font-weight:700;font-size:13px}.footer-brand>span{color:var(--gold);margin-right:8px}.footer-brand small{font:700 9px 'Outfit';margin-left:12px;color:#789d92;letter-spacing:1.5px}.footer a{color:var(--gold)}
.mod-dialog{width:min(685px,calc(100% - 24px));max-height:min(88vh,840px);padding:0;border-radius:19px;border:1px solid #547268;color:var(--text);background:#16242e;box-shadow:0 40px 120px rgba(0,0,0,.65);overflow-y:auto}.mod-dialog::backdrop{background:rgba(4,11,16,.79);backdrop-filter:blur(5px)}.dialog-head{padding:30px 32px 24px;background:radial-gradient(circle at right,#2d5549,transparent 65%),#1b3439;position:relative;border-bottom:1px solid var(--line)}.dialog-heading{font:800 29px/1.2 'Outfit',Arial,sans-serif;margin:7px 38px 7px 0}.dialog-sub{font-size:12px;color:#c5d7d1;margin:0}.dialog-close{position:absolute;top:18px;right:18px;background:#1b3037;border:1px solid #4a6860;color:white;border-radius:8px;width:35px;height:35px;font-size:20px}.dialog-content{padding:27px 32px 30px}.dialog-desc{font-size:13px;color:#b4c5c7;line-height:2;margin:0 0 21px}.dialog-title-sm{font-size:16px;font-weight:800;margin:22px 0 12px}.download-list{display:grid;gap:11px}.download-file{display:flex;align-items:center;gap:14px;justify-content:space-between;background:#1e303a;border:1px solid #3a4c55;padding:15px 16px;border-radius:11px}.download-file-name{min-width:0;overflow-wrap:anywhere;flex:1}.download-file-name b{display:block;font-size:12px}.download-file-name span{display:block;font-size:11px;color:#a9bcbd;margin-top:2px}.download-file a,.download-file button{padding:10px 13px;white-space:nowrap;background:var(--gold);color:#14222a;font-weight:800;border:none;border-radius:8px;font-size:11px;text-align:center}.download-file a:hover{background:#ffd08c}.download-file button:disabled{background:#36454a;color:#aeb9b9;cursor:not-allowed}.dialog-list{color:#acbdc1;font-size:12px;line-height:2.1;margin:0;padding-left:24px}.dialog-hint{background:rgba(244,183,99,.075);border-left:3px solid var(--gold);color:#dbcbb2;padding:11px 15px;font-size:11px;line-height:1.8;border-radius:0 7px 7px 0;margin-top:18px}.dialog-footer{display:flex;gap:10px;justify-content:space-between;margin-top:25px;align-items:center}.share-btn{background:#293d45;border:1px solid #4a5d60;color:#dfe8e5;font-size:12px;font-weight:700;border-radius:8px;padding:9px 14px}.dialog-footer button:last-child{background:none;border:0;color:var(--gold);font-size:12px;font-weight:700}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;background:#efc78a;border:1px solid #fbe1aa;color:#13252b;border-radius:12px;padding:11px 17px;font-size:12px;font-weight:700;box-shadow:0 15px 35px rgba(0,0,0,.22);max-width:calc(100vw - 30px);text-align:center}
@media(max-width:1100px){.hero{gap:34px}.desktop-nav{gap:18px}.brand{min-width:215px}.brand-copy strong{font-size:14px}.hero-art{min-height:490px}.art-disc{width:320px;height:320px}.art-caption strong{font-size:66px}.filter{padding-inline:11px}}
@media(max-width:860px){.desktop-nav,.nav-cta{display:none}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;margin-left:auto;background:none;border:1px solid #40525c;border-radius:10px;padding:10px}.menu-toggle span{height:2px;background:#e7ece8;width:100%}.mobile-nav{display:flex;flex-direction:column;gap:0;padding:7px 24px 14px;border-bottom:1px solid #2d3d46;background:#101923}.mobile-nav[hidden]{display:none}.mobile-nav a{padding:11px 4px;font-size:13px;color:#d6e0dc}.hero{grid-template-columns:1fr;padding-top:52px;gap:38px}.hero-copy{max-width:690px}.hero h1{font-size:clamp(40px,6vw,63px)}.hero-art{min-height:430px}.art-disc{top:40%}.art-caption strong{font-size:65px}.catalog-toolbar{align-items:stretch;flex-direction:column}.search-wrap{max-width:none}.filter-controls{width:max-content;max-width:100%}.mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-section{grid-template-columns:1fr;gap:35px}.about-card{max-width:550px}.steps-grid{gap:12px}.step{padding:21px}}
@media(max-width:560px){.shell{width:calc(100% - 34px)}.site-header{height:73px}.brand-mark{height:40px;width:40px}.brand-copy strong{font-size:13px}.brand-copy small{font-size:8px;letter-spacing:1.7px}.hero{padding-top:41px;padding-bottom:35px;gap:35px}.hero h1{font-size:37px;letter-spacing:-.8px;margin:18px 0}.hero-desc{font-size:13px}.eyebrow{font-size:9px;letter-spacing:1.6px}.hero-buttons{margin:25px 0 32px;gap:9px;flex-wrap:wrap}.button{font-size:12px;padding:11px 13px;min-height:44px;gap:9px}.hero-stats{gap:12px}.hero-stats b{font-size:19px}.hero-stats span{font-size:9px}.stat-divider{height:24px}.hero-art{min-height:360px;border-radius:18px}.art-disc{width:255px;height:255px;top:41%}.art-top{top:20px;left:20px;right:20px;font-size:8px}.art-caption{left:23px;bottom:25px}.art-caption strong{font-size:55px;letter-spacing:-2px}.art-bottom{font-size:9px}.art-corner{right:14px;bottom:20px;font-size:8px}.notice{align-items:start;padding:13px}.notice>span{display:none}.notice p{font-size:11px}.notice b{display:block;margin-bottom:2px}.catalog-section{padding-top:73px;padding-bottom:77px}.section-top{align-items:start}.section-top h2,.about-left h2{font-size:28px}.section-top p{font-size:11px}.counter-chip{font-size:10px;padding:5px 9px}.catalog-toolbar{margin-top:26px}.filter-controls{width:100%;justify-content:space-between}.filter{flex:1;font-size:10px;padding-inline:5px}.mod-grid{grid-template-columns:1fr;gap:17px}.cover{height:208px}.how-section{padding:68px 0}.steps-grid{grid-template-columns:1fr}.step{min-height:170px}.step h3{margin-top:19px}.about-section{padding:70px 0}.about-left p{font-size:12px}.about-card{padding:22px}.footer-inner{padding:24px 0;flex-direction:column;gap:9px;text-align:center}.download-file{flex-wrap:wrap}.download-file a,.download-file button{width:100%}.dialog-head{padding:23px 21px}.dialog-heading{font-size:24px}.dialog-content{padding:18px 21px 23px}.dialog-footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* จำกัดองค์ประกอบแสงตกแต่งในจอเล็กเพื่อป้องกันการเลื่อนแนวนอน */
@media(max-width:860px){.ambient{display:none}}

/* v3 86-game catalog: legible long game titles */
.cover-title{font-size:clamp(16px,2vw,26px);line-height:1.14;overflow-wrap:anywhere;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.mod-info h3{overflow-wrap:anywhere}.mod-card{content-visibility:auto;contain-intrinsic-size:auto 430px}
@media(max-width:560px){.cover-title{font-size:clamp(19px,5.5vw,28px)}.filter{font-size:10px}}

/* V4: ภาพหน้าปกเกมที่อัปโหลดเอง — เริ่มทดสอบกับ Akatori */
.cover.has-artwork {position:relative;display:block;padding:0;height:240px;background:#1d2934;isolation:isolate}
.cover.has-artwork::before,.cover.has-artwork::after{display:none}
.cover-photo-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(17px) brightness(.55) saturate(.9);transform:scale(1.14);z-index:0}
.cover-photo-foreground{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.32))}
.cover.has-artwork .cover-pill{z-index:2;background:rgba(9,24,29,.84);box-shadow:0 3px 15px rgba(0,0,0,.25)}
.dialog-artwork{display:flex;justify-content:center;align-items:center;background:#1b2631;border-bottom:1px solid #34444b;padding:14px;overflow:hidden}
.dialog-artwork img{display:block;max-width:100%;width:auto;height:auto;max-height:min(390px,48vh);object-fit:contain;border-radius:9px;box-shadow:0 10px 25px rgba(0,0,0,.28)}
@media(max-width:560px){.cover.has-artwork{height:245px}.dialog-artwork{padding:10px}.dialog-artwork img{max-height:320px}}

/* Preserve the game logo on image-based covers; PC tag remains under the card. */
.cover.has-artwork .cover-pill{display:none}


/* V5 — cover images with responsive orientation-aware bleed, no visual side borders */
.mod-grid {align-items:stretch;gap:24px}
.mod-card {border:1px solid rgba(193,223,214,.15);background:#182831;border-radius:18px;isolation:isolate}
.mod-card:hover {border-color:rgba(248,194,117,.45);box-shadow:0 14px 40px rgba(0,0,0,.24)}
.cover.cover-v5 {height:254px;padding:0;display:block;position:relative;isolation:isolate;overflow:hidden;background:var(--cover-tint,#1a2934)}
.cover.cover-v5::before,.cover.cover-v5::after {display:none}
.cover-v5 .cover-photo-back {position:absolute;inset:-28px;width:calc(100% + 56px);height:calc(100% + 56px);object-fit:cover;transform:none;filter:blur(25px) brightness(.62) saturate(1.2);opacity:1;z-index:0}
.cover-v5 .cover-photo-foreground {position:absolute;z-index:1;width:100%;height:100%;inset:0;display:block;filter:none}
.cover-v5.ratio-landscape .cover-photo-foreground {object-fit:cover;object-position:center center;mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)}
.cover-v5.ratio-square .cover-photo-foreground {object-fit:contain;object-position:center center;mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%);mask-composite:intersect}
.cover-v5.ratio-portrait .cover-photo-foreground {object-fit:contain;object-position:center center;mask-image:linear-gradient(to right, transparent 0%,#000 18%,#000 82%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);mask-composite:intersect}
.cover-v5 .cover-glow {position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,13,20,.98) 0%,rgba(9,17,23,.79) 18%,rgba(10,19,26,.28) 45%,transparent 70%),linear-gradient(180deg,rgba(5,15,21,.38),transparent 35%)}
.cover-v5 .cover-topline {position:absolute;z-index:3;top:14px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:9px;color:#e8f7f1;font:700 10px/1.2 'Outfit',Arial,sans-serif;letter-spacing:1.2px;text-shadow:0 2px 8px #13252b}
.cover-v5 .cover-topline span:first-child {padding:7px 10px;border:1px solid rgba(255,255,255,.23);background:rgba(11,24,30,.35);border-radius:99px;backdrop-filter:blur(8px)}
.cover-v5 .cover-topline span:last-child {border:1px solid rgba(255,255,255,.23);background:rgba(11,24,30,.35);border-radius:99px;padding:7px 10px;backdrop-filter:blur(8px)}
.cover-v5 .cover-label {position:absolute;z-index:3;bottom:16px;left:20px;right:19px;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.62)}
.cover-v5 .cover-label>span {color:#e1c39d;font-size:10px;font-weight:700;letter-spacing:.7px}
.cover-v5 .cover-name {font:800 clamp(20px,2.2vw,26px)/1.17 'Outfit','Noto Sans Thai Looped',sans-serif;letter-spacing:-.4px;color:#fff;margin:5px 0 0;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.cover-v5 .cover-name.long {font-size:19px;line-height:1.17}
.cover-v5 .cover-name.very-long {font-size:16px;line-height:1.22;letter-spacing:-.25px}
.cover-v5 .cover-hit {position:absolute;z-index:4;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:pointer}
.cover-v5 .cover-hit:focus-visible {outline:3px solid #f4b763;outline-offset:-5px;border-radius:0}
.cover-v5.ratio-duo .cover-photo-foreground {width:55%;object-fit:contain;mask-image:linear-gradient(to right,#000 0%,#000 77%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);mask-composite:intersect;left:0}
.cover-v5.ratio-duo .cover-photo-foreground.duo-second {left:auto;right:0;mask-image:linear-gradient(to left,#000 0%,#000 77%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);mask-composite:intersect}
.mod-info.with-image {padding:17px 20px 18px;gap:10px}
.mod-info.with-image .mod-summary {min-height:unset;line-height:1.5;font-size:11px;color:#b7c7c5}
.mod-info.with-image .mod-meta {margin:2px 0 5px}
.mod-info.with-image .card-action {padding-top:12px}
.dialog-artwork-v5 {height:clamp(255px,42vw,405px);position:relative;isolation:isolate;overflow:hidden;background:#22333a}
.dialog-art-background {position:absolute;inset:-25px;width:calc(100% + 50px);height:calc(100% + 50px);object-fit:cover;filter:blur(35px) brightness(.60) saturate(1.12)}
.dialog-art-foreground {position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.30));mask-image:linear-gradient(to right, transparent 0%,#000 12%,#000 88%,transparent 100%)}
.dialog-artwork-v5.ratio-landscape .dialog-art-foreground {object-fit:contain}
.dialog-artwork-v5.ratio-duo .dialog-art-foreground {position:absolute;top:0;left:4%;width:48%;mask-image:linear-gradient(to right,#000 0%,#000 85%,transparent 100%)}
.dialog-artwork-v5.ratio-duo .dialog-art-foreground.second {left:auto;right:4%;mask-image:linear-gradient(to left,#000 0%,#000 85%,transparent 100%)}
@media(max-width:860px){.cover.cover-v5{height:247px}}
@media(max-width:560px){.cover.cover-v5{height:265px}.cover-v5 .cover-name{font-size:clamp(23px,5.5vw,28px)}.cover-v5 .cover-name.long{font-size:21px}.cover-v5 .cover-name.very-long{font-size:18px}.dialog-artwork-v5{height:300px}}

/* V5 refinement: fade the actual *edges of the artwork*, not the empty letterbox around it. */
.cover-v5.ratio-square:not(.ratio-duo) .cover-photo-foreground,
.cover-v5.ratio-portrait:not(.ratio-duo) .cover-photo-foreground {
  width:auto;
  height:100%;
  max-width:none;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  object-fit:cover;
  mask-image:linear-gradient(to right, transparent 0%, #000 21%, #000 79%, transparent 100%),
             linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-composite:intersect;
}
.dialog-artwork-v5.ratio-square:not(.ratio-duo) .dialog-art-foreground,
.dialog-artwork-v5.ratio-portrait:not(.ratio-duo) .dialog-art-foreground {
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:auto;
  height:100%;
  max-width:none;
  object-fit:cover;
  mask-image:linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
}


/* V6 — Homepage site cover + creator card */
.site-cover{padding-top:26px;padding-bottom:10px}
.site-cover-figure{margin:0;overflow:hidden;border-radius:26px;border:1px solid rgba(214,231,228,.14);background:#18242c;box-shadow:var(--shadow)}
.site-cover-figure img{display:block;width:100%;height:auto}
.site-cover-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:18px 6px 0}
.site-cover-meta h2{margin:8px 0 10px;font-size:clamp(26px,3.3vw,42px);line-height:1.15;letter-spacing:-.4px}
.site-cover-meta p{margin:0;color:#b7c7c5;max-width:760px;font-size:14px}
.site-cover-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.about-stack{display:grid;gap:18px}
.creator-card{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;padding:16px;border-radius:24px;background:linear-gradient(180deg,#17252f,#132028);border:1px solid rgba(193,223,214,.15)}
.creator-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.08)}
.creator-card h3{margin:8px 0 6px;font-size:28px;line-height:1.15}
.creator-card p{margin:0;color:#b7c7c5;font-size:13px;line-height:1.6}
@media(max-width:980px){.site-cover-meta{flex-direction:column;align-items:flex-start}.site-cover-actions{justify-content:flex-start}.creator-card{grid-template-columns:120px 1fr}}
@media(max-width:560px){.site-cover{padding-top:20px}.site-cover-figure{border-radius:18px}.site-cover-meta{padding-top:14px;gap:16px}.site-cover-meta h2{font-size:24px}.site-cover-meta p{font-size:12px}.creator-card{grid-template-columns:1fr;gap:14px;padding:14px;border-radius:18px}.creator-card img{aspect-ratio:4/3}.creator-card h3{font-size:22px}}


/* V7 — fit cover art safely inside frame and prevent title overflow */
.cover.cover-v5{height:258px}
.cover-v5 .cover-photo-foreground{
  position:absolute;
  inset:12px 12px 14px 12px;
  width:calc(100% - 24px);
  height:calc(100% - 26px);
  object-fit:contain !important;
  object-position:center center !important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.25));
  transform:none !important;
}
.cover-v5 .cover-photo-back{filter:blur(28px) brightness(.56) saturate(1.15)}
.cover-v5.ratio-duo .cover-photo-foreground{width:48%;height:calc(100% - 28px);top:14px;bottom:14px;left:2%}
.cover-v5.ratio-duo .cover-photo-foreground.duo-second{left:auto;right:2%}
.cover-v5 .cover-label{left:18px;right:18px;bottom:14px}
.cover-v5 .cover-name{
  font:800 clamp(16px,1.55vw,23px)/1.12 'Outfit','Noto Sans Thai Looped',sans-serif;
  letter-spacing:-.3px;
  margin-top:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  text-wrap:balance;
}
.cover-v5 .cover-name.long{font-size:18px}
.cover-v5 .cover-name.very-long{font-size:15px;line-height:1.16}
.cover-v5 .cover-topline{top:12px;left:12px;right:12px}
.mod-info.with-image{padding:16px 18px 18px}
.dialog-art-foreground{object-fit:contain !important;object-position:center center !important;transform:none !important;left:0 !important;width:100% !important;max-width:100% !important;height:100% !important}
@media(max-width:860px){.cover.cover-v5{height:248px}}
@media(max-width:560px){
  .cover.cover-v5{height:238px}
  .cover-v5 .cover-photo-foreground{inset:10px 10px 12px 10px;width:calc(100% - 20px);height:calc(100% - 22px)}
  .cover-v5 .cover-topline{top:10px;left:10px;right:10px}
  .cover-v5 .cover-name{font-size:clamp(14px,5vw,21px);line-height:1.1}
  .cover-v5 .cover-name.long{font-size:17px}
  .cover-v5 .cover-name.very-long{font-size:14px;line-height:1.14}
  .cover-v5 .cover-label{left:14px;right:14px;bottom:12px}
}


/* V8 — specific covers centered like earlier layout */
.cover-v5.legacy-center .cover-photo-foreground{
  inset:10px !important;
  width:calc(100% - 20px) !important;
  height:calc(100% - 20px) !important;
  max-width:none !important;
  left:0 !important;
  right:0 !important;
  transform:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.cover-v5.legacy-center .cover-photo-back{filter:blur(30px) brightness(.54) saturate(1.08)}
.cover-v5.legacy-center .cover-name{max-width:100%;text-wrap:balance}
.dialog-artwork-v5.legacy-center .dialog-art-foreground{
  position:relative !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  max-width:100% !important;
}
@media(max-width:560px){
  .cover-v5.legacy-center .cover-photo-foreground{inset:8px !important;width:calc(100% - 16px) !important;height:calc(100% - 16px) !important;}
}


/* V9 — local fix ONLY for 15 requested game covers; other cards unchanged. */
.cover.cover-v5.center-art .cover-photo-foreground:not(.duo-second){
  position:absolute !important;
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  transform:none !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
  filter:none !important;
}
/* Keep the existing softened background and label gradient. */


/* V12 - Download click counter; independent of game cover styling */
.catalog-counters{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.count-all{color:#f0cf9a;border-color:rgba(244,183,99,.3);background:rgba(244,183,99,.07);white-space:nowrap}
.count-all b{font-variant-numeric:tabular-nums;font-weight:800}
.meta-tag.click-meter{color:#efc898;background:rgba(244,183,99,.07);border-color:rgba(244,183,99,.25);white-space:nowrap}
.click-meter strong{font-weight:800;font-variant-numeric:tabular-nums}
.dialog-click-meter{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;background:rgba(244,183,99,.07);border:1px solid rgba(244,183,99,.2);padding:8px 12px;border-radius:11px;color:#f0d29f;font-size:13px;margin:12px 0 21px}
.dialog-click-meter strong{font-variant-numeric:tabular-nums;font-size:17px}
.dialog-click-meter small{font-size:10px;color:#9eb4b8}
@media(max-width:560px){.catalog-counters{justify-content:flex-start}.count-all{font-size:10px}.meta-tag.click-meter{font-size:10px}.dialog-click-meter{font-size:12px}}