body{margin:0;background:#0c0c0e;color:#e8e0d0;font-family:Georgia,serif}
a{color:#d8c49a}
header{position:sticky;top:0;background:#0c0c0e;border-bottom:1px solid #c9a86a;padding:14px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header b{letter-spacing:3px;color:#d8c49a}
header a{text-decoration:none;color:#e8e0d0;margin-right:14px;letter-spacing:1px}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center}
.hero img{width:100%;border:1px solid #c9a86a;outline:1px solid #c9a86a;outline-offset:6px}
h1{font-size:44px;color:#e8dcc0;margin:10px 0;letter-spacing:1px}
h2{color:#d8c49a;border-bottom:1px solid #c9a86a;padding-bottom:8px;letter-spacing:3px;text-transform:uppercase;font-size:20px}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.stat{background:#141414;border:1px solid #c9a86a;padding:12px 16px}
.stat b{font-size:22px;color:#fff;display:block}
section{margin:36px 0;border-top:1px solid #3a332a;padding-top:20px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.card{background:#141414;border:1px solid #c9a86a;padding:12px}
.card img{width:100%}
.mintbox{background:#141414;border:1px solid #c9a86a;padding:18px;margin:14px 0}
.mintbox.paid{border-style:double;border-width:3px}
input[type=number],input[type=text]{padding:10px;font-size:15px;border:1px solid #c9a86a;background:#0c0c0e;color:#fff}
input[type=number]{width:90px}
input[type=text]{width:100%;max-width:420px}
button{padding:11px 18px;border:1px solid #c9a86a;background:#d8c49a;color:#111;font-weight:bold;cursor:pointer;letter-spacing:1px}
#connectBtn{background:transparent;color:#d8c49a;border:1px solid #c9a86a;outline:1px solid #c9a86a;outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
.prompt-box{display:none;background:#0c0c0e;border:1px solid #c9a86a;padding:14px;white-space:pre-wrap;font-family:monospace;font-size:13px;color:#e8e0d0}
code{background:#141414;padding:2px 6px;word-break:break-all}
footer{color:#a89f8a;font-size:14px;padding:20px;text-align:center;border-top:1px solid #c9a86a}
#walletStatus{color:#a89f8a}
.boxcard{background:#141414;border:1px solid #c9a86a;padding:12px;text-align:center}
.boxcard img{width:100%}
.opening{animation:shake 0.6s infinite, openGlow 1.2s infinite}
@keyframes shake{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-3deg) scale(1.03)}75%{transform:rotate(3deg) scale(1.03)}}
@keyframes openGlow{0%,100%{box-shadow:0 0 10px rgba(255,217,122,.3)}50%{box-shadow:0 0 45px rgba(255,217,122,.9)}}
.revealed-card{animation:popIn 0.8s ease}
@keyframes popIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
.sparkle{position:absolute;font-size:26px;animation:sparkleFall 1.2s ease forwards}
@keyframes sparkleFall{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(60px) scale(.5);opacity:0}}
@media(max-width:700px){.hero{grid-template-columns:1fr}h1{font-size:32px}}
/* v3: small cards + popup */
#myBoxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.boxcard{padding:6px}
.boxcard img{width:100%;cursor:pointer}
.boxcard h3{font-size:13px;margin:6px 0 2px}
.boxcard p{font-size:12px;margin:2px 0}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-box{background:#141414;border:1px solid #c9a86a;padding:16px;max-width:360px;width:90%;max-height:85vh;overflow:auto;text-align:center;position:relative}
.modal-box img{width:100%}
.modal-close{position:absolute;top:8px;right:10px;background:#d8c49a;color:#111;border:1px solid #c9a86a;padding:4px 10px;cursor:pointer;font-weight:bold}