/* 539樂透 — Taoist temple palette drawn from the altar photos:
   lacquer red, aged black-brown wood, incense-gold, cream paper. */
:root{
  --lacquer:#8c1010;
  --lacquer-2:#b3181b;
  --ember:#e0362e;
  --wood:#1b0b07;
  --wood-2:#2a1109;
  --wood-3:#3b1a0e;
  --gold:#d9a53f;
  --gold-2:#f3d27a;
  --gold-3:#9a6f22;
  --paper:#f7ead2;
  --paper-2:#d9c39c;
  --ink:#2a1608;
  --smoke:rgba(255,235,200,.08);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:14px;
  --maxw:1120px;
  --serif:"Noto Serif TC","PMingLiU","Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wood);color:var(--paper);font-family:var(--sans);line-height:1.7;font-size:16px;
  background-image:
    radial-gradient(ellipse at 50% -10%,rgba(179,24,27,.35),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(217,165,63,.10),transparent 45%);
}
img,video{max-width:100%;display:block}
a{color:var(--gold-2)}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:.04em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.sr{position:absolute;left:-9999px}

/* ---- ornaments ---- */
.rule{height:10px;background:
  linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-2) 50%,var(--gold) 80%,transparent) center/100% 1px no-repeat}
.rule::before{content:"";display:block;width:10px;height:10px;margin:-5px auto 0;background:var(--gold-2);transform:rotate(45deg)}
.plaque{display:inline-block;position:relative;padding:.35em 1.4em;border:2px solid var(--gold);color:var(--gold-2);
  background:linear-gradient(180deg,var(--lacquer-2),var(--lacquer));box-shadow:inset 0 0 0 4px var(--lacquer),inset 0 0 0 5px var(--gold-3),0 8px 24px rgba(0,0,0,.45);
  font-family:var(--serif);font-size:clamp(1.25rem,3.6vw,1.75rem);letter-spacing:.18em;text-shadow:0 2px 2px rgba(0,0,0,.6)}
.plaque::before,.plaque::after{content:"";position:absolute;top:50%;width:26px;height:26px;transform:translateY(-50%);
  background:radial-gradient(circle,var(--gold-2) 0 30%,var(--gold-3) 31% 45%,transparent 46%)}
.plaque::before{left:-14px}.plaque::after{right:-14px}
.section-head{text-align:center;margin:0 0 26px}
.section-head .sub{color:var(--paper-2);margin:12px 0 0;font-size:.95rem}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(27,11,7,.96);border-bottom:1px solid rgba(217,165,63,.35)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.brand{display:flex;white-space:nowrap;align-items:center;gap:10px;text-decoration:none;color:var(--gold-2);font-family:var(--serif);font-size:1.35rem;letter-spacing:.12em;font-weight:700}
.brand svg{width:40px;height:40px;flex:none}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--paper);text-decoration:none;font-size:.9rem;padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover{background:rgba(217,165,63,.14);color:var(--gold-2)}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:44px 0 54px;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:url(assets/hero-bg.webp) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(27,11,7,.35),rgba(27,11,7,.75) 70%,var(--wood))}
.hero-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.2;color:var(--gold-2);text-shadow:0 3px 14px rgba(0,0,0,.7)}
.hero h1 span{display:block;font-size:.5em;color:var(--paper);letter-spacing:.3em;font-weight:400;margin-bottom:.35em}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.2em;color:var(--gold);border:1px solid rgba(217,165,63,.5);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(224,54,46,.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,54,46,.7)}70%{box-shadow:0 0 0 9px rgba(224,54,46,0)}100%{box-shadow:0 0 0 0 rgba(224,54,46,0)}}

