/* ══ KingSlot 官網 — 色票取自美術正式稿（紫金） ══ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --p-deep:#2A1138; --p-dark:#3F1C52; --p:#4A2A63; --p-mid:#5E3E73; --p-nav:#302953;
  --magenta:#8F3994; --magenta-l:#B54BB8;
  --gold:#FEAB0B; --gold-l:#FFD166; --gold-d:#B57A06; --gold-soft:#E2B95C;
  --cream:#FBEACC; --cream-d:#EDD9AF;
  --navy:#102747; --teal:#246C5E;
  --ink:#241531; --txt:#EDE2F5; --txt2:#BFA9CE;
}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans TC",Arial,"Microsoft JhengHei","PingFang TC",sans-serif;
  color:var(--txt);background:var(--p-deep);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ── header ── */
.header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(63,28,82,.98),rgba(42,17,56,.94));
  border-bottom:2px solid var(--gold-d);backdrop-filter:blur(10px)}
.header .wrap{display:flex;align-items:center;gap:24px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:1px;color:var(--gold-l)}
.logo .mark{width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:linear-gradient(145deg,var(--gold-l),var(--gold-d));color:var(--p-dark);
  display:grid;place-items:center;font-size:20px;font-weight:900}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{padding:9px 15px;border-radius:8px;font-size:14px;font-weight:600;color:var(--txt);transition:.18s}
.nav a:hover{background:rgba(254,171,11,.15);color:var(--gold-l)}
.nav .cta{background:linear-gradient(145deg,var(--gold-l),var(--gold));color:var(--p-dark);font-weight:900;
  box-shadow:0 4px 14px rgba(254,171,11,.32)}
.nav .cta:hover{filter:brightness(1.08);color:var(--p-dark);transform:translateY(-1px)}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--gold-l);font-size:26px;cursor:pointer}
.tbd{display:inline-block;background:rgba(254,171,11,.18);border:1px solid var(--gold-d);color:var(--gold-l);
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:4px;margin-left:6px;vertical-align:middle}

/* ══ HERO 左文右圖 ══ */
.hero{position:relative;background:
  radial-gradient(900px 480px at 78% 42%,rgba(143,57,148,.45),transparent 62%),
  radial-gradient(700px 420px at 12% 18%,rgba(254,171,11,.13),transparent 60%),
  linear-gradient(160deg,var(--p-dark),var(--p-deep) 60%,var(--p-nav));
  padding:70px 0 78px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.014) 46px 92px)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:30px;font-size:13px;font-weight:800;
  color:var(--gold-l);background:rgba(254,171,11,.12);border:1px solid rgba(254,171,11,.42);margin-bottom:18px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:#3BE07A;box-shadow:0 0 9px #3BE07A;
  animation:blink 1.6s infinite;font-style:normal}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.28}}
.hero h1{font-size:52px;line-height:1.22;font-weight:900;color:#fff;letter-spacing:1px;
  text-shadow:0 4px 22px rgba(0,0,0,.55)}
.hero h1 b{background:linear-gradient(180deg,var(--gold-l),var(--gold));-webkit-background-clip:text;
  background-clip:text;color:transparent;display:inline-block}
