:root {
  --bg:#0a0b10;
  --ink:#e6e8ef;
  --muted:#98a0b3;
  --primary:#ff2d55; /* neon crimson */
  --accent:#06c258;  /* chinese green */
  --gold:#ffcc00;
  --card:#12131a;
  --glass:rgba(255,255,255,0.06);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  font-family:"Noto Sans SC", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 70% -10%, rgba(255,45,85,0.18), transparent 60%),
              radial-gradient(1000px 700px at 10% 110%, rgba(0,229,255,0.14), transparent 60%),
              var(--bg);
  overflow-x:hidden;
}

/* Lounge background image fills viewport */
.lounge {
  background: url("../888lounge.webp") center center / cover no-repeat fixed;
}

h1, h2, .logo { font-family:"Cinzel", serif; letter-spacing:1px; }

/* Ambient stars + neon skyline accents */
#stars, #city-neon { position:fixed; inset:0; pointer-events:none; }
#bg-slideshow { position:fixed; inset:0; z-index:-2; overflow:hidden; }
.bg-frame { position:absolute; inset:0; background-position:center; background-size:cover; opacity:0; transition: opacity 200ms linear; }
.bg-frame.show { opacity:1; }
#stars::before, #stars::after {
  content:""; position:absolute; inset:0; background:
    radial-gradient(2px 2px at 20% 30%, #fff8, transparent 40%),
    radial-gradient(2px 2px at 80% 60%, #fff8, transparent 40%),
    radial-gradient(1.5px 1.5px at 50% 80%, #fff5, transparent 40%),
    radial-gradient(1.5px 1.5px at 10% 10%, #fff5, transparent 40%);
  filter:drop-shadow(0 0 4px #fff5);
  animation: twinkle 6s infinite ease-in-out;
}
@keyframes twinkle { 50% { opacity:0.6; transform:translateY(-2px); } }

#city-neon::before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:30vh;
  background: linear-gradient(to top, #0d0e15, transparent 60%);
}

/* Landing scene */
.scene { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:32px; text-align:center; }
.logo { font-size: clamp(24px, 3vw, 40px); color: var(--ink); text-shadow:0 0 12px rgba(255,255,255,0.12), 0 0 24px rgba(255,45,85,0.25); }

.envelope-wrapper { position:relative; width:min(58vw, 340px); aspect-ratio:3/4; display:grid; place-items:center; isolation:isolate; perspective:800px; animation: floaty 4.5s ease-in-out infinite; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
#envelope { position:relative; z-index:5; width:100%; height:auto; object-fit:contain; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 24px rgba(255,45,85,0.35)); cursor:pointer; transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
@keyframes floaty { 50% { transform: translateY(-10px) rotate(-1deg); } }

/* Sliding note */
#note { position:absolute; z-index:1; width:88%; top:60%; left:50%; transform:translateX(-50%) translateY(-8%); transform-origin: bottom center; transition: transform 760ms cubic-bezier(.2,.8,.2,1) 60ms, opacity 420ms ease 60ms; opacity:0; pointer-events:none; will-change:transform, opacity; }
.envelope-wrapper.open #note { transform: translateX(-50%) translateY(-220%); opacity:1; pointer-events:auto; z-index:1; }

/* Remove unused note-revealed style */
.note-revealed { display:none; }

/* Envelope pulls down slightly as note slides up */
.envelope-wrapper.open { animation: none; transform: translateY(0); }
.envelope-wrapper.open #envelope { transform: translateY(14%); }

.note-inner { background: linear-gradient(180deg, #fff, #f6f7fb); color:#111; border-radius:8px; padding:18px 16px; box-shadow:0 20px 60px rgba(0,0,0,0.45), 0 0 0 2px rgba(0,0,0,0.25) inset; border:1px solid #e9e9ef; transform: rotateX(1.2deg) rotateZ(-0.2deg); }
.note-title { margin:8px 0 4px; font-weight:700; letter-spacing:.5px; }
.note-sub { margin:0 0 12px; color:#444; }

.note-actions { display:flex; gap:12px; justify-content:center; }
.btn { padding:10px 14px; border-radius:10px; border:1px solid transparent; text-decoration:none; font-weight:700; text-transform:lowercase; letter-spacing:.5px; cursor:pointer; }
.btn-primary { background:linear-gradient(135deg, var(--primary), #ff5e7a); color:white; box-shadow: 0 0 14px rgba(255,45,85,0.5); }
.btn-ghost { background:transparent; color:var(--accent); border-color: rgba(6,194,88,0.35); box-shadow: 0 0 14px rgba(6,194,88,0.35) inset; }
.btn:hover { filter:brightness(1.05); transform:translateY(-1px); }

.hint { color:#fff; font-size:14px; opacity:1; text-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 14px rgba(255,45,85,0.5); }

/* Lounge */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.0)); position:sticky; top:0; backdrop-filter: blur(10px); }
.topbar .logo { text-decoration:none; color:var(--ink); font-size:18px; display:flex; align-items:center; gap:8px; }
.topbar nav { display:flex; align-items:center; gap:24px; }
/* Ensure visible spacing even if gap is ignored */
.topbar nav .nav-link + .nav-link { margin-left:22px; }
.logo-img { height:28px; width:auto; display:block; filter: drop-shadow(0 0 8px rgba(255,255,255,0.25)); }
.nav-link { color:var(--accent); text-decoration:none; font-family:"Cinzel", serif; font-weight:700; letter-spacing:1px; font-size:16px; text-shadow:0 0 10px rgba(255,255,255,0.08); }
.topbar nav .nav-link { font-family:"Cinzel", serif; font-weight:700; letter-spacing:1px; font-size:16px; }

.dashboard { max-width:1180px; margin:28px auto; padding:0 16px; display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 860px) { 
  .dashboard { grid-template-columns: 2fr 1fr; align-items: stretch; }
  /* Full-width row */
  .winners { grid-column: 1 / -1; }
}

.card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:18px; box-shadow: 0 10px 28px rgba(0,0,0,0.35); height:100%; }
.card h2 { margin:0 0 10px; }

.countdown-timer { font-family:"Cinzel", serif; font-size: clamp(24px, 4.5vw, 36px); font-weight:800; letter-spacing:1px; color:var(--gold); text-shadow:0 0 14px rgba(255,204,0,0.45); }

/* Time progress bar under countdown */
.time-bar { height:10px; background: rgba(255,255,255,0.10); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); margin-top:12px; }
.time-fill { height:100%; width:0%; background: linear-gradient(90deg, #ffd400, #ff2d55); box-shadow:0 0 12px rgba(255,204,0,0.35); transition: width 400ms linear; }

/* Pot size display */
.pot h2 { margin-bottom:6px; }
.pot-amount { display:flex; align-items:baseline; gap:10px; font-family:"Cinzel", serif; font-weight:800; letter-spacing:1px; font-size: clamp(24px, 4.5vw, 36px); color: var(--gold); white-space: nowrap;
  text-shadow: 0 0 20px rgba(255,204,0,0.45), 0 0 40px rgba(255,45,85,0.25);
  animation: ember 2.8s ease-in-out infinite;
}
.envelope-icon { height: 1em; width: auto; display:inline-block; filter: drop-shadow(0 0 10px rgba(255,45,85,0.35)); }
.pot-usd { color: #06c258; font-family:"Cinzel", serif; font-weight:800; letter-spacing:1px; font-size: clamp(24px, 4.5vw, 36px); text-shadow: 0 0 12px rgba(6,194,88,0.30); }
@keyframes ember { 50% { filter:brightness(1.15); text-shadow: 0 0 28px rgba(208,2,27,0.65), 0 0 60px rgba(255,45,85,0.35); } }

/* Stabilize numeric layout so width doesn't jitter as digits change */
.pot-amount,
.pot-usd {
  font-variant-numeric: tabular-nums lining-nums; /* use tabular digits when available */
  font-feature-settings: "tnum" 1, "lnum" 1;    /* fallback for browsers/fonts */
}
/* Reserve space and keep right edge fixed */
.pot-amount { justify-content: flex-end; letter-spacing: 0; }
.pot-usd { text-align: right; letter-spacing: 0; width: 100%; }

.winners-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.winner { display:flex; align-items:center; justify-content:space-between; padding:12px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background: rgba(0,0,0,0.45); }
.winner .tag { color:var(--accent); font-weight:700; }
.winner .hash { color:var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }
.winner .time { color: var(--muted); font-size:12px; }
.winner .ext-link:link, .winner .ext-link:visited { color: var(--gold); text-decoration:none; font-weight:800; }
.winner .ext-link:hover { text-decoration:underline; filter:brightness(1.1); }

/* Tabs for info card */
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.tabs { display:flex; gap:8px; }
.tab { appearance:none; background: transparent; color: var(--muted); border:1px solid rgba(255,255,255,0.10); border-radius:999px; padding:6px 10px; cursor:pointer; text-transform:lowercase; font-weight:700; }
.tab.active { color: var(--ink); border-color: rgba(255,255,255,0.25); box-shadow: 0 0 10px rgba(255,255,255,0.10) inset; }
.tab-panel.hidden { display:none; }
.howto h3 { margin:12px 0 6px; }
.howto p { margin:6px 0; color: var(--ink); }

/* Fixed heights for scroll panels */
.info { max-height: 520px; overflow:auto; }
.scroll-panel { height: 320px; overflow: scroll; }
/* How-to page: allow full-image, no inner scroll */
.howto-card .scroll-panel { height:auto; overflow:visible; }
/* New howto container without forced height */
.howto-card .howto-panel { height:auto; overflow:visible; display:flex; align-items:center; justify-content:center; }
.howto-card .howto img { width:100%; height:auto; display:block; margin:0 auto; }
/* Keep section height equal to rendered image height */
.howto-card { height:auto; }

/* FAQ accordion */
.faq { 
  display:grid; 
  gap:0; 
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px; 
  overflow:hidden; 
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.faq-item { 
  background: rgba(0,0,0,0.40);
}
.faq-item + .faq-item { 
  border-top:1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.faq-item[open] { background: rgba(0,0,0,0.48); }
.faq-q { 
  list-style:none; 
  cursor:pointer; 
  padding:14px 16px; 
  font-family:"Cinzel", serif; 
  font-weight:700; 
  letter-spacing:0.6px; 
  color: var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after { 
  content:"\276F"; /* chevron */ 
  transform: rotate(90deg); 
  transition: transform 200ms ease; 
  color: var(--accent);
}
.faq-item[open] > .faq-q::after { transform: rotate(-90deg); }
.faq-q:hover { filter: brightness(1.05); }
.faq-a { padding: 0 16px 16px; color: var(--ink); }
.faq-a p { margin: 8px 0; }
.faq a.ext-link { color: var(--gold); font-weight:800; text-decoration:none; }
.faq a.ext-link:hover { text-decoration:underline; filter:brightness(1.1); }

/* subtle glow divider when open */
.faq-item[open] + .faq-item { border-top-color: rgba(255,204,0,0.20); }

/* Stylized scrollbars - Chinese lacquer vibe */
.scroll-panel::-webkit-scrollbar { width: 10px; }
.scroll-panel::-webkit-scrollbar-track { background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15)); border-radius: 10px; border:1px solid rgba(255,204,0,0.25); }
.scroll-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #b30000, #870000); border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.6); border:1px solid rgba(255,204,0,0.35); }
.scroll-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #d0021b, #a00000); }
/* Firefox */
.scroll-panel { scrollbar-width: thin; scrollbar-color: #b30000 rgba(255,204,0,0.20); }

/* Top row equal heights */
.hero, .rake { min-height: 240px; }

/* Hero composition */
.hero .time-bar { margin-top: 12px; }

/* Hero two-column layout matching mock */
.hero .hero-grid { display:block; }
.hero .eyebrow { color: var(--ink); opacity:0.85; font-weight:700; margin-bottom:8px; text-transform: lowercase; }
.hero-title { margin:0; color: var(--ink); font-size: 16px; font-weight:700; letter-spacing:.5px; text-transform: none; }
.hero-left { display:grid; grid-template-columns: minmax(0, 1fr) var(--metricsW); grid-template-areas: "tl tr" "ml mr" "tiles cash"; gap: 6px 18px; align-items:center; }
.title-left { grid-area: tl; }
.title-right { grid-area: tr; text-align:right; }
.metric-left { grid-area: ml; }
.metric-right { grid-area: mr; justify-self: end; }
.tiles { grid-area: tiles; align-self:end; margin-bottom: clamp(8px, 1.5vw, 14px); }
.cash { grid-area: cash; align-self:stretch; justify-self:end; text-align:right; display:flex; flex-direction:column; align-items:flex-end; }

/* BSCScan link pill */
.bscscan-link { display:inline-block; margin-top:auto; margin-bottom: clamp(8px, 1.5vw, 14px); padding:8px 12px; border-radius:999px; border:1px solid rgba(255,204,0,0.75); background: linear-gradient(180deg, #b30b0b, #7a0909); color: var(--gold); text-decoration:none; font-weight:800; font-size: 12px; letter-spacing:.6px; box-shadow: 0 0 12px rgba(255,204,0,0.25), inset 0 0 10px rgba(255,255,255,0.06); text-shadow:0 0 8px rgba(255,204,0,0.35); }
.bscscan-link:hover { filter:brightness(1.05); box-shadow: 0 0 16px rgba(255,204,0,0.35), inset 0 0 12px rgba(255,255,255,0.08); }
.tile-row { display:flex; gap: clamp(6px, 1.2vw, 12px); margin: clamp(8px, 1.5vw, 14px) 0; flex-wrap: nowrap; }
.tile { width: clamp(64px, 6.2vw, 96px); aspect-ratio: 5 / 8; background: rgba(0,0,0,0.85); border-radius: 8px; border: 3px solid #ff2b2b; box-shadow: inset 0 0 12px rgba(255,255,255,0.06), 0 6px 18px rgba(0,0,0,0.5), 0 0 14px rgba(255,43,43,0.65); background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width: 600px) { .tile { width: 64px; aspect-ratio: 5 / 8; } }

/* Full-height envelope image on right */
.envelope-banner { position:absolute; right:8px; top:50%; transform: translateY(-50%); width: var(--bannerW, 240px); height: auto; max-height: calc(100% - 20px); object-fit: contain; filter: drop-shadow(0 0 14px rgba(255,45,85,0.35)); opacity:0.95; z-index:0; }

/* Ensure hero is position-relative to anchor banner */
.hero { position:relative; overflow:hidden; --bannerW: clamp(160px, 16vw, 300px); --metricsW: clamp(240px, 22ch, 360px); }
/* Reserve space for the envelope whenever it is visible (>640px) */
@media (min-width: 641px) { .hero { padding-right: calc(var(--bannerW) + 16px); } }
.hero .hero-grid { position:relative; z-index:1; }

/* Mobile-first refinements: left-align and stack content */
@media (max-width: 640px) {
  .hero { --bannerW: 0px; padding-right: 12px; }
  .envelope-banner { display:none; }
  .hero-left { grid-template-columns: 1fr; grid-template-areas: "tl" "ml" "tr" "mr" "tiles" "cash"; gap: 6px; }
  .title-left, .title-right, .metric-left, .metric-right, .cash { text-align: left; justify-self: start; }
  .tiles { grid-column: 1; }
  .pot-amount, .pot-usd, .countdown-timer { font-size: clamp(22px, 6vw, 28px); }
}

/* Fix metrics column width so numbers never shift layout */
.metric-right,
.cash { width: var(--metricsW); }

/* Rake stats */
.rake-stats { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.rake-stats li { display:flex; align-items:center; justify-content:space-between; padding:10px; border:1px solid rgba(255,255,255,0.10); border-radius:10px; background: rgba(0,0,0,0.45); }
.lounge .rake-stats .label { color: var(--ink) !important; }
.rake-stats .value { color: var(--ink); font-weight:700; }
.rake .card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.icon-link { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color: var(--gold); text-decoration:none; }
.icon-link:hover { filter: brightness(1.1); }

/* Winners same height as top cards with internal scroll */
.winners .scroll-panel { height: 240px; overflow: scroll; }

/* Equal heights for top cards */
@media (min-width: 860px) {
  .dashboard > .card.countdown,
  .dashboard > .card.pot { min-height: 160px; }
}

/* Subtle focus */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }



/* Mobile tuning: keep note from flying too high */
@media (max-width: 540px) {
  #note { top: 62%; }
  .envelope-wrapper.open #note { transform: translateX(-50%) translateY(-185%); }
  .envelope-wrapper.open #envelope { transform: translateY(10%); }
  .note-inner { padding: 14px 12px; }
}

/* Lounge readability tweaks: darker glass on UI elements */
.lounge .card { 
  background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.30));
  border-color: rgba(255,255,255,0.10);
  backdrop-filter: blur(2px) saturate(110%);
}
.landing .btn-primary {
  background: linear-gradient(135deg, #b30000, #d0021b);
  box-shadow: 0 0 14px rgba(208,2,27,0.55);
}

/* Keep popup size but hide the subheadline on landing visually */
.landing .note-sub { color: #fff; }
.lounge .winner { background: rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.14); }
.lounge .meter-bar { background: rgba(255,255,255,0.12); }
.lounge .countdown-timer, .lounge .card h2, .lounge .meter-label { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* Gold link style for buyback reference */
.rake .ext-link:link, .rake .ext-link:visited { color: var(--gold); text-decoration:none; font-weight:800; }
.rake .ext-link:hover { text-decoration:underline; filter:brightness(1.1); }