*{margin:0;padding:0;box-sizing:border-box}
:root{ --ink:#0b0c10; --panel:#12141a; --panel2:#171a21; --line:#242838; --txt:#c7ccd6; --dim:#6b7386;
  --cream:#f4f6f0; --acid:#CBF806; --orange:#ff6a1a; --green:#2fe38a; --red:#ff5470; --sky:#4fc3ff;
  --pixel:'Press Start 2P','Space Mono',monospace; --mono:'Space Mono',ui-monospace,monospace; }
html,body{overflow-x:hidden}
body{background:var(--ink);color:var(--txt);font-family:var(--mono);line-height:1.6;min-height:100vh}
a{color:var(--sky)}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(203,248,6,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(203,248,6,.04) 1px,transparent 1px);
  background-size:26px 26px; mask-image:radial-gradient(circle at 50% 20%,#000,transparent 90%)}
.wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:0 18px}

.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(11,12,16,.9);backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--pixel);font-size:12px;color:var(--acid);text-decoration:none}
.logo img{width:22px;height:22px;border-radius:5px}
.logo span{color:var(--dim)}
.hr{display:flex;align-items:center;gap:10px}
.netpill{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:5px 11px}
.netpill.on{color:var(--acid);border-color:rgba(203,248,6,.4)}
.balpill{color:var(--orange);border-color:rgba(255,106,26,.4)}

.btn{font-family:var(--pixel);font-size:11px;padding:11px 15px;border-radius:6px;border:2px solid var(--line);
  background:var(--panel2);color:var(--cream);cursor:pointer;box-shadow:4px 4px 0 rgba(0,0,0,.55);transition:transform .08s,box-shadow .08s}
.btn:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.btn.y{background:var(--acid);color:var(--ink);border-color:var(--acid);box-shadow:4px 4px 0 rgba(203,248,6,.3)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.big{width:100%;justify-content:center;padding:16px;font-size:13px}

/* The sealed wall behind the mint hero, matching the homepage. Drawn as
   pseudo-elements so no markup changes and nothing needs an inline style —
   the site's CSP is style-src 'self' with no unsafe-inline. */
.hero{position:relative;text-align:center;padding:40px 0 8px}
.hero::before,.hero::after{
  content:"";position:absolute;z-index:-1;
  top:-40px;bottom:-24px;left:50%;width:100vw;transform:translateX(-50%);
  pointer-events:none;
}
.hero::before{background:url('/brand/mosaic.jpg') 50% 34%/115% auto no-repeat;opacity:.62}
.hero::after{
  background:
    radial-gradient(ellipse 56% 52% at 50% 46%,rgba(0,0,0,.9) 20%,rgba(0,0,0,.52) 66%,rgba(0,0,0,.76) 100%),
    linear-gradient(180deg,rgba(0,0,0,.78) 0%,transparent 26% 68%,rgba(0,0,0,.95) 100%);
}
.hero h1,.hero .badge,.hero .tag{position:relative;text-shadow:0 2px 16px rgba(0,0,0,.92)}
.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--acid);
  border:1px solid rgba(203,248,6,.35);border-radius:100px;padding:6px 14px;margin-bottom:18px}
h1{font-family:var(--pixel);font-size:clamp(26px,7vw,44px);line-height:1.3;color:var(--cream)}
h1 .acc{color:var(--orange)}
.tag{font-size:13px;color:var(--txt);max-width:44ch;margin:16px auto 0}

