:root{
  --bg-0:#0A0C13;
  --bg-1:#0F1320;
  --panel:#141926;
  --panel-2:#181E2E;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);
  --text:#EAEDF7;
  --text-dim:#9AA2B8;
  --text-faint:#6B7490;
  --violet:#8B6BFF;
  --cyan:#33D8E6;
  --gold:#FFC069;
  --green:#3EE6A8;
  --red:#FF7A8A;
  --grad:linear-gradient(120deg,var(--violet),var(--cyan));
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(139,107,255,0.16), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(51,216,230,0.10), transparent 55%),
    var(--bg-0);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',-apple-system,sans-serif;
  min-height:100vh;
  padding:32px 20px 64px;
}
h1,h2,h3,.display{font-family:'Space Grotesk','Inter',sans-serif;}
.wrap{max-width:880px;margin:0 auto;}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;}
.brand .mark{
  width:26px;height:26px;border-radius:7px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:#0A0C13;
  box-shadow:0 0 18px rgba(139,107,255,0.5);
}
.chip{
  font-size:12.5px;color:var(--text-dim);background:var(--panel);
  border:1px solid var(--line);padding:7px 12px;border-radius:99px;
}
.chip b{color:var(--text);font-weight:600;}

.card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:24px;
}
.section-title{font-size:13px;font-weight:600;color:var(--text-dim);margin:0 0 12px;}

/* buttons + inputs */
.btn{
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  border-radius:10px;padding:10px 16px;border:1px solid var(--line-strong);
  background:transparent;color:var(--text);
}
.btn:hover{border-color:rgba(255,255,255,0.28);}
.btn.primary{background:var(--grad);color:#0A0C13;border-color:transparent;}
.btn.danger{color:var(--red);border-color:rgba(255,122,138,0.35);}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.btn:disabled{opacity:.5;cursor:default;}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;color:var(--text-dim);font-weight:500;}
input,select,textarea{
  font-family:inherit;font-size:14px;color:var(--text);
  background:var(--bg-1);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;width:100%;
}
textarea{resize:vertical;min-height:70px;}

/* ---------- buyer page ---------- */
.hero{margin-bottom:26px;}
.hero .game{font-size:12.5px;color:var(--cyan);font-weight:600;margin-bottom:6px;}
.hero h1{font-size:28px;line-height:1.25;margin:0 0 8px;font-weight:600;max-width:520px;}
.hero p{color:var(--text-dim);font-size:14.5px;margin:0;max-width:480px;line-height:1.55;}

.tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);padding:5px;border-radius:14px;width:fit-content;margin-bottom:22px;}
.tab{border:none;background:transparent;color:var(--text-dim);font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;}
.tab.active{color:#0A0C13;background:var(--grad);}
.tab:not(.active):hover{color:var(--text);}
.tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.panel{display:none;}
.panel.active{display:block;}

.progress-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.progress-head .label{font-size:13px;color:var(--text-dim);}
.progress-head .pct{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;}
.progress-track{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:28px;}
.progress-track .fill{height:100%;background:var(--grad);border-radius:99px;}

.steps{list-style:none;margin:0;padding:0;position:relative;}
.steps::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:1.5px;background:var(--line);}
.step{position:relative;padding:0 0 26px 44px;display:flex;flex-direction:column;gap:3px;}
.step:last-child{padding-bottom:0;}
.step .dot{
  position:absolute;left:0;top:1px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;font-family:'Space Grotesk',sans-serif;
  border:1.5px solid var(--line-strong);background:var(--bg-1);color:var(--text-faint);z-index:1;
}
.step.done .dot{background:rgba(62,230,168,0.12);border-color:rgba(62,230,168,0.5);color:var(--green);}
.step.current .dot{background:var(--grad);border-color:transparent;color:#0A0C13;box-shadow:0 0 0 5px rgba(139,107,255,0.15);}
@media (prefers-reduced-motion:no-preference){
  .step.current .dot{animation:pulse 2s ease-in-out infinite;}
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(139,107,255,0.15);}50%{box-shadow:0 0 0 9px rgba(139,107,255,0.06);}}
.step .title{font-size:14.5px;font-weight:600;}
.step.done .title{color:var(--text-dim);}
.step .meta{font-size:12.5px;color:var(--text-faint);}
.step.current .meta{color:var(--cyan);}
.step-note{margin-top:2px;font-size:13px;color:var(--text-dim);line-height:1.5;max-width:440px;}

