:root{--black:#070708;--panel:#211d28;--slot:#211a2c;--edge:#563477;--bone:#fff1c7;--orange:#ff9d18;--yellow:#ffd226;--purple:#8d36d8;--green:#6ee236;--red:#f04442;--dim:#706378;--pixel:"Pixelify Sans","Courier New",monospace;--digits:"Jersey 10","Pixelify Sans","Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--bone)}
body{min-height:100svh;font-family:var(--pixel);background:radial-gradient(circle at 50% 0,#1d1424 0,#09090a 45%,#030304 85%) fixed;overflow-x:hidden}
button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #fff;outline-offset:4px}
a{color:inherit}[hidden]{display:none!important}
img{image-rendering:pixelated}

.top{max-width:1100px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:14px;border-bottom:2px solid #4d3014}
.wordmark{margin-right:auto;color:var(--yellow);font-size:26px;font-weight:700;letter-spacing:2px;text-decoration:none;text-shadow:3px 3px 0 #65165e}
select{background:#0d0d0e;color:var(--orange);border:2px solid #614c00;padding:7px 8px;box-shadow:3px 3px 0 #000;border-radius:0}
.chip-button{color:var(--yellow);border:2px solid #614c00;background:#0d0d0e;padding:7px 12px;box-shadow:3px 3px 0 #000;letter-spacing:1px}
.chip-button:hover:not(:disabled){border-color:var(--yellow)}

main{max-width:1100px;margin:0 auto;padding:36px 20px 40px}
.machine{display:grid;grid-template-columns:minmax(0,440px) minmax(0,320px);gap:40px;justify-content:center;align-items:center}
.screen{position:relative;aspect-ratio:1;background:#000;border:8px solid #252329;border-top-width:14px;outline:3px solid #6f4b19;box-shadow:inset 0 0 40px #000,12px 12px 0 #000}
.screen img{display:block;width:100%;height:100%;object-fit:contain}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.16) 3px 4px)}
.controls{display:flex;flex-direction:column;align-items:stretch;text-align:center}
.tagline{margin:0 0 14px;color:var(--orange);font-size:14px;letter-spacing:2px;text-transform:uppercase;line-height:1.5}/* Pixelify's 2 reads as an 8; numbers use Jersey 10. */
.counter{margin:0 0 18px;color:var(--yellow);font-family:var(--digits);font-weight:400;font-size:clamp(40px,4.6vw,60px);white-space:nowrap;text-shadow:4px 4px 0 #65165e;letter-spacing:1px}
.mint-button{min-height:72px;border:4px solid #3c2400;background:var(--yellow);color:#171009;font-size:34px;font-weight:700;letter-spacing:4px;box-shadow:inset -5px -5px #c36a00,inset 5px 5px #fff28b,8px 8px 0 #000}
.mint-button:hover:not(:disabled){background:#fff05a;transform:translateY(-2px)}
.mint-button:active:not(:disabled){transform:translate(4px,4px);box-shadow:inset -3px -3px #c36a00,inset 3px 3px #fff28b,4px 4px 0 #000}
.mint-button.minted-out,.mint-button.minted-out:disabled{background:var(--orange);border-color:#3c2400;color:#171009;box-shadow:inset -5px -5px #b05f00,inset 5px 5px #ffc46b,8px 8px 0 #000;cursor:not-allowed;transform:none}.mint-button:disabled:not(.minted-out){background:#3a3340;border-color:#1b171f;color:#7d7186;box-shadow:inset -5px -5px #2a2430,inset 5px 5px #4b4352,8px 8px 0 #000}
.download-gif{display:block;margin-top:18px;text-align:center;text-decoration:none}.mint-link{display:grid;place-items:center;text-decoration:none}.token-traits{justify-content:center;margin:0 0 22px}.token-traits span{font-size:12px}.availability{margin:16px 0 0;color:var(--green);font-size:13px;letter-spacing:3px}
.mint-status{margin-top:14px;font-size:14px;letter-spacing:1px;color:var(--green);overflow-wrap:anywhere}
.mint-status.error{color:var(--red)}
.share-art{margin:16px 0;aspect-ratio:1;background:#000;border:3px solid #0e0b11;display:grid;place-items:center}.share-art img{display:block;width:100%;height:100%}.share-x{display:grid;place-items:center;text-decoration:none;min-height:60px;font-size:24px}.share-view{display:block;margin-top:14px;text-align:center;text-decoration:none}.token-card{cursor:pointer}.token-media{display:grid}.token-media>a{display:contents}.tx-link{margin-top:8px;color:var(--orange);font-size:13px;letter-spacing:2px}

.minted{margin-top:56px}
.gallery-status{color:var(--dim);font-size:12px;letter-spacing:2px;margin:0 0 6px}
.token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.token-card{margin:0;background:var(--slot);border:4px solid var(--edge);box-shadow:inset 0 0 0 4px #100d15,5px 5px 0 #000;padding:8px}
.token-card:hover{border-color:var(--yellow)}
.token-media{aspect-ratio:1;background:#000;display:grid;place-items:center;border:3px solid #0e0b11}
.token-media img{display:block;width:100%;height:100%;object-fit:contain}
.token-loading{color:#3a2d44;font-size:24px}
.token-error{color:var(--red);font-size:11px;padding:10px;text-align:center}
.token-card figcaption{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding-top:8px;font-size:11px}
.token-card strong{color:#fff;font-family:var(--digits);font-weight:400;font-size:20px;letter-spacing:1px;margin-right:auto}.token-card strong a{color:inherit;text-decoration:none}.token-card strong a:hover{color:var(--yellow)}
.token-card figcaption a{color:var(--dim);text-decoration:none}.token-card figcaption a:hover{color:var(--bone)}
.trait-row{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.trait-row span{background:#2c1b36;color:#f5d979;padding:3px 5px;font-size:10px;border:2px solid #120c16}
.gallery-more{display:block;margin:22px auto 0}

.bottom{max-width:1100px;margin:0 auto;padding:14px 20px 24px;display:flex;justify-content:center;gap:24px;font-size:11px;letter-spacing:2px}
.bottom a{color:#4f4654;text-decoration:none}.bottom a:hover{color:var(--bone)}

dialog{border:4px solid #4e2817;background:rgba(22,19,25,.98);color:var(--bone);box-shadow:inset 0 0 0 3px #120e15,10px 10px 0 #000;max-width:380px;width:calc(100% - 32px);padding:22px}
dialog::backdrop{background:#030304cc}
.dialog-top{display:flex;justify-content:space-between;align-items:center}
.dialog-top h2{margin:0;color:var(--yellow);letter-spacing:3px;font-size:20px}
.icon-button{border:0;background:none;color:var(--bone);font-size:28px;width:36px;height:36px}
#wallet-list{display:grid;gap:10px;margin-top:16px}
#wallet-list button{min-height:48px;text-align:left;padding:10px 14px;background:var(--slot);border:4px solid var(--edge);color:var(--bone);box-shadow:4px 4px 0 #000}
#wallet-list button:hover{border-color:var(--yellow)}
#wallet-list p{margin:0;color:var(--dim);font-size:13px}
.noscript{text-align:center;color:var(--dim)}

@media(max-width:760px){
  .top{padding:12px 14px;gap:6px}.wordmark{font-size:17px;letter-spacing:1px}.top select,.top .chip-button{padding:5px 6px;font-size:13px;letter-spacing:0}
  main{padding:22px 14px 30px}
  .machine{grid-template-columns:1fr;gap:26px}
  .screen{border-width:6px;border-top-width:10px;box-shadow:inset 0 0 40px #000,7px 7px 0 #000}
  .counter{margin-bottom:12px}
  .token-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .minted{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