.card{margin:26px 0;border:2px solid var(--line);border-radius:12px;background:var(--panel);padding:20px;
  box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media(max-width:520px){.stats{grid-template-columns:1fr 1fr}}
.st{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:11px;text-align:center}
.st .k{display:block;font-size:9px;letter-spacing:.5px;color:var(--dim);text-transform:uppercase;margin-bottom:6px}
.st b{font-family:var(--pixel);font-size:12px;color:var(--acid)}

.status{border:1px dashed var(--line);border-radius:8px;padding:13px;font-size:12.5px;color:var(--txt);text-align:center;margin-bottom:14px}
.status.ok{border-color:rgba(47,227,138,.5);color:var(--green)}
.status.bad{border-color:rgba(255,84,112,.5);color:var(--red)}
.status.wait{border-color:rgba(255,176,46,.5);color:#ffb02e}

/* ---- live gas / cost estimate box ---- */
.gasbox{border:1px solid rgba(255,106,26,.4);border-radius:10px;padding:16px;margin-bottom:14px;text-align:center;
  background:linear-gradient(180deg,rgba(255,106,26,.08),transparent)}
.gb-lab{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.gb-big{font-family:var(--pixel);font-size:clamp(18px,4.5vw,26px);line-height:1.3;color:var(--orange);margin:8px 0 6px}
.gb-sub{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.gb-sub b{color:var(--txt)}

/* ---- toolbar (random pick + selection) ---- */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.selinfo{font-family:var(--mono);font-size:12px;color:var(--dim)}
.selinfo b{color:var(--acid)}

/* ---- mint bar ---- */
.mintbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px;
  border:1px dashed var(--line);border-radius:8px;padding:12px}
.mb-info{font-family:var(--mono);font-size:13px;color:var(--txt)}
.mb-info b{color:var(--orange);font-family:var(--pixel);font-size:12px}
.mintbar .btn.big{flex:1;min-width:200px;margin:0}
.msg{margin-top:14px;font-family:var(--mono);font-size:12px;min-height:16px;text-align:center}
.msg.ok{color:var(--green)} .msg.bad{color:var(--red)} .msg.info{color:var(--sky)}
.hint{margin-top:8px;font-size:11px;color:var(--dim);text-align:center}
.foot{text-align:center;font-size:11px;color:var(--dim);padding:20px 0 40px;line-height:1.9}

/* ===== mobile pass (2026-09) ===== */
html,body{overflow-x:hidden;max-width:100%}
h1,h2{overflow-wrap:break-word}
@media(max-width:520px){
  .topbar{flex-wrap:wrap;gap:8px}
  h1{font-size:19px;line-height:1.4}
  .gb-big{font-size:14px}
  .mintbar{gap:8px} .mintbar .btn.big{min-width:0;width:100%;flex:1 1 100%}
}

/* mobile pass v2 (2026-09): kill residual overflow (gas label wrap, heading, stats, buttons) */
@media(max-width:560px){
  .hero h1{font-size:18px !important;line-height:1.4}
  .gb-lab{white-space:normal;overflow-wrap:break-word;font-size:10px;line-height:1.5}
  .gb-sub{font-size:11px}
  .toolbar .btn{flex:1 1 auto}
}
@media(max-width:410px){ .stats{grid-template-columns:1fr} }

/* ===== v3: sealed mint + the Feather map ===== */
.tag b{color:var(--acid)}
.mintrow{display:flex;gap:12px;align-items:stretch;margin-top:6px}
.qty{display:flex;align-items:center;gap:0;border:2px solid var(--line);border-radius:6px;background:var(--panel2);box-shadow:4px 4px 0 rgba(0,0,0,.55)}
.qty b{font-family:var(--pixel);font-size:14px;color:var(--acid);min-width:44px;text-align:center}
.btn.qb{border:0;box-shadow:none;background:transparent;padding:12px 14px;font-size:14px}
.btn.qb:hover{transform:none;background:#222633}
.mintrow .btn.big{flex:1;width:auto}
.mine-list{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.ml-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin-bottom:10px}
.rs{font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:4px 10px}
.rs.on{color:var(--acid);border-color:rgba(203,248,6,.4)}
.myblocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.mb{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;text-decoration:none;color:var(--txt);font-size:11px;line-height:1.5}
.mb img{width:44px;height:44px;border-radius:6px;background:#000;flex:none}
.mb div{display:flex;flex-direction:column;min-width:0}
.mb b{font-family:var(--pixel);font-size:10px;color:var(--cream)}
.mb span{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb.rev{border-color:rgba(203,248,6,.4)}
.mapcard{padding:16px}
.mapwrap{position:relative;width:100%;aspect-ratio:1;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#06070b;touch-action:none;cursor:crosshair}
.mapimg{width:100%;height:100%;display:block;object-fit:cover;image-rendering:auto;-webkit-user-select:none;user-select:none}
.mapov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
.tip{position:absolute;left:0;top:0;pointer-events:none;background:rgba(6,7,11,.94);border:1px solid rgba(203,248,6,.4);border-radius:8px;padding:8px 10px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--txt);min-width:170px;z-index:5}
.tip .acc{color:var(--acid)}
.maphint{font-size:11px;color:var(--dim);margin:10px 0 12px;text-align:center}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lg{display:flex;gap:9px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px}
.lg img{width:40px;height:40px;border-radius:6px;flex:none}
.lg div{display:flex;flex-direction:column;font-size:10px;line-height:1.45;min-width:0}
.lg b{font-family:var(--pixel);font-size:9px}
.lg span{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.legend{grid-template-columns:repeat(2,1fr)}.mintrow{flex-wrap:wrap}.qty{width:100%;justify-content:center}.mintrow .btn.big{flex:1 1 100%}}
@media(max-width:400px){.legend{grid-template-columns:1fr}}

.kc0{color:#CBF806!important}.kc1{color:#8a9a6a!important}.kc2{color:#b06cff!important}.kc3{color:#f2b632!important}.kc4{color:#8fd9ff!important}.kc5{color:#c9662a!important}.kc6{color:#3a7bff!important}.kc7{color:#ff6a1a!important}.kc8{color:#ff3b3b!important}