:root{
  --canvas:#EEF2F6; --surface:#F8FAFC; --card:#FFFFFF; --line:#E2E8F0; --line-soft:#EDF1F6;
  --ink:#0F172A; --ink-2:#475569; --ink-3:#64748B;
  --gold:#B45309; --gold-bg:#FFFBEB; --gold-line:#FCD34D;
  --cyan:#0D9488; --cyan-bg:#CCFBF1; --rose:#E11D48; --good:#15803D;
  --paper:#FFFCF3; --paper-line:#F1E7D2;
  --r-lg:20px; --r-md:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.5}
a{color:var(--cyan)}
h1,h2,p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.mono,.tile,.pill,.jp b{font-family:"SF Mono","Roboto Mono",Menlo,Consolas,ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* header */
.hdr{background:var(--surface);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:20}
.hdr-in{display:flex;align-items:center;gap:12px;padding-top:12px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);margin-right:auto;line-height:1.15}
.brand-name{font-weight:800;font-size:19px;letter-spacing:.5px}
.brand-sub{font-size:11px;color:var(--ink-3);letter-spacing:1px}
.langs{display:flex;gap:2px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px}
.langs a,.langs span{font-size:13px;font-weight:700;padding:5px 10px;border-radius:99px;text-decoration:none;color:var(--ink-2)}
.langs .lang-on{background:var(--ink);color:#fff}
.voice-btn{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.voice-btn.on{background:var(--cyan-bg);border-color:rgba(13,148,136,.5);color:var(--cyan)}
.hdr-date{padding:6px 16px 10px;font-weight:800;font-size:17px}
@media (max-width:560px){
  .voice-btn span{display:none}
  .voice-btn{width:44px;justify-content:center;padding:0}
  .brand-name{font-size:17px}
  .langs a,.langs span{padding:5px 8px;font-size:12px}
}

/* top area */
.live-strip{display:flex;align-items:center;gap:8px;margin-top:12px;background:#fff;border:1px solid rgba(225,29,72,.35);color:var(--rose);font-weight:800;font-size:14px;border-radius:12px;padding:10px 14px}
.live-strip[hidden]{display:none}
.live-strip .dot{width:9px;height:9px;border-radius:50%;background:var(--rose);animation:pulse 1.5s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,29,72,.45)}70%{box-shadow:0 0 0 8px rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}
.page-h1{font-size:22px;font-weight:800;margin:16px 0 6px}
.answer{font-size:14px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.answer:empty{display:none}
.back{margin-top:8px;font-weight:700}
.op-rail{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none}
.op-rail::-webkit-scrollbar{display:none}
.op-chip{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;min-height:44px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:12px}
.results{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;align-items:start}
.side{display:flex;flex-direction:column;gap:14px}
@media (min-width:900px){ .results{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr) 300px}
  .side{position:sticky;top:110px;align-self:start}
}
.recent{grid-column:1/-1;display:grid;grid-template-columns:inherit;gap:14px}
.sec-h2{grid-column:1/-1;font-size:18px;margin-top:8px}

/* card */
.card{position:relative;background:var(--card);border:2px solid var(--accent);border-radius:var(--r-lg);padding:16px;scroll-margin-top:120px}
.card-head{display:flex;align-items:center;gap:10px}
.card-titles{min-width:0;flex:1}
.card h2{font-size:16px;font-weight:800;line-height:1.25}
.card-meta{font-size:13px;color:var(--ink-3);margin-top:2px}
.card-meta b{color:var(--ink)}
.badge{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--op);color:var(--op-fg);font-weight:800;font-size:16px}
.badge.sm{width:30px;height:30px;border-radius:50%;font-size:12px}
.badge.ring{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--op)}
.chip{font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;white-space:nowrap}
.chip-done{background:rgba(21,128,61,.1);color:var(--good)}
.chip-waiting{background:#F1F5F9;color:var(--ink-3)}
.chip-unavailable{background:#FEF2F2;color:#B91C1C}
.live-badge{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid rgba(225,29,72,.4);color:var(--rose);font-size:12px;font-weight:800;padding:4px 10px 4px 8px;border-radius:99px;white-space:nowrap}
.live-badge .ring{position:relative;width:7px;height:7px;border-radius:50%;background:var(--rose)}
.live-badge .ring::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--rose);animation:ripple 1.4s ease-out infinite}
@keyframes ripple{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.unavail{margin-top:14px;padding:14px;border-radius:12px;background:#F8FAFC;color:var(--ink-2);font-size:15px}

/* big numbers */
.tier-hero{text-align:center;margin-top:16px}
.tier-label{font-size:13px;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.tier-hero .tier-label{font-size:14px}
.tier-row{display:flex;justify-content:center;gap:18px;margin-top:14px}
.tier{text-align:center}
.tiles{display:inline-flex;gap:6px}
.tile{display:inline-flex;align-items:center;justify-content:center;width:30px;height:42px;border-radius:7px;border:1px solid var(--line);
  background:linear-gradient(to bottom,#fff 0 49%,var(--line) 49% 51%,#fff 51% 100%);font-size:24px;font-weight:800;color:var(--ink)}
.tiles.hero .tile{width:44px;height:62px;font-size:34px;color:var(--gold);border-color:var(--gold-line);
  background:linear-gradient(to bottom,var(--gold-bg) 0 49%,#FDE68A 49% 51%,var(--gold-bg) 51% 100%)}
.tile.skel,.pill.skel b{background:linear-gradient(100deg,#EEF2F7 25%,#E2E8F0 45%,#EEF2F7 65%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;border-color:var(--line)}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-180% 0}}
.sub-bar{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:14px;font-weight:800;color:var(--ink-2)}
.sub-bar::after{content:"";flex:1;height:1px;background:var(--line)}
.pills{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.pill{display:flex;align-items:center;justify-content:center;gap:3px;min-height:40px;border-radius:99px;background:var(--paper);border:1px solid var(--paper-line);
  font-size:18px;font-weight:800;color:var(--ink);letter-spacing:.5px}
.pill i{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:700}
.pill.skel b{display:block;width:60%;height:14px;border-radius:6px}
@media (max-width:360px){ .pill{font-size:16px} .tiles.hero .tile{width:38px;height:56px;font-size:30px} }
.jackpots{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.jp{flex:1 1 140px;background:var(--gold-bg);border:1px solid #FDE68A;border-radius:12px;padding:8px 12px;font-size:12px;color:#92400E}
.jp b{display:block;font-size:16px;color:#78350F;white-space:nowrap}
.card-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:12px}
.card-foot a{color:var(--ink-3);text-decoration:none}
.flash{animation:flash 1.6s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(217,118,6,.0);transform:scale(1.12)}30%{box-shadow:0 0 0 6px rgba(217,118,6,.35)}100%{box-shadow:0 0 0 0 rgba(217,118,6,0);transform:scale(1)}}

/* side boxes */
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.box h2{font-size:16px;font-weight:800;margin-bottom:10px}
#check-form{display:flex;gap:8px}
#check-in{flex:1;min-width:0;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font-size:22px;font-weight:800;letter-spacing:4px;text-align:center;font-family:inherit}
#check-in::placeholder{letter-spacing:0;font-size:16px;font-weight:600}
#check-in:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(13,148,136,.15)}
#check-form button{min-width:72px;height:48px;border:0;border-radius:12px;background:var(--cyan);color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer}
.check-out p{margin-top:10px;font-size:14px;font-weight:700}
.check-out .hit{color:var(--good)} .check-out .none{color:var(--ink-3)} .check-out .bad{color:var(--rose)}
.dates{display:flex;flex-wrap:wrap;gap:6px}
.date-pill{font-size:13px;padding:7px 10px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--ink-2);min-height:36px}
.date-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* faq + footer */
.faq{margin-top:18px}
.faq details{border-top:1px solid var(--line-soft);padding:10px 0}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;font-weight:800;font-size:15px}
.faq p{margin-top:6px;color:var(--ink-2);font-size:14px}
.schedule,.updated{font-size:13px;color:var(--ink-3);margin-top:12px;text-align:center}
.foot{margin-top:24px;background:#fff;border-top:1px solid var(--line);padding:18px 0 28px;font-size:12px;color:var(--ink-3)}
.foot p{margin:6px 0}
.foot-links a{color:var(--ink-2)}

/* ads */
.ad{position:relative;display:flex;align-items:center;justify-content:center;margin-top:12px;border-radius:12px;overflow:hidden;background:#fff;border:1px dashed var(--line)}
.ad img{display:block;max-width:100%;height:auto}
.ad a{display:block;text-decoration:none;color:var(--ink)}
.ad-label{position:absolute;top:4px;left:8px;font-size:10px;color:var(--ink-3)}
.ad-preview{background:repeating-linear-gradient(45deg,#F8FAFC,#F8FAFC 10px,#F1F5F9 10px,#F1F5F9 20px);color:var(--ink-3);font-weight:700;font-size:13px}
.results .ad{margin-top:0}
@media (min-width:900px){ .results .ad-infeed{grid-column:1/-1} }

/* install banner */
.install{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;max-width:520px;margin:0 auto}
.install[hidden]{display:none}
.install span{flex:1}
.install button{min-width:44px;min-height:40px;border:0;border-radius:10px;background:#fff;color:var(--ink);font-size:20px;font-weight:800;cursor:pointer}
.install .x{background:transparent;color:#fff}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* extra games (shared base; the slip design overrides) */
.xg{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.xg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-weight:800;font-size:14px;color:var(--ink-2)}
.xg-head small{font-weight:600;color:var(--ink-3)}
.xg-tab{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px}
.xg-tab th{text-align:left;font-weight:700;color:var(--ink-3);padding:4px 8px 4px 0;white-space:nowrap;vertical-align:top;width:1%}
.xg-tab td{padding:4px 0}
.xg-nums,.xg-many{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.xg-tab b{font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace;font-weight:800;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--paper-line);border-radius:8px;padding:2px 7px}
.xg-tab b.plus{background:#FEF3C7;border-color:#FCD34D}
.xg-tab i{font-style:normal;font-weight:800;color:var(--ink-3)}
.xg-tab em{font-style:normal;font-weight:700;color:#92400E;margin-left:6px;font-size:13px}
.xg-amt td{font-weight:800;color:#92400E}