.hero .sub{margin:20px 0 30px;font-size:17px;color:var(--txt2);max-width:520px}
.hero-btn{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.btn{padding:15px 34px;border-radius:40px;font-size:16px;font-weight:900;letter-spacing:1px;
  border:2px solid transparent;transition:.2s;cursor:pointer;display:inline-block;text-align:center}
.btn.a{background:linear-gradient(145deg,var(--gold-l),var(--gold-d));color:var(--p-dark);
  box-shadow:0 8px 24px rgba(254,171,11,.34)}
.btn.b{background:rgba(255,255,255,.07);color:var(--gold-l);border-color:rgba(254,171,11,.55)}
.btn.line{background:#06C755;color:#fff}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.trust{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--txt2)}
.trust b{display:block;font-size:21px;font-weight:900;color:var(--gold-l);line-height:1.3}
.hero-vis{position:relative}
.device{border-radius:16px;overflow:hidden;border:3px solid var(--gold-d);
  box-shadow:0 26px 70px rgba(0,0,0,.62),0 0 0 1px rgba(254,171,11,.22);transform:perspective(1400px) rotateY(-7deg) rotateX(2deg)}
.hero-vis .tagline{position:absolute;left:-16px;bottom:-16px;background:linear-gradient(145deg,var(--magenta),var(--p-dark));
  border:2px solid var(--gold);border-radius:12px;padding:11px 18px;font-size:14px;font-weight:800;color:var(--gold-l);
  box-shadow:0 10px 26px rgba(0,0,0,.5)}

/* ══ JP 即時彩金條 — 對齊遊戲內呈現：紫底 + 金框膠囊 + JP1 為主 ══ */
.jpbar{position:relative;overflow:hidden;padding:34px 0 30px;
  background:
    radial-gradient(680px 300px at 20% 0%,rgba(254,171,11,.20),transparent 65%),
    radial-gradient(620px 320px at 82% 110%,rgba(181,75,184,.42),transparent 62%),
    linear-gradient(180deg,#4C2362,#3F1C52 55%,#2A1138);
  border-top:3px solid var(--gold-d);border-bottom:3px solid var(--gold-d)}
.jpbar::before{content:"";position:absolute;top:-60%;left:-30%;width:60%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:rotate(18deg);animation:sweep 6s linear infinite;pointer-events:none}
@keyframes sweep{0%{left:-40%}100%{left:120%}}
.jpbar .wrap{position:relative;z-index:2}
.jphead{text-align:center;margin-bottom:22px}
.jphead b{font-size:15px;font-weight:900;letter-spacing:5px;color:var(--gold-l);
  text-shadow:0 0 16px rgba(254,171,11,.6)}
.jphead span{display:block;font-size:12px;color:#C9AEDA;letter-spacing:2px;margin-top:3px}

.jpgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px;align-items:stretch}
.jp{position:relative;border-radius:14px;padding:16px 20px;text-align:center;
  background:linear-gradient(180deg,#16326B,#0B1B3C 60%,#08132B);
  border:3px solid transparent;
  background-clip:padding-box;
  box-shadow:0 8px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12)}
.jp::before{content:"";position:absolute;inset:-3px;border-radius:14px;z-index:-1;
  background:linear-gradient(160deg,var(--gold-l),var(--gold-d) 45%,var(--gold-l))}
.jp .lb{display:inline-block;font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:900;
  letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.7)}
.jp .v{font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:900;color:#fff;
  letter-spacing:1px;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,255,255,.34),0 2px 5px rgba(0,0,0,.7)}
.jp .d{font-size:12px;color:#9FB6D8;margin-top:6px}

/* JP1 主池：放大 + 金光 */
.jp.hero{background:linear-gradient(180deg,#1A3C80,#0C1F46 58%,#081430);
  box-shadow:0 12px 36px rgba(0,0,0,.6),0 0 34px rgba(254,171,11,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.jp.hero .lb{font-size:26px;color:var(--gold-l)}
.jp.hero .v{font-size:44px;display:block;margin-top:2px}
.jp.hero .d{font-size:13px;color:#B9CBE8}
.jp.sm .lb{font-size:16px}
.jp.sm .v{font-size:26px;display:block;margin-top:2px}
.jp.sm.b2 .lb{color:#6FC3FF} .jp.sm.b3 .lb{color:#69E08E}

/* 剛剛開出 — 中獎跑馬燈 */
.winbar{margin-top:20px;border-radius:30px;overflow:hidden;position:relative;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.26));border:1px solid rgba(254,171,11,.35)}
.winbar .tag{position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;align-items:center;gap:6px;
  padding:0 16px;font-size:12px;font-weight:900;color:var(--p-dark);letter-spacing:1px;
  background:linear-gradient(145deg,var(--gold-l),var(--gold))}
.winbar .track{display:flex;gap:38px;white-space:nowrap;padding:11px 0 11px 128px;
  animation:roll 26s linear infinite;font-size:13.5px;color:#EBDCF5}
.winbar .track em{font-style:normal;color:var(--gold-l);font-weight:800}
.winbar .track i{font-style:normal;color:#69E08E;font-weight:900;font-family:"SF Mono",Menlo,monospace}
@keyframes roll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══ 區塊通用 ══ */
section{padding:72px 0}
.h2{text-align:center;font-size:34px;font-weight:900;letter-spacing:3px;margin-bottom:6px}
.h2s{text-align:center;font-size:13px;letter-spacing:3px;margin-bottom:42px;opacity:.7}
.h2::after{content:"";display:block;width:66px;height:3px;margin:15px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.dark .h2{color:var(--gold-l)} .dark .h2s{color:var(--txt2)}
.light{background:linear-gradient(180deg,var(--cream),var(--cream-d));color:var(--ink)}
.light .h2{color:var(--p-dark)} .light .h2s{color:#8A6E4C}
.light .h2::after{background:linear-gradient(90deg,transparent,var(--magenta),transparent)}

/* 平台特色（淺色區） */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.light .card{background:#fff;border:1px solid rgba(63,28,82,.13);border-radius:15px;padding:28px 25px;transition:.25s;
  box-shadow:0 3px 14px rgba(63,28,82,.07)}
.light .card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(63,28,82,.17);border-color:var(--magenta)}
.light .card .ic{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(145deg,var(--magenta-l),var(--p-dark));margin-bottom:15px}
.light .card h3{font-size:19px;font-weight:900;color:var(--p-dark);margin-bottom:8px}
.light .card p{font-size:14.5px;color:#5B4A66}

/* 精選遊戲 */
.games{background:linear-gradient(180deg,var(--p-deep),var(--p-nav))}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gcard{border-radius:15px;overflow:hidden;border:2px solid rgba(254,171,11,.3);background:#1B0D26;
  transition:.25s;position:relative;display:block}
.gcard:hover{border-color:var(--gold-l);transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.gcard img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:.4s}
.gcard:hover img{transform:scale(1.06)}
.gcard .n{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 15px;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9))}
.gcard .n b{display:block;font-size:20px;font-weight:900;color:var(--gold-l)}
.gcard .n span{font-size:12px;color:#C6B0D6}
.more{text-align:center;margin-top:34px}

/* 遊戲畫面預覽（輪播） */
.preview{background:var(--p-deep)}
.carousel{position:relative;border-radius:16px;overflow:hidden;border:2px solid var(--gold-d);background:#000}
.slides{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;position:relative}
.slide img{width:100%;aspect-ratio:16/8;object-fit:cover}
.slide .cap{position:absolute;left:0;right:0;bottom:0;padding:52px 26px 24px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86))}
.slide .cap h3{font-size:24px;font-weight:900;color:var(--gold-l)}
.slide .cap p{font-size:14px;color:#D6C4E4;margin-top:5px;max-width:660px}
.dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:3}
.dots b{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s}
.dots b.on{background:var(--gold-l);width:28px;border-radius:5px}
.arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(0,0,0,.5);color:var(--gold-l);font-size:22px;transition:.2s}
.arw:hover{background:rgba(0,0,0,.8)} .arw.prev{left:16px} .arw.next{right:16px}

/* LINE / 下載 */
.entry{background:linear-gradient(135deg,var(--magenta),var(--p-dark));border-top:2px solid var(--gold-d);
  border-bottom:2px solid var(--gold-d)}
.entry .wrap{display:flex;align-items:center;gap:28px;padding:30px 20px;flex-wrap:wrap}
.qr{display:flex;align-items:center;gap:14px}
.qr .box{width:98px;height:98px;border-radius:11px;background:var(--cream);display:grid;place-items:center;
  color:var(--p-dark);font-size:11px;font-weight:800;text-align:center;line-height:1.4;border:3px solid var(--gold)}
.qr .t{font-size:16px;font-weight:900;color:var(--gold-l)}
.qr .t span{display:block;font-size:13px;font-weight:500;color:var(--txt2);margin-top:3px}
.btns{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}

/* 合作夥伴（淺） */
.plist{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.plist span{padding:17px 32px;border:1px dashed rgba(63,28,82,.3);border-radius:11px;color:#7A6489;
  font-size:14px;font-weight:700;background:rgba(255,255,255,.55)}

/* 免責 */
.legal{background:#1B0D26;text-align:center;padding:56px 0}
.legal p{max-width:920px;margin:0 auto 26px;font-size:13px;color:var(--txt2);line-height:2}
.legal a{color:var(--gold-l)}
.legal .btn{font-size:19px;padding:17px 60px}

/* 右側浮動 */
.float{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:12px}
.float div{width:106px;background:linear-gradient(160deg,var(--magenta),var(--p-dark));border:2px solid var(--gold);
  border-radius:12px;padding:9px;text-align:center;font-size:11px;font-weight:800;color:var(--gold-l)}
.float .q{height:86px;background:var(--cream);border-radius:7px;margin-bottom:6px;display:grid;place-items:center;
  color:var(--p-dark);font-size:10px;border:0}
#top{position:fixed;right:16px;bottom:22px;z-index:50;width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);
  background:var(--p-dark);color:var(--gold-l);font-size:20px;cursor:pointer;display:none}

/* footer */
.footer{background:#150920;border-top:2px solid var(--gold-d);padding:46px 0 24px}
.finfo{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:32px}
.finfo h4{font-size:14px;color:var(--gold-l);font-weight:900;margin-bottom:6px}
.finfo p{font-size:14px;color:var(--txt2)}
.flinks{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:22px 0;border-top:1px solid rgba(254,171,11,.16)}
.flinks a{font-size:13px;color:var(--txt2)} .flinks a:hover{color:var(--gold-l)}
.copy{text-align:center;font-size:12px;color:#7A6489;padding-top:14px}

/* ══ 子頁面 ══ */
.page-hero{background:linear-gradient(135deg,var(--p-dark),var(--p-nav));padding:54px 0 46px;
  border-bottom:2px solid var(--gold-d);text-align:center}
.page-hero h1{font-size:34px;font-weight:900;color:var(--gold-l);letter-spacing:4px}
.page-hero .crumb{margin-top:12px;font-size:13px;color:var(--txt2)}
.page-hero .crumb a:hover{color:var(--gold-l)}
.doc{background:var(--p-deep);padding:46px 0 72px}
.doc .wrap{max-width:960px}
.paper{background:linear-gradient(160deg,rgba(74,42,99,.55),rgba(42,17,56,.8));
  border:1px solid rgba(254,171,11,.24);border-radius:15px;padding:38px 40px}
.warn{background:rgba(254,171,11,.11);border:1px solid var(--gold-d);border-left:4px solid var(--gold);
  border-radius:8px;padding:14px 18px;margin-bottom:28px;font-size:14px;color:#F0DFB8}
.warn b{color:var(--gold-l)}
.doc h2{font-size:20px;font-weight:900;color:var(--gold-l);margin:30px 0 12px;padding-left:13px;border-left:4px solid var(--gold)}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:16px;font-weight:800;color:#EBD9AF;margin:20px 0 8px}
.doc p,.doc li{font-size:15px;color:var(--txt);line-height:2}
.doc ul,.doc ol{margin:8px 0 8px 22px} .doc li{margin-bottom:5px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14px}
.doc th{background:rgba(254,171,11,.15);color:var(--gold-l);font-weight:900;text-align:left;
  padding:11px 14px;border:1px solid rgba(254,171,11,.24)}
.doc td{padding:11px 14px;border:1px solid rgba(254,171,11,.14);color:var(--txt);vertical-align:top}
.doc td b{color:#fff}
.pun{color:var(--gold-l);font-weight:800}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.dl a{display:flex;align-items:center;gap:12px;padding:17px 20px;border:1px solid rgba(254,171,11,.24);border-radius:10px;
  background:rgba(0,0,0,.2);font-size:15px;font-weight:700;color:#EBD9AF;transition:.2s}
.dl a:hover{border-color:var(--gold);color:var(--gold-l);transform:translateX(3px)}
.dl a::before{content:"📄";font-size:21px}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.act{border:1px solid rgba(254,171,11,.24);border-radius:15px;overflow:hidden;background:rgba(0,0,0,.22);transition:.25s;display:block}
.act:hover{border-color:var(--gold);transform:translateY(-4px)}
.act .ph{aspect-ratio:16/9;background:linear-gradient(135deg,var(--p-dark),var(--magenta));display:grid;place-items:center;
  color:var(--gold-soft);font-size:14px;font-weight:800}
.act .bd{padding:17px 19px}
.act .bd h3{font-size:16px;color:var(--gold-l);font-weight:900;margin-bottom:7px;line-height:1.5}
.act .bd span{font-size:12px;color:var(--txt2)}
.steps{counter-reset:s}
.steps li{counter-increment:s;list-style:none;position:relative;padding-left:44px;margin-bottom:16px}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:29px;height:29px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold-l),var(--gold-d));color:var(--p-dark);
  display:grid;place-items:center;font-weight:900;font-size:14px}

/* 遊戲列表頁 */
.gfilter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.gfilter button{padding:10px 26px;border-radius:30px;border:1px solid rgba(254,171,11,.4);cursor:pointer;
  background:transparent;color:var(--txt2);font-size:14px;font-weight:700;transition:.2s;font-family:inherit}
.gfilter button:hover{color:var(--gold-l)}
.gfilter button.on{background:linear-gradient(145deg,var(--gold-l),var(--gold-d));color:var(--p-dark);border-color:transparent}
.glist{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gitem{border:2px solid rgba(254,171,11,.26);border-radius:14px;overflow:hidden;background:#1B0D26;transition:.25s}
.gitem:hover{border-color:var(--gold-l);transform:translateY(-5px)}
.gitem .thumb{aspect-ratio:3/4;background:linear-gradient(150deg,var(--p),var(--p-deep));display:grid;place-items:center;
  color:var(--gold-soft);font-size:13px;font-weight:800;position:relative}
.gitem .jpc{position:absolute;top:8px;left:8px;right:8px;background:rgba(16,39,71,.92);border:1px solid var(--gold-d);
  border-radius:6px;padding:3px 8px;font-size:12px;font-weight:900;color:var(--gold-l);
  font-family:"SF Mono",Menlo,monospace;text-align:right}
.gitem .jpc i{float:left;font-style:normal;color:var(--gold-soft)}
.gitem .bd{padding:13px 15px}
.gitem .bd h3{font-size:16px;font-weight:900;color:var(--gold-l);margin-bottom:3px}
.gitem .bd span{font-size:12px;color:var(--txt2)}

@media(max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:36px} .hero h1{font-size:38px} .device{transform:none}
  .grid6{grid-template-columns:repeat(2,1fr)} .grid4,.glist{grid-template-columns:repeat(2,1fr)}
  .jpbar .wrap{grid-template-columns:1fr;gap:12px} .jp .v{font-size:25px}
  .finfo{grid-template-columns:repeat(2,1fr)} .float{display:none} .acts{grid-template-columns:1fr}
  .nav{display:none} .burger{display:block}
  .nav.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--p-dark);border-bottom:2px solid var(--gold-d);padding:8px}
  .nav.open a{padding:13px;border-radius:0}
  .h2{font-size:26px} .paper{padding:26px 20px} .page-hero h1{font-size:25px}
}
@media(max-width:560px){
  .grid6,.grid4,.glist,.dl{grid-template-columns:1fr} .hero h1{font-size:31px}
  .btns{margin-left:0;width:100%} .hero-btn .btn,.btns .btn{flex:1}
}
@media(max-width:1000px){
  .jpgrid{grid-template-columns:1fr;gap:12px}
  .jp.hero .v{font-size:34px} .jp.hero .lb{font-size:21px}
  .jp.sm{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:12px 18px}
  .jp.sm .v{margin-top:0;font-size:22px} .jp.sm .d{display:none}
  .winbar .track{padding-left:112px;font-size:12.5px}
}