.latest{margin-top:22px;background:linear-gradient(180deg,rgba(60,22,12,.9),rgba(27,11,7,.95));border:1px solid rgba(217,165,63,.55);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative}
.latest::before{content:"";position:absolute;inset:6px;border:1px solid rgba(217,165,63,.25);border-radius:10px;pointer-events:none}
.latest-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.latest-top .lbl{font-family:var(--serif);color:var(--gold-2);font-size:1.1rem;letter-spacing:.15em}
.latest-top .date{color:var(--paper-2);font-size:.95rem}
.balls{display:flex;gap:10px;justify-content:space-between;margin:18px 0 8px}
.ball{flex:1;aspect-ratio:1;max-width:96px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,6vw,2.5rem);color:var(--lacquer);
  background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold-2) 35%,var(--gold) 70%,var(--gold-3));box-shadow:inset 0 -6px 12px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.5),0 0 0 3px var(--lacquer),0 0 0 4px var(--gold-3);
  transform-origin:center;animation:drop .6s cubic-bezier(.2,.9,.3,1.3) both}
.ball:nth-child(2){animation-delay:.08s}.ball:nth-child(3){animation-delay:.16s}.ball:nth-child(4){animation-delay:.24s}.ball:nth-child(5){animation-delay:.32s}
@keyframes drop{from{transform:translateY(-30px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.ball.skel{background:rgba(255,255,255,.08);box-shadow:none;color:transparent;animation:none}
.latest-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--paper-2);margin-top:10px}
.latest-foot .status{display:flex;align-items:center;gap:6px}
.latest-foot .status::before{content:"";width:7px;height:7px;border-radius:50%;background:#4caf50}
.latest-foot .status.err::before{background:var(--ember)}
.btn{appearance:none;border:1px solid var(--gold);background:linear-gradient(180deg,var(--lacquer-2),var(--lacquer));color:var(--gold-2);font-family:var(--serif);font-size:1rem;letter-spacing:.12em;padding:10px 22px;border-radius:10px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn[disabled]{opacity:.5;cursor:default}

.countdown{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px}
.countdown div{background:rgba(0,0,0,.35);border:1px solid rgba(217,165,63,.35);border-radius:10px;text-align:center;padding:8px 4px}
.countdown b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--gold-2);line-height:1.1}
.countdown small{color:var(--paper-2);font-size:.72rem;letter-spacing:.15em}
.cd-label{color:var(--paper-2);font-size:.9rem;margin-top:16px}

.shrine{position:relative;border:3px solid var(--gold);border-radius:18px;overflow:hidden;box-shadow:0 0 0 6px var(--lacquer),0 0 0 7px var(--gold-3),var(--shadow);background:#000;aspect-ratio:480/556;max-width:420px;margin:0 auto}
.shrine video{width:100%;height:100%;object-fit:cover}
.shrine .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);color:var(--gold-2);font-family:var(--serif);letter-spacing:.2em;font-size:.9rem;text-align:center}
.lantern{position:absolute;top:-6px;width:44px;height:64px;z-index:2}
.lantern.l{left:14px}.lantern.r{right:14px}

/* ---- ads ---- */
.ad-slot{margin:26px auto;min-height:100px;display:grid;place-items:center;border:1px dashed rgba(217,165,63,.35);border-radius:10px;color:rgba(247,234,210,.4);font-size:.75rem;letter-spacing:.2em;background:rgba(0,0,0,.2)}
.ad-slot.tall{min-height:250px}

/* ---- sections ---- */
section{padding:54px 0}
.card{background:linear-gradient(180deg,var(--wood-2),var(--wood));border:1px solid rgba(217,165,63,.4);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}

/* history table */
.table{width:100%;border-collapse:collapse}
.table th{font-family:var(--serif);color:var(--gold-2);font-weight:700;letter-spacing:.15em;padding:12px 8px;border-bottom:2px solid var(--gold-3);text-align:left;font-size:.95rem}
.table td{padding:12px 8px;border-bottom:1px solid rgba(217,165,63,.18);vertical-align:middle}
.table tr:nth-child(even) td{background:rgba(140,16,16,.12)}
.table .d{white-space:nowrap;color:var(--paper-2);font-size:.92rem}
.table .d b{color:var(--paper);font-weight:600}
.nums{display:flex;gap:6px;flex-wrap:wrap}
.n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--lacquer);
  background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold-2) 40%,var(--gold) 80%);box-shadow:0 0 0 2px var(--lacquer),0 3px 6px rgba(0,0,0,.4)}
