/* Shibei Styles: Chinese red & gold, playful + premium */
:root{
  --bg:#1a0a0a;
  --bg-deep:#0a0303;
  --ink:#fff7ea;
  --muted:#ffd7a1;
  --red:#e02626;
  --gold:#ffcc4d;
  --gold-deep:#caa031;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --ring:0 0 0 3px rgba(255,204,77,.35);
  --radius:18px;
  --speed: 0.35s;
  /* CJK font stack */
  --font-cn:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei","SimHei","Heiti SC",system-ui,sans-serif;
  --font-en: ui-rounded, ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background: radial-gradient(1200px 600px at 70% -10%, #3a0b0b 0%, var(--bg) 40%, var(--bg-deep) 100%);
  font-family: var(--font-en);
  overflow-x:hidden;
}

/* Animated background */
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden;}
.bg .glow{position:absolute; inset:-20%; background:radial-gradient(800px 800px at 30% 20%, rgba(255,0,0,.25), transparent 60%),
  radial-gradient(900px 900px at 80% 10%, rgba(255,170,0,.22), transparent 60%),
  radial-gradient(700px 700px at 50% 90%, rgba(255,60,0,.18), transparent 60%); filter: blur(30px);}
#lanterns{position:absolute; inset:0; pointer-events:none;}

@keyframes floatUp {
  0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:1;}
  100%{ transform: translateY(-20vh) translateX(-20px) rotate(4deg); opacity:0.9;}
}
.lantern{
  position:absolute; width:22px; height:30px; background: linear-gradient(#ffb74d,#ff6f00);
  border-radius: 8px 8px 12px 12px / 10px 10px 16px 16px;
  box-shadow: 0 8px 20px rgba(255,140,0,.5), inset 0 -4px 8px rgba(0,0,0,.25);
  animation: floatUp 12s linear infinite;
}
.lantern:before,.lantern:after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  background: rgba(0,0,0,.3);
}
.lantern:before{ width:26px;height:6px; top:-5px; border-radius:4px;}
.lantern:after{ width:18px;height:4px; bottom:-6px; border-radius:3px;}

.nav{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient( to bottom, rgba(20,0,0,.7), rgba(20,0,0,.25) );
  border-bottom:1px solid rgba(255,204,77,.15);
}
.nav-left{display:flex; align-items:center; gap:12px;}
.logo{width:48px; height:48px; border-radius:999px; border:2px solid rgba(255,204,77,.4);}
.brand{display:flex; align-items:baseline; gap:10px}
.brand-cn{font-family: var(--font-cn); font-weight:800; letter-spacing:1px; color:var(--gold); margin:0; line-height:1}
.brand-en{opacity:.9}
.ticker{color:var(--muted); font-weight:700}
.nav-links{display:flex; align-items:center; gap:12px}
.link{padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink); opacity:.9}
.link:hover{background:rgba(255,204,77,.12); box-shadow: var(--shadow)}
.hamburger{display:none; background:none; border:0; cursor:pointer}
.hamburger span{display:block; width:24px;height:2px; background:var(--ink); margin:5px 0; transition: transform .25s}


.display{font-family: var(--font-cn); font-size: clamp(28px, 6.4vw, 64px); margin:0 0 10px}
.display .ruby{ruby-position: under; ruby-align: center;}
.display rt{font-size:.4em; color:var(--muted)}
.display .line2{color:var(--gold); text-shadow:0 2px 0 rgba(0,0,0,.25)}

.hero{display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:28px; padding:48px 20px; max-width:1100px; margin:0 auto;}
.hero-text{min-width:0}
.tagline{font-size: clamp(14px, 2.2vw, 20px); color:var(--muted); margin:8px 0 18px}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.ticker-badge{margin-top:8px; background:rgba(255,204,77,.12); border:1px dashed rgba(255,204,77,.4); padding:6px 10px; border-radius:12px; display:inline-block}

