:root{
  --ink:#16130f;
  --ink-2:#1d1811;
  --ink-3:#251f16;
  --paper:#ece3d2;
  --paper-dim:#b0a692;
  --paper-faint:#7a7060;
  --crimson:#b13332;
  --crimson-2:#7c2222;
  --crimson-bright:#d4453f;
  --gold:#c9a259;
  --gold-2:#8f6f37;
  --gold-bright:#e6c47c;
  --line:rgba(236,227,210,0.14);
  --line-strong:rgba(236,227,210,0.24);
  --danger:#e0655f;
  --ok:#8fae6a;
}

*{box-sizing:border-box;}
/* Guarantee the HTML "hidden" attribute always wins, even on elements
   whose own class sets "display" (e.g. .btn sets display:inline-flex,
   which otherwise overrides the browser's default [hidden]{display:none}
   since same-specificity author CSS beats the user-agent stylesheet). */
[hidden]{display:none !important;}
html{background:var(--ink);}
body{
  margin:0;
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
::selection{background:var(--crimson);color:var(--paper);}

.wrap{max-width:760px;margin:0 auto;padding:0 clamp(20px,4vw,40px);}

h1,h2{
  font-family:'Shippori Mincho',serif;
  font-weight:800;
  letter-spacing:0.01em;
  text-wrap:balance;
  margin:0;
}

.eyebrow{
  display:block;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-bright);
  margin-bottom:10px;
}

.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}

/* ---------------- TOPBAR ---------------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--crimson);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:'Shippori Mincho',serif;
  font-size:1rem;
  flex-shrink:0;
}
.brand-name{
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.02em;
}
.brand-name em{font-style:normal;color:var(--gold-bright);font-weight:500;margin-left:6px;font-size:0.85rem;letter-spacing:0.14em;text-transform:uppercase;}

#wallet-area{display:flex;align-items:center;gap:10px;}
.btn-compact{padding:8px 16px;font-size:0.78rem;}

.wallet-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.82rem;
  color:var(--gold-bright);
  background:rgba(201,162,89,0.12);
  border:1px solid var(--gold-2);
  border-radius:999px;
  padding:8px 14px;
}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;
  font-size:0.86rem;
  letter-spacing:0.03em;
  text-decoration:none;
  border-radius:3px;
  padding:13px 22px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:0.55;cursor:not-allowed;}
.btn-primary{background:var(--crimson);color:var(--paper);border-color:var(--crimson-bright);}
.btn-primary:hover{background:var(--crimson-bright);}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);}

/* ---------------- LAYOUT / PANEL ---------------- */
main{padding:clamp(40px,7vw,72px) 0;}
.panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:clamp(26px,5vw,40px);
  margin-bottom:28px;
}
.section-title{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:8px;}
.section-sub{color:var(--paper-dim);max-width:56ch;font-size:0.95rem;margin:0;}

.divider{width:100%;height:1px;background:var(--line);margin:26px 0;position:relative;}
.divider::after{
  content:"";position:absolute;left:0;top:-3px;
  width:7px;height:7px;background:var(--gold);
  transform:rotate(45deg);
}

/* ---------------- STAT ROW ---------------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:22px;
}
@media (max-width:620px){ .stat-row{grid-template-columns:repeat(2,1fr);} }
.stat{
  background:var(--ink);
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-label{font-size:0.72rem;color:var(--paper-faint);text-transform:uppercase;letter-spacing:0.08em;min-height:2.4em;}
.stat-value{font-size:1.1rem;color:var(--gold-bright);}

/* ---------------- ENTRY FORM ---------------- */
.state-block p{margin:0 0 4px;color:var(--paper-dim);}
.state-block label{display:block;font-size:0.8rem;color:var(--paper-faint);margin:16px 0 8px;text-transform:uppercase;letter-spacing:0.08em;}
.balance-line{color:var(--paper) !important;font-size:1rem;margin-bottom:4px !important;}
.balance-line b{color:var(--gold-bright);}

.input-row{display:flex;align-items:stretch;border:1.5px solid var(--line-strong);background:var(--ink);}
.input-row:focus-within{border-color:var(--gold);}
.input-prefix{
  display:flex;align-items:center;
  padding:0 12px;
  color:var(--paper-faint);
  font-family:'JetBrains Mono',monospace;
  border-right:1px solid var(--line-strong);
}
.input-row input{
  flex:1;
  border:none;
  background:transparent;
  color:var(--paper);
  padding:13px 14px;
  font-size:0.95rem;
  font-family:'JetBrains Mono',monospace;
  outline:none;
}

.status-message{font-size:0.85rem;margin-top:12px;color:var(--paper-dim);}
.status-message.error{color:var(--danger);}

/* ---------------- HERO / OPENSEA CTA ---------------- */
.hero-cta{display:flex;gap:28px;align-items:center;}
.hero-cta-media{flex-shrink:0;width:130px;}
.hero-cta-img{width:100%;height:auto;display:block;border-radius:3px;}
.hero-cta-body{flex:1;min-width:0;}
.hero-cta-body .section-title{margin-bottom:8px;}
.hero-cta-body .section-sub{margin-bottom:18px;}
@media (max-width:620px){
  .hero-cta{flex-direction:column;align-items:flex-start;text-align:left;}
  .hero-cta-media{width:104px;}
}

/* ---------------- WALLET PICKER ---------------- */
.wallet-picker{
  margin-top:12px;
  padding:16px;
  background:var(--ink-2);
  border:1px solid var(--line-strong);
}
.wallet-picker-label{
  margin:0 0 10px;
  font-size:0.8rem;
  color:var(--paper-faint);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.wallet-picker-list{display:flex;flex-direction:column;gap:8px;}
.wallet-picker-btn{
  width:100%;
  justify-content:flex-start;
  gap:12px;
}
.wallet-picker-icon{width:20px;height:20px;border-radius:4px;flex-shrink:0;}

/* ---------------- WINNER CARD ---------------- */
.winner-panel{border-color:var(--gold-2);}
.card-wrap{
  width:100%;
  border:1px solid var(--line-strong);
  overflow:hidden;
  margin-top:18px;
}
#winner-canvas{display:block;width:100%;height:auto;}
.share-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}

/* ---------------- FOOTER ---------------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0 40px;
  color:var(--paper-faint);
  font-size:0.85rem;
}

@media (max-width:520px){
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:12px;}
  #wallet-area{width:100%;}
  #connect-btn{width:100%;justify-content:center;}
  .share-row{flex-direction:column;}
  .share-row .btn{width:100%;}
}