.wallet-hero{
  background:radial-gradient(400px 200px at 100% 0%,rgba(255,192,105,0.14),transparent 70%),linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:16px;
}
.wallet-hero .top-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.wallet-label{font-size:13px;color:var(--text-dim);}
.badge-credit{font-size:11.5px;font-weight:600;color:var(--gold);background:rgba(255,192,105,0.1);border:1px solid rgba(255,192,105,0.3);padding:5px 10px;border-radius:99px;}
.balance{font-family:'Space Grotesk',sans-serif;font-size:46px;font-weight:700;letter-spacing:-0.5px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.balance .plus{font-size:14px;font-weight:600;color:var(--gold);background:rgba(255,192,105,0.1);border:1px solid rgba(255,192,105,0.3);padding:4px 10px;border-radius:99px;font-family:'Inter',sans-serif;}
.sub{font-size:13px;color:var(--text-faint);margin-top:6px;line-height:1.5;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 0;}
.stat{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.stat .n{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;}
.stat .l{font-size:12px;color:var(--text-faint);margin-top:2px;}

.ref-box{margin-top:10px;display:flex;gap:8px;background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 14px;align-items:center;}
.ref-box input{flex:1;background:transparent;border:none;color:var(--text-dim);padding:6px 0;}
.ref-box .btn{padding:9px 16px;}

.activity{list-style:none;margin:0;padding:0;}
.activity li{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);gap:12px;}
.activity li:last-child{border-bottom:none;}
.a-left{display:flex;gap:12px;align-items:center;}
.a-icon{width:32px;height:32px;border-radius:9px;background:var(--bg-1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.a-title{font-size:13.5px;font-weight:500;}
.a-time{font-size:12px;color:var(--text-faint);}
.a-amount{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;white-space:nowrap;}
.a-amount.credit{color:var(--green);}
.a-amount.pending,.a-amount.expired{color:var(--text-faint);font-family:'Inter',sans-serif;font-weight:500;font-size:12.5px;}
.empty{font-size:13px;color:var(--text-faint);padding:6px 0;}

.notice-card{margin-top:16px;}
.notice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.notice-list li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.6;color:var(--text-faint);}
.notice-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.7;}
.notice-list li b{color:var(--text-dim);font-weight:600;}

/* email capture */
.notify{
  margin-bottom:22px;padding:22px 24px;border-radius:18px;
  background:radial-gradient(420px 200px at 0% 0%,rgba(51,216,230,0.14),transparent 70%),linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid rgba(51,216,230,0.3);
}
.notify h2{margin:0 0 6px;font-size:18px;font-weight:600;}
.notify p{margin:0 0 14px;color:var(--text-dim);font-size:13.5px;line-height:1.55;max-width:520px;}
.notify-form{display:flex;gap:8px;flex-wrap:wrap;}
.notify-form input[type=email]{flex:1;min-width:210px;}
.notify-check{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;color:var(--text-dim);line-height:1.5;cursor:pointer;}
.notify-check input{width:16px;height:16px;margin:2px 0 0;padding:0;flex-shrink:0;accent-color:var(--violet);}
.notify .fine{margin-top:10px;font-size:11.5px;color:var(--text-faint);}
.notify .err{color:var(--red);font-size:13px;margin-top:8px;min-height:0;}
.notify.done{border-color:rgba(62,230,168,0.35);background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:16px 20px;}
.notify.done .row-done{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;}
.notify.done b{color:var(--green);font-weight:600;}
.linklike{background:none;border:none;color:var(--text-dim);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0;}
.linklike:hover{color:var(--text);}

.state-card{text-align:center;padding:48px 24px;}
.state-card h2{margin:0 0 8px;font-size:20px;}
.state-card p{margin:0;color:var(--text-dim);font-size:14px;line-height:1.6;}

.footer-note{text-align:center;color:var(--text-faint);font-size:12px;margin-top:40px;}

@media (max-width:520px){
  body{padding:22px 14px 48px;}
  .hero h1{font-size:23px;}
  .balance{font-size:38px;}
  .card,.wallet-hero{padding:18px;}
}

/* ---- delivery estimate, banners, buyer's turn ---- */
.eta{
  margin:0 0 24px;padding:16px 18px;border-radius:14px;
  background:var(--bg-1);border:1px solid rgba(51,216,230,0.28);
}
.eta-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.eta-label{font-size:12.5px;color:var(--text-dim);}
.eta-range{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;margin-top:2px;}
.eta-left{font-size:13.5px;color:var(--cyan);font-weight:600;max-width:340px;text-align:right;line-height:1.45;}
.eta-left.late{color:var(--gold);font-weight:500;font-size:13px;}
.eta-rev{margin-top:10px;font-size:13px;color:var(--text-dim);line-height:1.5;}
.eta-rev b{color:var(--gold);font-weight:600;}
.eta-note{margin-top:10px;font-size:12px;color:var(--text-faint);line-height:1.5;}

.banner{margin:0 0 22px;padding:16px 18px;border-radius:14px;font-size:14px;line-height:1.6;color:var(--text-dim);}
.banner b{color:var(--text);font-weight:600;}
.banner.success{background:rgba(62,230,168,0.08);border:1px solid rgba(62,230,168,0.35);}
.banner.cancel{background:rgba(255,122,138,0.08);border:1px solid rgba(255,122,138,0.35);}

.step .desc{font-size:12.5px;color:var(--text-faint);line-height:1.5;max-width:460px;}
.step.done .desc{color:var(--text-faint);}
.step.current .desc{color:var(--text-dim);}
.step.stopped .dot{background:rgba(255,122,138,0.1);border-color:rgba(255,122,138,0.5);color:var(--red);}
.step.stopped .meta{color:var(--red);}
.step.turn .dot{background:linear-gradient(120deg,var(--gold),#ff9d6b);box-shadow:0 0 0 5px rgba(255,192,105,0.18);}
.step.turn .meta{color:var(--gold);font-weight:600;}
.step.turn .title{color:var(--text);}
@media (prefers-reduced-motion:no-preference){
  .step.turn .dot{animation:pulse-gold 2s ease-in-out infinite;}
}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 5px rgba(255,192,105,0.18);}50%{box-shadow:0 0 0 9px rgba(255,192,105,0.06);}}

.closing{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--text-dim);line-height:1.6;}
@media (max-width:520px){ .eta-left{text-align:left;} }