.hero-art{display:grid; place-items:center}
.coin{width:240px; height:240px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), transparent 50%), radial-gradient(circle at 70% 70%, rgba(255,255,255,.1), transparent 50%), linear-gradient(145deg, #7a1a1a, #2a0505);
  box-shadow: inset 0 6px 30px rgba(255,204,77,.15), 0 25px 60px rgba(0,0,0,.55); display:grid; place-items:center}
.coin img{width:82%; height:auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));}
.spin{animation: spin 12s linear infinite}
@keyframes spin{ 0%{ transform: rotateY(0deg);} 50%{ transform: rotateY(180deg);} 100%{ transform: rotateY(360deg);} }

.grid{max-width:1100px; margin:10px auto 40px; padding:0 20px; display:grid; gap:16px}
.grid.two{grid-template-columns: repeat(2, minmax(0,1fr));}
.grid.three{grid-template-columns: repeat(3, minmax(0,1fr));}
.card{
  background: linear-gradient(180deg, rgba(255,204,77,.06), rgba(255,204,77,.02));
  border:1px solid rgba(255,204,77,.18);
  border-radius: var(--radius); padding:18px; box-shadow: var(--shadow);
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed);
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 18px 46px rgba(255,204,77,.18); background: linear-gradient(180deg, rgba(255,204,77,.12), rgba(255,204,77,.04)); }
.card:focus-within{ outline: none; box-shadow: var(--shadow), var(--ring); }

.meme-strip{max-width:900px; margin:20px auto 30px; text-align:center; padding:0 20px}
.lantern-cta{display:flex; justify-content:center; gap:10px; margin-top:10px}

.btn{
  --b: rgba(255,204,77,.4);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius: 999px; text-decoration:none; cursor:pointer;
  border:1px solid var(--b); color:var(--ink); background: rgba(255,204,77,.07);
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed);
  will-change: transform;
}
.btn.big{ padding:14px 18px; font-weight:700}
.btn.primary{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#3a1a00; }
.btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,204,77,.35); }
.btn.outline{ background: transparent; border-color: rgba(255,204,77,.6); }
.btn.outline:hover{ background: rgba(255,204,77,.15); box-shadow: 0 10px 30px rgba(255,204,77,.25); }
.btn.ghost{ background: rgba(255,204,77,.08); }
.btn.ghost:hover{ background: rgba(255,204,77,.18); box-shadow: 0 10px 30px rgba(255,204,77,.25); }

.ico{display:inline-block; width:18px; height:18px}
.ico.tg{ background: none; mask: url('#'); }
.ico.tg::before{ content:""; display:inline-block; width:18px; height:18px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path d=%22M9.04 15.47 8.85 19a1 1 0 0 0 1.66.74l2.26-1.83 4.7 3.42c.86.64 2.1.16 2.33-.9l3.83-18.2a1.3 1.3 0 0 0-1.74-1.48L1.2 9.3c-1.25.48-1.15 2.29.15 2.64l6.1 1.63 13.98-11.3-12.4 13.2z%22/></svg>') center/contain no-repeat; }
.ico.x::before{ content:""; display:inline-block; width:18px;height:18px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path d=%22M18.244 2H21l-6.51 7.44L22.5 22h-6.54l-4.58-6.12L5.9 22H3.14l6.97-7.96L1.5 2h6.66l4.16 5.58L18.24 2Zm-1.14 18.4h2.02L7.01 3.53H4.9l12.2 16.87Z%22/></svg>') center/contain no-repeat; }

.footer{border-top:1px solid rgba(255,204,77,.18); padding:18px; text-align:center; color:var(--muted); background: linear-gradient(to top, rgba(255,204,77,.06), transparent)}

@media (max-width: 880px){
  .hero{grid-template-columns: 1fr; text-align:center}
  .nav-links{display:none}
  .hamburger{display:block}
  .hero-art{order:-1}
  .brand-en{display:none}
}

/* Inputs & columns hover demo */
.card a, .card button, .card li, .card p{ transition: transform var(--speed), color var(--speed); }
.card a:hover, .card button:hover, .card li:hover{ transform: translateX(2px); color:var(--gold); }