/* Link-ko — เว็บทางการ (หน้าเดียว จอเดียว ไม่มีการเลื่อน)
   ทุกอย่างต้องพอดีในหน้าจอเดียวเสมอ จึงล็อก body ไว้ที่ 100dvh แล้วปิด overflow
   ขนาดตัวอักษร/ระยะห่างผูกกับขนาดหน้าต่าง (clamp + vmin) หน้าจึงย่อขยายตามจอ
   แทนที่จะดันเนื้อหาให้ล้นออกไปข้างล่าง

   โทนสีและอารมณ์ยึดตาม brand/v2 (retro-tech เหลือง/น้ำเงิน/แดง) และเข้าชุดกับ
   หน้า login ในแอป (client/assets/auth.css) — วิดีโอพื้นหลัง การ์ดกระจก
   แถบสถานะขอบดำหนา ใช้ชุดเดียวกันทั้งเว็บและแอป

   ฟอนต์: Noto Sans Thai ฝังไว้ในเว็บ ไม่ดึงจาก Google Fonts ส่วน SOV_HuaHlim
   (ฟอนต์พาดหัวของแบรนด์) ไม่ได้ใช้ที่นี่ เพราะตัวพิมพ์เล็กอังกฤษของฟอนต์นั้น
   ออกมาเป็นตัวใหญ่หมด ซึ่งพังกับพาดหัวที่ปนไทย-อังกฤษแบบหน้านี้ */