/* ---- lighter buyer page ---- */
.topbar{margin-bottom:20px;}
.notify{margin-bottom:18px;padding:16px 18px;}
.notify h2{font-size:15.5px;margin:0 0 4px;}
.notify p{margin:0 0 12px;font-size:13px;max-width:none;}
.notify h2:last-child{margin-bottom:0;}
.notify-check{margin-top:10px;font-size:12px;color:var(--text-faint);}
.notify .err:empty{display:none;}
.tabs{margin-bottom:16px;}
.step:not(.current):not(.stopped){padding-bottom:18px;}
.step:last-child{padding-bottom:0;}
.closing{margin-top:20px;padding-top:14px;font-size:12px;color:var(--text-faint);}
.terms summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-dim);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.terms summary::-webkit-details-marker{display:none;}
.terms summary::after{content:"Show";font-size:12px;font-weight:500;color:var(--text-faint);}
.terms[open] summary::after{content:"Hide";}
.terms summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px;}
.terms .notice-list{margin-top:16px;}

/* keep headings from leaving one word alone on the last line */
.notify h2,.notify p,.hero h1,.state-card h2,.banner{text-wrap:balance;}
.notify .row-done span{text-wrap:pretty;}
@media (max-width:520px){
  .notify h2{font-size:15px;}
  .notify p{font-size:12.5px;}
}