.n.hit{background:radial-gradient(circle at 35% 30%,#ffb3a7,var(--ember) 45%,var(--lacquer));color:#fff;box-shadow:0 0 0 2px var(--gold-2),0 3px 8px rgba(224,54,46,.6)}
.table-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}

/* stats */
.stats-ctrl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.chip{border:1px solid var(--gold-3);background:transparent;color:var(--paper-2);padding:6px 14px;border-radius:999px;cursor:pointer;font-size:.9rem}
.chip.on{background:var(--lacquer);color:var(--gold-2);border-color:var(--gold)}
.hotcold{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.hotcold h3{font-size:1.05rem;color:var(--gold-2);margin-bottom:12px;letter-spacing:.15em}
.hotcold h3 small{color:var(--paper-2);font-weight:400;letter-spacing:0;margin-left:8px;font-size:.8rem}
.freq{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.freq .f{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;color:var(--paper-2)}
.freq .bar{width:100%;height:56px;display:flex;align-items:flex-end;background:rgba(0,0,0,.3);border-radius:4px;overflow:hidden}
.freq .bar i{display:block;width:100%;background:linear-gradient(180deg,var(--gold-2),var(--gold-3));border-radius:3px 3px 0 0;transition:height .5s}
.freq .f.hot .bar i{background:linear-gradient(180deg,#ff7a6e,var(--lacquer))}
.freq .f.cold .bar i{background:linear-gradient(180deg,#9fb7c9,#4d6478)}
.freq b{font-family:var(--serif);color:var(--paper);font-size:.9rem}
.legend{display:flex;gap:16px;justify-content:center;margin-top:12px;font-size:.8rem;color:var(--paper-2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}

/* checker */
.picker{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;margin:14px 0}
.picker button{aspect-ratio:1;border-radius:50%;border:1px solid var(--gold-3);background:rgba(0,0,0,.3);color:var(--paper);font-family:var(--serif);font-weight:700;font-size:.95rem;cursor:pointer;padding:0}
.picker button.on{background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold-2) 40%,var(--gold) 80%);color:var(--lacquer);box-shadow:0 0 0 2px var(--lacquer)}
.check-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.check-actions .picked{margin-left:auto;color:var(--paper-2);font-size:.9rem}
.result-box{margin-top:18px;display:none}
.result-box.show{display:block}
.result-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.result-sum div{background:rgba(0,0,0,.35);border:1px solid rgba(217,165,63,.35);border-radius:10px;text-align:center;padding:10px 4px}
.result-sum b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--gold-2)}
.result-sum small{color:var(--paper-2);font-size:.75rem}
.tag{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:6px;border:1px solid var(--gold-3);color:var(--gold-2);white-space:nowrap}
.tag.win{background:var(--lacquer);border-color:var(--gold)}

/* rules */
.rules-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.prize{width:100%;border-collapse:collapse}
.prize th,.prize td{padding:10px 8px;border-bottom:1px solid rgba(217,165,63,.2);text-align:left}
.prize th{color:var(--gold-2);font-family:var(--serif);letter-spacing:.1em}
.prize td:last-child{color:var(--gold-2);font-family:var(--serif);font-weight:700;white-space:nowrap}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:0 0 14px 46px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--lacquer);background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold-2) 40%,var(--gold) 80%);box-shadow:0 0 0 2px var(--lacquer)}
.steps b{color:var(--gold-2)}

