/* =====================================================
   ONE MILLION RAND PAGE — design tokens
   Palette drawn from the SA flag, restrained to a dark
   "ledger" surface with gold as the one loud accent.
   ===================================================== */
:root{
  --ink:        #0a0f1a;   /* page background, near-black navy */
  --panel:      #121a2b;   /* cards / sheets */
  --panel-2:    #182339;   /* raised panel */
  --line:       #263252;   /* hairlines */
  --text:       #eef1f8;
  --text-dim:   #9aa7c2;
  --gold:       #ffb612;   /* SA flag gold — primary accent / CTA */
  --gold-ink:   #241a00;
  --green:      #007a4d;   /* SA flag green — secondary / success */
  --red:        #de3831;   /* SA flag red — urgency / alerts */
  --blue:       #1e3fae;   /* SA flag blue — links / info */
  --taken:      #3a4560;
  --reserved:   #7a5a10;

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --radius: 14px;
  --radius-sm: 8px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
button{font-family:inherit}
a{color:var(--gold)}

.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(10,15,26,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; gap:10px; max-width:1100px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:15px; letter-spacing:.02em}
.brand .flag-icon{width:22px;height:22px;border-radius:5px;overflow:hidden; display:inline-block; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;}
.brand .flag-icon img{width:100%;height:100%;object-fit:cover; object-position:center 20%; display:block}
.stats{display:flex; gap:14px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim)}
.stats b{color:var(--gold); font-weight:700}
.topbar .acct-btn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:8px 12px; border-radius:999px; font-size:13px; cursor:pointer;
}

