/* =========================================================================
   Burnova — Lava / Supernova game-art theme (ref: mockup #1)
   Single dark theme by intent. Fire = burn, purple = locked, gold = BNB.
   ========================================================================= */
:root{
  --bg:#0b0704;
  --panel:rgba(16,9,6,.84);
  --panel-2:rgba(22,12,8,.72);
  --line:rgba(255,120,50,.18);
  --line-2:rgba(255,140,60,.4);

  --ink:#f7efe8;
  --muted:#b6a096;
  --faint:#7c6155;

  --fire:#ff6a1a;
  --fire-2:#ff8c33;
  --fire-lo:#e0341a;
  --hot:#ffd15a;

  --purple:#a855f7;
  --purple-2:#7c3aed;
  --gold:#f5b731;
  --gold-2:#ffcf4d;
  --good:#57cf95;

  --display:"Impact","Haettenschweiler","Arial Black","Franklin Gothic Bold",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;

  --maxw:1240px;
  --pad:clamp(16px,4vw,32px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);color:var(--ink);min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;letter-spacing:.1px;
  background:var(--bg) url("burn_bg.png?v=bg1") no-repeat center top;
  background-size:cover;
  background-attachment:fixed;
}
::selection{background:rgba(255,106,26,.32);color:#fff}
.hidden{display:none !important}

/* scrim over the background art: keep hero visible, darken toward the panels for readability */
.lava{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,4,2,.20) 0%,
    rgba(8,4,2,.50) 40%,
    rgba(8,4,2,.84) 76%,
    rgba(8,4,2,.95) 100%);}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------- header ---------------- */