@font-face{font-family:'Noto Sans Thai';src:url('assets/fonts/NotoSansThai-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('assets/fonts/NotoSansThai-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('assets/fonts/NotoSansThai-700.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --ink:#f2efe8;
  --ink-dim:rgba(242,239,232,.78);
  --ink-faint:rgba(242,239,232,.55);
  --navy:#002145; --deep:#001024;
  --blue:#0098ff; --red2:#ff575b; --yellow:#ffdf19;
  --font:'Helvetica Neue',Helvetica,'Noto Sans Thai',Arial,sans-serif;
  --BLUE:linear-gradient(155deg,#0098ff 0%,#087eea 56%,#0060c9 100%);
  --YELLOW:linear-gradient(160deg,#fff35a 0%,#ffdf19 52%,#ffc900 100%);
  --RED:linear-gradient(155deg,#ff575b 0%,#ff3c43 55%,#ff2d35 100%);
}

*{box-sizing:border-box}
html{height:100%}
/* ตรึงทั้งหน้าไว้กับหน้าจอ — position:fixed กันมือถือดึงหน้าเด้งขึ้นลงด้วย */
body{
  position:fixed;inset:0;margin:0;overflow:hidden;
  background:var(--deep);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(64px,11vh,104px) clamp(18px,4vw,32px);
}
img,svg,video{display:block;max-width:100%}
a{color:#4db4ff;text-decoration:none;transition:color .15s}
a:hover{color:var(--red2)}
h1{margin:0;line-height:1.16;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}

/* ── พื้นหลัง ─────────────────────────────────────────────────────────── */
.bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
/* ฉากในวิดีโอถูกออกแบบให้ตรงกลางเป็นช่องมองอวกาศดำว่าง เนื้อหาจึงวางทับตรงนั้นพอดี
   scrim กดเฉพาะกลางจอให้เข้มขึ้นอีกนิดเพื่อให้ตัวหนังสืออ่านออก ขอบ ๆ ปล่อยสว่างไว้ */
.scrim1{position:fixed;inset:0;z-index:-2;background:radial-gradient(46% 56% at 50% 46%,
        rgba(0,16,36,.72) 0%,rgba(0,16,36,.5) 58%,rgba(0,16,36,.16) 100%)}
.scrim2{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,16,36,.62) 0%,
        rgba(0,16,36,0) 24%,rgba(0,16,36,0) 74%,rgba(0,16,36,.7) 100%)}

/* ── แถบบน / แถบล่าง ─────────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:5;
        display:flex;align-items:center;gap:11px;
        padding:clamp(16px,2.4vh,26px) clamp(18px,4vw,34px)}
.toplink{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-dim)}
.toplink:hover{color:var(--yellow)}

/* ปุ่มเปิด/ปิดเพลง — ไอคอนลำโพงตัวเดียว สลับหน้าตาด้วยคลาส .muted
   (ขีดทับโผล่มา คลื่นเสียงหายไป) จะได้ไม่ต้องมี svg สองชุด */
.soundbtn{display:inline-flex;align-items:center;justify-content:center;
          width:34px;height:34px;flex:none;border-radius:11px;cursor:pointer;
          border:1.5px solid rgba(255,255,255,.3);background:rgba(0,16,36,.5);
          color:var(--ink);transition:color .15s,border-color .15s,background .15s}
.soundbtn:hover{color:var(--yellow);border-color:rgba(255,223,25,.6)}
.soundbtn .slash{opacity:0;transition:opacity .15s}
.soundbtn.muted{color:var(--ink-faint)}
.soundbtn.muted .wave{opacity:0}
.soundbtn.muted .slash{opacity:1}

.botbar{position:fixed;bottom:0;left:0;right:0;z-index:5;
        display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
        padding:clamp(14px,2.2vh,24px) clamp(18px,4vw,34px)}
.status{display:inline-flex;align-items:center;gap:10px;
        padding:8px 15px;border-radius:999px;border:3px solid #050505;
        background:rgba(0,25,52,.68);backdrop-filter:blur(6px);
        font-size:12px;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.status i{width:10px;height:10px;border-radius:50%;flex:none;
          background:var(--YELLOW);border:2px solid #050505}
.botlinks{display:flex;align-items:center;gap:13px;font-size:12.5px;color:var(--ink-faint)}
.botlinks a{color:var(--ink-dim)}
.botlinks a:hover{color:var(--yellow)}
.botlinks .sep{width:4px;height:4px;border-radius:50%;background:rgba(242,239,232,.35)}
/* เครดิตเพลง — จางกว่าลิงก์อื่นเพราะเป็นข้อมูลกำกับ ไม่ใช่ของที่อยากให้คนกด */
.botlinks .credit{font-size:11.5px;color:rgba(242,239,232,.42);white-space:nowrap}
.botlinks a.credit{color:rgba(242,239,232,.42)}
.botlinks a.credit:hover{color:var(--yellow)}

/* ── เนื้อหาทั้งหมดกองอยู่กลางจอ ตรงช่องมองอวกาศของฉาก ───────────────── */
.shell{width:100%;display:flex;justify-content:center}
.card{
  width:min(520px,100%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(14px,2.4vh,22px);
}

.logo{width:clamp(190px,30vmin,320px);height:auto}

.tagrow{display:flex;align-items:center;gap:9px}
.tagrow i{display:block;width:15px;height:5px;border-radius:2px;transform:skewX(-22deg)}
.tagrow span{font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--yellow);white-space:nowrap}

/* ── เลือกระบบปฏิบัติการ / ลิงก์ในการ์ด ─────────────────────────────── */
.osrow{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.os{
  padding:9px 18px;border-radius:12px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.3);background:rgba(0,16,36,.44);color:var(--ink);
  font-family:var(--font);font-size:13.5px;font-weight:700;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.os:hover{border-color:rgba(255,255,255,.55);background:rgba(0,16,36,.62)}
/* ตัวที่เลือกอยู่ ขอบเหลืองตามสีไฮไลต์ของแบรนด์ */
.os.on{border-color:var(--yellow);color:var(--yellow);background:rgba(255,223,25,.1)}

.dlmeta{font-size:12.5px;color:var(--ink-faint);margin-top:-6px}

.account{font-size:13px;color:var(--ink-dim)}
.account a{font-weight:700}

.cardlinks{display:flex;align-items:center;justify-content:center;gap:13px;font-size:12px}
.cardlinks a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-faint)}
.cardlinks a:hover{color:var(--yellow)}
.cardlinks .sep{width:4px;height:4px;border-radius:50%;background:rgba(242,239,232,.3)}
.lede strong{color:var(--ink);font-weight:600}

/* ── ปุ่มดาวน์โหลด ───────────────────────────────────────────────────── */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  height:clamp(48px,6.2vh,56px);padding:0 clamp(22px,3vw,32px);
  border-radius:14px;border:1.5px solid rgba(255,255,255,.6);
  background:var(--BLUE);color:#fff;font-weight:700;font-size:clamp(16px,1vmin + 13px,19px);
  letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(0,12,30,.4),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .08s,filter .15s;
}
.cta span{white-space:nowrap}
.cta:hover{color:#fff;filter:brightness(1.08)}
.cta:active{transform:translateY(2px)}
/* สถานะ "ยังไม่มีไฟล์ให้โหลด" — ปุ่มจางลงและมีป้ายเหลืองบอกกำกับ */
.cta.is-soon{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);
             box-shadow:inset 0 1px 0 rgba(255,255,255,.35);cursor:default}
.cta em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
        padding:4px 10px;border-radius:999px;background:var(--YELLOW);color:#050505}

/* ── หน้าเข้าสู่ระบบ / สมัครสมาชิก / บัญชีของฉัน ──────────────────────
   สามหน้านี้มีช่องกรอก คีย์บอร์ดบนมือถือจึงกินพื้นที่จนเนื้อหาอาจไม่พอจอ
   เลยปลดล็อกให้เลื่อนได้ ต่างจากหน้าแรกที่ตรึงไว้จอเดียว */
body.auth{position:static;overflow-y:auto;height:auto;min-height:100dvh;
          align-items:flex-start;padding:clamp(78px,12vh,120px) clamp(18px,4vw,32px) 48px}

.panel{
  width:min(430px,100%);margin:auto;
  padding:clamp(26px,3.4vh,36px) clamp(22px,4vw,32px);
  border-radius:26px;border:1.5px solid rgba(255,255,255,.55);
  background:linear-gradient(150deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.09) 46%,rgba(5,25,52,.26) 100%);
  backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 24px 60px rgba(0,12,30,.45),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.14);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.panel .logo.sm{width:170px}
.panel h1{font-size:22px;font-weight:700;letter-spacing:.01em}
.panel form{display:flex;flex-direction:column;gap:13px;width:100%}
.panel .cta{width:100%}
.panel .account{text-align:center}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:12px;letter-spacing:.04em;color:rgba(242,239,232,.86)}
.field input{width:100%;height:46px;padding:0 14px;font-family:var(--font);font-size:14px;color:#fff;
             background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.42);border-radius:13px;
             box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
             transition:box-shadow .14s,border-color .14s}
.field input::placeholder{color:rgba(255,255,255,.45)}
.field input:focus{outline:none;border-color:rgba(120,205,255,.95);
                   box-shadow:0 0 0 3px rgba(0,152,255,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.passhead{display:flex;align-items:baseline;justify-content:space-between}
.linkbtn{border:none;background:none;padding:0;cursor:pointer;font-family:var(--font);
         font-weight:600;font-size:12px;color:#4db4ff}
.linkbtn:hover{color:var(--red2)}

/* กล่องแจ้งข้อผิดพลาด — ซ่อนไว้จนกว่า auth.js จะใส่คลาส .on ให้ */
.err{display:none;padding:10px 13px;border-radius:13px;font-size:12.5px;font-weight:500;color:#fff2f1;
     border:1.5px solid rgba(255,255,255,.5);background:rgba(255,45,53,.28)}
.err.on{display:block}

.cta.ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);box-shadow:none}
.cta.busy{cursor:progress;opacity:.75}
.cta:disabled{cursor:not-allowed}

/* ตารางข้อมูลบัญชี */
.rows{width:100%;margin:0;display:flex;flex-direction:column;gap:2px}
.rows div{display:flex;align-items:center;justify-content:space-between;gap:14px;
          padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.12)}
.rows div:last-child{border-bottom:none}
.rows dt{font-size:12.5px;color:var(--ink-faint)}
.rows dd{margin:0;font-size:14px;font-weight:600;text-align:right;word-break:break-all}
.rows .coin{color:var(--yellow);font-size:16px;font-weight:700}

/* ── จอเตี้ย (มือถือแนวนอน / หน้าต่างที่ถูกย่อ) ────────────────────────
   พื้นที่แนวตั้งไม่พอ ตัดของที่ไม่ใช่แก่นออกก่อน แล้วบีบการ์ดให้แคบลง
   เพื่อรักษาเงื่อนไข "หนึ่งหน้าจอจบ ไม่ต้องเลื่อน" */
@media (max-height:560px){
  .card{gap:11px}
  .logo{width:clamp(150px,24vmin,200px)}
  .cardlinks{display:none}
  .botbar .copy{display:none}
}
@media (max-height:430px){
  .status{display:none}
}

/* ── จอแคบ ────────────────────────────────────────────────────────────
   ช่องมองอวกาศของฉากแคบลงตามจอ จึงกด scrim ให้เข้มขึ้นทั่วกลางจอ */
@media (max-width:860px){
  .scrim1{background:radial-gradient(70% 54% at 50% 46%,
          rgba(0,16,36,.84) 0%,rgba(0,16,36,.62) 58%,rgba(0,16,36,.32) 100%)}
}

@media (max-width:560px){
  /* ปุ่มเต็มความกว้าง แต่ต้องไม่ให้ข้อความตกบรรทัด — บีบตัวอักษรกับป้ายลงแทน */
  .cta{width:100%;gap:8px;font-size:16px;padding:0 14px}
  .cta em{font-size:10.5px;padding:3px 8px}
  .botbar{justify-content:center;gap:10px}
  /* ตัด © ทิ้งบนจอแคบ พร้อมจุดคั่นที่อยู่หน้ามัน ไม่งั้นเหลือจุดลอยท้ายบรรทัด
     (ใช้คลาสระบุตรง ๆ แทน :last-of-type เพราะ .copy ก็เป็น span จึงชิงตำแหน่งสุดท้ายไป) */
  .botlinks .copy,.botlinks .sep-copy{display:none}
  .status{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}