/* ---------- hero ---------- */
.hero{position:relative; padding:34px 16px 22px; overflow:hidden}
.hero-band{
  position:absolute; inset:0; opacity:.10; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0 42%, var(--green) 42% 48%, transparent 48% 100%),
    linear-gradient(65deg, transparent 0 42%, var(--red) 42% 48%, transparent 48% 100%),
    linear-gradient(180deg, transparent 0 46%, var(--gold) 46% 52%, transparent 52% 100%);
}
.hero-inner{position:relative; max-width:720px; margin:0 auto; text-align:center}
.eyebrow{font-family:var(--font-mono); font-size:12px; color:var(--gold); letter-spacing:.12em; text-transform:uppercase}
h1{font-family:var(--font-display); font-size:clamp(28px,7vw,48px); line-height:1.05; margin:10px 0 12px}
h1 .accent{color:var(--gold)}
.sub{color:var(--text-dim); font-size:15px; line-height:1.55; margin:0 auto 20px; max-width:520px}
.cta-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.btn{
  border:none; border-radius:999px; padding:13px 22px; font-size:15px; font-weight:700;
  cursor:pointer; transition:transform .12s ease;
}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold); color:var(--gold-ink)}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn-green{background:var(--green); color:#fff}
.btn-red{background:var(--red); color:#fff}
.btn-block{width:100%}
.btn-sm{padding:9px 14px; font-size:13.5px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.raised-strip{
  display:flex; justify-content:center; gap:26px; margin-top:22px; flex-wrap:wrap;
}

.step-tracker{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:26px 0 4px; padding:12px 10px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.step-mini{
  display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:12.5px; color:var(--text-dim);
  padding:5px 4px; flex-shrink:0;
}
.step-mini-n{
  width:18px; height:18px; border-radius:50%; background:var(--gold); color:var(--gold-ink);
  font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-arrow{color:var(--line); font-size:13px; flex-shrink:0}
@media (max-width:640px){
  .step-tracker{justify-content:flex-start}
}
.raised-item{text-align:center}
.raised-item .num{font-family:var(--font-mono); font-size:22px; color:var(--gold); font-weight:700}
.raised-item .lbl{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em}

/* ---------- canvas section ---------- */
.canvas-section{padding:6px 0 0}
.canvas-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 16px; max-width:1100px; margin:0 auto;
}
.toolbar-left{display:flex; gap:8px}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--panel);
  color:var(--text); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.mode-toggle{display:flex; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px}
.mode-toggle button{
  border:none; background:transparent; color:var(--text-dim); padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
}
.mode-toggle button.active{background:var(--gold); color:var(--gold-ink)}

.canvas-stage{
  position:relative; width:100%; aspect-ratio:1/1; max-height:78vh;
  background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; touch-action:none; cursor:grab;
}
.canvas-stage.buy-mode{cursor:crosshair}
.canvas-stage:active{cursor:grabbing}
#gridCanvas{position:absolute; left:0; top:0; image-rendering:pixelated}

.legend{
  display:flex; gap:14px; padding:10px 16px; font-size:11.5px; color:var(--text-dim); flex-wrap:wrap; max-width:1100px; margin:0 auto;
}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:10px; height:10px; border-radius:2px; display:inline-block}
.dot-avail{background:#2a3550; border:1px solid var(--line)}
.dot-reserved{background:var(--reserved)}
.dot-sold{background:var(--green)}
.dot-selected{background:var(--gold)}

/* ---------- lens / magnifier ---------- */
.lens{
  position:fixed; width:150px; height:150px; border-radius:50%;
  border:3px solid var(--gold); box-shadow:0 8px 30px rgba(0,0,0,.5);
  background-color:var(--panel-2); background-repeat:no-repeat;
  pointer-events:none; z-index:60; display:none; overflow:hidden;
}

/* ---------- sticky selection bar ---------- */
.selectbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--panel); border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 -8px 24px rgba(0,0,0,.35);
}
.selectbar.show{display:flex}
.selectbar .info{font-size:13px; color:var(--text-dim)}
.selectbar .info b{color:var(--text); font-family:var(--font-mono); font-size:16px}
.selectbar .price{color:var(--gold); font-family:var(--font-mono); font-weight:700; font-size:16px}

/* ---------- how it works ---------- */
.section{padding:36px 16px}
.section h2{font-family:var(--font-display); font-size:22px; margin:0 0 16px}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.step{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.step .n{font-family:var(--font-mono); color:var(--gold); font-size:13px}
.step h3{margin:6px 0 6px; font-size:15px}
.step p{margin:0; color:var(--text-dim); font-size:13.5px; line-height:1.5}

footer{padding:24px 16px 40px; text-align:center; color:var(--text-dim); font-size:12px}
footer a{color:var(--text-dim); text-decoration:underline}

/* ---------- modal / bottom sheet ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(4,7,14,.72); z-index:80;
  display:none; align-items:flex-end; justify-content:center;
}
.overlay.show{display:flex}
.sheet{
  width:100%; max-width:480px; max-height:92vh; overflow-y:auto;
  background:var(--panel); border-radius:20px 20px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  border:1px solid var(--line); border-bottom:none;
}
@media(min-width:640px){
  .overlay{align-items:center}
  .sheet{border-radius:20px; border-bottom:1px solid var(--line); margin:20px}
}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.sheet-head h3{margin:0; font-size:18px; font-family:var(--font-display)}
.sheet-close{background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer; line-height:1}

.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:5px}
.field input{
  width:100%; padding:12px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); font-size:15px;
}
.field input:focus{outline:2px solid var(--gold); outline-offset:1px}
.hint{font-size:12px; color:var(--text-dim); margin-top:6px}
.error-box{background:rgba(222,56,49,.14); border:1px solid var(--red); color:#ffb3af; padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:12px; display:none}
.error-box.show{display:block}

.ref-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); border:1px dashed var(--gold); border-radius:12px; padding:12px 14px; margin:10px 0;
}
.ref-chip .code{font-family:var(--font-mono); font-size:17px; color:var(--gold); letter-spacing:.03em}
.copy-btn{background:var(--gold); color:var(--gold-ink); border:none; border-radius:8px; padding:8px 12px; font-size:12.5px; font-weight:700; cursor:pointer}

.pay-option{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:13px; margin-bottom:10px}
.pay-option .lbl{font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px}
.pay-option .val{font-family:var(--font-mono); font-size:15px; word-break:break-all}

.upload-preview{
  width:100%; border-radius:12px; overflow:hidden; background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; min-height:120px;
}
.upload-preview img{width:100%; height:auto; object-fit:cover}
.file-btn{
  display:block; text-align:center; padding:12px; border:1px dashed var(--line); border-radius:10px;
  color:var(--text-dim); font-size:13.5px; cursor:pointer;
}

.badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700}
.badge-pending{background:rgba(255,182,18,.15); color:var(--gold)}
.badge-confirmed{background:rgba(0,122,77,.2); color:#3fdc9a}

.toast{
  position:fixed; left:50%; bottom:100px; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:10px; font-size:13.5px; z-index:100;
  opacity:0; pointer-events:none; transition:opacity .2s ease, bottom .2s ease;
}
.toast.show{opacity:1; bottom:120px}

.pixel-thumb-frame{border:2px solid var(--gold); border-radius:8px; overflow:hidden; display:inline-block}

.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite; display:inline-block; vertical-align:-3px; margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

.confetti-piece{position:fixed; top:-10px; z-index:120; pointer-events:none; border-radius:2px}