.rig{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(11,7,4,.85),rgba(11,7,4,.35))}
.rig-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:120px;width:auto;display:block;filter:drop-shadow(0 2px 12px rgba(255,90,20,.5))}
.rig-right{display:flex;align-items:center;gap:12px}
.net-badge{font-family:var(--body);font-size:11px;font-weight:700;padding:6px 11px;border-radius:8px;border:1px solid var(--line-2);color:var(--muted)}
.net-badge.ok{color:var(--good);border-color:rgba(87,207,149,.4)}
.net-badge.warn{color:#ff9d86;border-color:rgba(224,52,26,.5);cursor:pointer}

/* ---------------- buttons ---------------- */
.btn{font-family:var(--body);font-weight:800;cursor:pointer;border:1px solid transparent;border-radius:10px;
  padding:12px 18px;font-size:14px;color:var(--ink);letter-spacing:.5px;
  transition:transform .12s ease,filter .16s,box-shadow .24s,background .16s,border-color .16s;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn:disabled{cursor:not-allowed;opacity:.45;filter:grayscale(.35);transform:none;box-shadow:none}
.btn .ic{font-size:15px}
.btn-wallet{border:1px solid var(--gold);color:var(--gold-2);font-weight:800;background:rgba(245,183,49,.07);border-radius:10px}
.btn-wallet:hover{background:rgba(245,183,49,.16);box-shadow:0 6px 22px rgba(245,183,49,.22)}
.btn-mini{padding:8px 12px;font-size:12px;border:1px solid var(--line-2);color:var(--fire-2);border-radius:8px}
.btn-mini:hover{color:var(--hot);border-color:var(--fire)}
.btn-ghost{border:1px solid var(--line-2);color:var(--muted)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-burn{font-family:var(--display);font-style:italic;letter-spacing:1.5px;font-size:22px;padding:16px;color:#2a0d04;
  background:linear-gradient(180deg,#ffd15a 0%,#ff8c1a 42%,#ff5a12 70%,#e0341a 100%);
  border:1px solid #ffcf6a;border-radius:12px;
  box-shadow:0 8px 30px rgba(255,90,20,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(120,20,0,.4);
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn-burn:hover:not(:disabled){box-shadow:0 10px 40px rgba(255,90,20,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-burn:disabled{background:linear-gradient(180deg,#3a251a,#2a1710);color:#7c6155;border-color:var(--line);text-shadow:none}
.btn-redeem{background:linear-gradient(180deg,#a855f7,#7c3aed);color:#fff;border:1px solid #c08cff;
  box-shadow:0 6px 24px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-redeem:hover:not(:disabled){box-shadow:0 8px 32px rgba(124,58,237,.6)}
.btn-claim{background:linear-gradient(180deg,#ffd76a,#f5a623);color:#3a2405;border:1px solid #ffdf8a;
  box-shadow:0 6px 24px rgba(245,166,35,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-claim:hover:not(:disabled){box-shadow:0 8px 32px rgba(245,166,35,.6)}
.btn-redeem:disabled,.btn-claim:disabled{background:#2a1a12;color:#7c6155;border-color:var(--line);box-shadow:none}
.full{width:100%;margin-top:12px}
.btn:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

/* ---------------- layout ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 40px}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:clamp(24px,4vw,54px) 0 clamp(16px,3vw,34px)}
.title{margin:0;font-family:var(--display);font-style:italic;line-height:.98;letter-spacing:1px;
  font-size:clamp(40px,6.6vw,76px)}
.title .fire{background:linear-gradient(180deg,#ffb347,#ff5a12 60%,#e0341a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 14px rgba(255,80,18,.5))}
.title .white{color:#f3ece6;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.lede{margin:22px 0 0;max-width:44ch;color:var(--muted);line-height:1.7;font-size:15.5px}
.lede-en{color:var(--faint);font-size:13px}
.blast{position:relative;margin:0;aspect-ratio:1/1;max-height:440px}
#nova{display:block;width:100%;height:100%}

.layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;margin-top:8px}
.col-left{display:flex;flex-direction:column;gap:20px}

/* ---------------- panels ---------------- */
.panel{border:1px solid var(--line-2);border-radius:16px;background:var(--panel);padding:clamp(18px,2.2vw,26px);
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 40px rgba(255,90,20,.04);backdrop-filter:blur(4px)}
.panel-fire{border-color:rgba(255,106,26,.42);box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 50px rgba(255,90,20,.06),0 0 30px rgba(255,90,20,.08)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ph-ic{font-size:20px;filter:drop-shadow(0 0 8px rgba(255,120,40,.7))}
.panel-head h2{margin:0;font-family:var(--display);font-style:italic;font-size:24px;letter-spacing:1px;color:var(--fire-2)}
.panel-head .en,.dash-head .en{font-family:var(--body);font-style:normal;font-weight:700;font-size:12px;letter-spacing:1.5px;color:var(--faint);margin-left:4px}

/* burn field */
.burn-field{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;
  background:rgba(0,0,0,.35);transition:border-color .16s,box-shadow .16s}
.burn-field:focus-within{border-color:var(--fire);box-shadow:0 0 0 3px rgba(255,106,26,.14)}
.bf-ic{font-size:20px;filter:drop-shadow(0 0 8px rgba(255,120,40,.7))}
.burn-field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-size:19px;font-weight:600}
.burn-field input::placeholder{color:#6b554b;font-weight:500;font-size:15px}
.pill{font-weight:800;font-size:13px;letter-spacing:.5px;color:var(--fire-2);white-space:nowrap}
.bal-line{font-size:12.5px;color:var(--muted);margin-top:9px;text-align:right}
.bal-line strong{color:var(--ink)}

.actions{display:flex;gap:12px;margin-top:16px}
.actions .btn-burn{flex:1}
.actions .btn-ghost{flex:0 0 auto;padding:16px 18px}
.note{font-size:11.5px;color:var(--faint);margin-top:12px;min-height:14px}
.hint-line{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
.hint-line b{color:var(--ink)}.hint-line b.hot{color:var(--fire-2)}
.foot-link{margin-top:12px;text-align:center}
.foot-link a{font-size:11.5px;letter-spacing:.5px;color:var(--faint);text-decoration:none}
.foot-link a:hover{color:var(--fire-2)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{border:1px solid var(--line);border-radius:14px;background:var(--panel-2);padding:18px 14px;text-align:center}
.step-ic{font-size:30px;filter:drop-shadow(0 0 10px rgba(255,120,40,.55))}
.step-t{font-family:var(--display);font-style:italic;font-size:18px;letter-spacing:1px;color:var(--fire-2);margin:8px 0 6px}
.step-d{font-size:12px;color:var(--muted);line-height:1.55}

/* telemetry */
.telemetry{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;background:var(--panel-2);overflow:hidden}
.tcell{padding:15px 16px;border-left:1px solid var(--line)}
.tcell:first-child{border-left:0}
.tlabel{font-size:11px;color:var(--faint);margin-bottom:8px}
.tvalue{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------------- dashboard ---------------- */
.dash-head{margin-bottom:16px}
.dash-head h2{margin:0;font-family:var(--display);font-style:italic;font-size:24px;letter-spacing:1px;color:var(--gold-2)}
.stat-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;margin-bottom:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.12))}
.sc-ic{font-size:24px;flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(255,120,40,.5))}
.sc-ic.bnb{font-family:var(--body);color:#12100a;background:linear-gradient(180deg,#ffd76a,#f0a500);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;filter:none;box-shadow:0 0 14px rgba(245,166,35,.5)}
.sc-body{flex:1;min-width:0}
.sc-l{font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--muted);margin-bottom:5px}
.sc-v{font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05;word-break:break-all}
.sc-unit{font-weight:800;font-size:13px;letter-spacing:.5px;flex:0 0 auto;align-self:flex-start;margin-top:4px}
.sc-sub{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.sc-sub .lk{color:var(--purple);font-weight:800}
.sc-timer{font-variant-numeric:tabular-nums;font-weight:800;color:var(--purple);background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.35);border-radius:6px;padding:3px 8px;font-size:12px}

.sc-fire{border-color:rgba(255,106,26,.5)}
.sc-fire .sc-v{color:#ff8c3a}.sc-fire .sc-unit{color:var(--fire-2)}
.sc-lock{border-color:rgba(168,85,247,.5);background:linear-gradient(180deg,rgba(124,58,237,.12),rgba(0,0,0,.15))}
.sc-lock .sc-ic{filter:drop-shadow(0 0 10px rgba(168,85,247,.6))}
.sc-lock .sc-v{color:#c99bff}
.sc-bnb{border-color:rgba(245,183,49,.5);background:linear-gradient(180deg,rgba(245,166,35,.1),rgba(0,0,0,.15))}
.sc-bnb .sc-v{color:var(--gold-2)}.sc-bnb .sc-unit{color:var(--gold-2)}

/* yield window */
.yield{border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(0,0,0,.24);margin-bottom:14px}
.yield-top{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--faint)}
.yield-share b{color:var(--ink)}
.yield-time{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;color:var(--fire-2);margin:8px 0 4px}
.yield-time.expired{color:var(--faint)}
.yield-track{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.yield-fill{height:100%;width:0;background:linear-gradient(90deg,#e0341a,#ff8c1a,#ffd15a);transition:width .6s ease}
.yield-hint{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.5}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9998;max-width:92vw;
  display:flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid var(--line-2);border-radius:12px;
  background:rgba(20,11,7,.96);backdrop-filter:blur(12px);color:var(--ink);font-size:13.5px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.toast a{color:var(--hot);text-decoration:none;font-weight:700}
.toast.success{border-color:rgba(87,207,149,.55)}
.toast.error{border-color:rgba(224,52,26,.6)}
.toast.pending{border-color:rgba(255,106,26,.6)}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--fire);animation:spin .8s linear infinite;display:inline-block}

/* footer */
.foot{max-width:var(--maxw);margin:0 auto;padding:22px var(--pad) 40px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  font-size:12px;color:var(--faint)}
.foot-dash{color:var(--fire-lo)}
.foot-slogan{font-family:var(--display);font-style:italic;letter-spacing:1px;color:var(--fire-2);font-size:15px}
.foot a{font-weight:700;color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--fire-2)}
.foot-chain{color:var(--faint)}

/* motion */
@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 10px rgba(255,120,40,.8))}50%{transform:scale(1.12) rotate(2deg);filter:drop-shadow(0 0 16px rgba(255,150,60,1))}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.brand-fire{animation:none}*{transition-duration:.01ms !important}}

/* responsive */
@media(max-width:920px){
  .hero{grid-template-columns:1fr;gap:16px}
  .blast{order:-1;aspect-ratio:16/10;max-height:300px}
  .layout{grid-template-columns:1fr}
}
@media(max-width:560px){
  .telemetry{grid-template-columns:1fr 1fr}
  .tcell:nth-child(3){border-left:0}
  .tcell:nth-child(n+3){border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .rig-in{gap:10px}
  .brand-logo{height:32px}
  .btn-wallet{padding:9px 12px;font-size:12px}
  .btn-wallet .ic{display:none}
  .title{font-size:clamp(34px,10vw,44px)}
}