/* gallery / temple culture */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery figure{margin:0;border:2px solid var(--gold-3);border-radius:12px;overflow:hidden;background:#000;box-shadow:var(--shadow)}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(1.1)}
.gallery figcaption{padding:12px 14px;font-size:.9rem;color:var(--paper-2);background:var(--wood-2)}
.gallery figcaption b{display:block;color:var(--gold-2);font-family:var(--serif);letter-spacing:.1em;margin-bottom:4px}

/* faq */
details{border:1px solid rgba(217,165,63,.3);border-radius:10px;margin-bottom:10px;background:var(--wood-2)}
summary{cursor:pointer;padding:14px 18px;font-family:var(--serif);color:var(--gold-2);letter-spacing:.06em;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:.2s;flex:none;margin-left:12px}
details[open] summary::after{transform:rotate(-135deg)}
details .a{padding:0 18px 16px;color:var(--paper-2)}

/* notice */
.notice{border-left:4px solid var(--gold);background:rgba(217,165,63,.08);padding:14px 18px;border-radius:0 10px 10px 0;color:var(--paper-2);font-size:.92rem}

/* footer */
footer{border-top:1px solid rgba(217,165,63,.3);padding:34px 0 40px;color:var(--paper-2);font-size:.88rem;background:#120705}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer h3{color:var(--gold-2);font-size:1rem;letter-spacing:.15em;margin-bottom:10px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:6px}
footer a{color:var(--paper-2);text-decoration:none}
footer a:hover{color:var(--gold-2)}
.copy{margin-top:26px;padding-top:16px;border-top:1px solid rgba(217,165,63,.18);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem}

/* policy page */
.policy{max-width:820px;margin:0 auto;padding:40px 18px 70px}
.policy h1{color:var(--gold-2);font-size:1.9rem;margin-bottom:8px}
.policy h2{color:var(--gold-2);font-size:1.2rem;margin:28px 0 10px}
.policy p,.policy li{color:var(--paper-2)}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .shrine{max-width:360px}
  .rules-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  section{padding:40px 0}
  .hero{padding:28px 0 40px}
  .top .wrap{height:56px}
  .brand{font-size:1.15rem}
  .nav a{font-size:.82rem;padding:6px 8px}
  .latest{padding:16px}
  .balls{gap:6px}
  .ball{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),0 5px 12px rgba(0,0,0,.5),0 0 0 2px var(--lacquer),0 0 0 3px var(--gold-3)}
  .hotcold{grid-template-columns:1fr}
  .freq{grid-template-columns:repeat(8,1fr)}
  .picker{grid-template-columns:repeat(8,1fr)}
  .gallery{grid-template-columns:1fr}
  .n{width:34px;height:34px;font-size:.95rem}
  .table td,.table th{padding:10px 6px}
  .result-sum{grid-template-columns:repeat(2,1fr)}
  .countdown b{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){.ball,.kicker i{animation:none}}

/* ---- LINE CTA ---- */
.line-cta{margin-top:22px;text-align:center}
.line-head{font-family:var(--serif);font-weight:900;font-size:clamp(1.35rem,4.5vw,1.9rem);color:#fff;letter-spacing:.06em;margin:0 0 12px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.line-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:560px;margin:0 auto;padding:16px 22px;border-radius:999px;background:#06c755;color:#fff;text-decoration:none;font-weight:700;font-size:clamp(1.05rem,4vw,1.45rem);letter-spacing:.02em;
  box-shadow:0 0 0 8px rgba(6,199,85,.22),0 10px 24px rgba(0,0,0,.45);transition:transform .15s,filter .15s}
.line-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.line-btn svg{width:34px;height:34px;flex:none}
@keyframes linepulse{0%,100%{box-shadow:0 0 0 8px rgba(6,199,85,.22),0 10px 24px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 14px rgba(6,199,85,.10),0 10px 24px rgba(0,0,0,.45)}}
.line-bar{display:none}
@media (max-width:640px){
  .line-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(18,7,5,.98),rgba(18,7,5,.85));border-top:1px solid rgba(217,165,63,.35)}
  .line-bar .line-btn{padding:13px 18px;font-size:1.05rem;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  .line-bar .line-btn svg{width:28px;height:28px}
  footer{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){.line-btn{animation:none}}

/* ---- compact landing ---- */
section.tight{padding:36px 0}
.card.slim{padding:14px 18px}
.card.slim .table td{padding:10px 6px}
.table-actions a.btn{text-decoration:none}
.foot-links{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px 18px}
@media (max-width:640px){section.tight{padding:26px 0}.table-actions{flex-wrap:wrap}.table-actions a.btn{flex:1 1 45%;text-align:center;padding:10px 12px;font-size:.92rem}}

.check-row{display:flex;gap:10px;justify-content:center;margin:0 0 16px}
.check-row .btn{text-decoration:none;text-align:center}
.btn.big{font-size:1.15rem;padding:12px 34px}
@media (max-width:640px){.check-row{flex-wrap:wrap}.check-row .btn{flex:1 1 45%;padding:12px 10px}}