/* Full-card clickable collection cards */
.card-collection {
  display:block;
  text-decoration:none;
}
.card-collection:hover,
.card-collection:focus,
.card-collection:active {
  text-decoration:none;
}
.card-collection * { text-decoration:none; }
/* Base style for videotex.art */
:root {
  --bg: #0b0d10;
  --bg-alt: #14181f;
  --bg-accent: #1e242e;
  --fg: #d6e2f0;
  --fg-dim: #9aa6b4;
  --accent: #33f1a5;
  --accent-alt: #ff2fd4;
  --danger: #ff3b30;
  --warn: #ffa500;
  --font-ui: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --radius: 6px;
  --trans-fast: .18s cubic-bezier(.4,0,.2,1);
  --grid-max: 1240px;
  --shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset;
}

html.no-js body { opacity: 1; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: var(--font-ui); background: linear-gradient(135deg,var(--bg) 0%, #050607 100%); color: var(--fg); -webkit-font-smoothing: antialiased; overflow-x:hidden; padding-top:72px; }
html { overflow-x:hidden; }

/* CRT / phosphor effect */
.crt { position:relative; }
.crt:after { content:""; pointer-events:none; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 2px, rgba(0,0,0,0) 2px 4px); mix-blend-mode:overlay; opacity:.25; animation:scan 9s linear infinite; }
.crt h1, .crt h2 { text-shadow:0 0 6px rgba(51,241,165,.55), 0 0 18px rgba(255,47,212,.35); }
@keyframes scan { 0% { transform:translateY(0); } 100% { transform:translateY(4px); } }

/* Phosphor text utility */
.phosphor-text { text-shadow:0 0 4px rgba(51,241,165,.55),0 0 10px rgba(255,47,212,.3); }

.site-header { position:fixed; top:0; left:0; right:0; z-index:900; backdrop-filter: blur(12px); background:rgba(10,14,18,.72); border-bottom:1px solid #1f252d; display:flex; align-items:center; gap:2rem; padding:.85rem 1.5rem; }
.logo a { font-weight:600; letter-spacing:.5px; color:var(--fg); text-decoration:none; font-size:1.1rem; }
.logo span { color: var(--accent); }

.nav-primary { margin-left:auto; }
.nav-primary ul { list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; }
.nav-primary a { color:var(--fg-dim); text-decoration:none; font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; position:relative; padding:.4rem .2rem; display:inline-block; }
.nav-primary a:after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--accent), var(--accent-alt)); transition:width var(--trans-fast); }
.nav-primary a:hover, .nav-primary a:focus { color:var(--fg); }
.nav-primary a:hover:after, .nav-primary a:focus:after { width:100%; }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--fg); margin:5px 0; transition:var(--trans-fast); }

.theme-switch { background:var(--bg-accent); color:var(--fg); border:1px solid #2a313c; padding:.55rem .8rem; border-radius:var(--radius); cursor:pointer; font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; line-height:1; display:inline-flex; align-items:center; justify-content:center; outline:none; }
/* Show focus only for keyboard navigation */
.theme-switch:focus { outline:none; }
.theme-switch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.site-header #theme-switch { padding:.55rem .8rem; }
.theme-switch:hover { background:var(--accent); color:#02130b; }

.site-header .actions { display:flex; align-items:center; gap:.5rem; }

.site-main { min-height:60vh; }

/* Anchor offset so hash targets aren't hidden beneath sticky header */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] { scroll-margin-top: 90px; }
@media (max-width:880px){
  h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] { scroll-margin-top: 110px; }
}

.hero { position:relative; padding:8rem 1.5rem 5rem; text-align:center; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(51,241,165,.12), transparent 60%); pointer-events:none; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); margin:0 0 1.2rem; line-height:1.05; background:linear-gradient(90deg,var(--accent), var(--accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; }
.hero p.lead { max-width:740px; margin:0 auto 2rem; font-size: clamp(1.05rem, 2.1vw, 1.35rem); color:var(--fg-dim); line-height:1.5; }
.hero .cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn { --btn-bg:var(--accent); --btn-fg:#02130b; position:relative; display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.35rem; font-size:.95rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border-radius:var(--radius); background:var(--btn-bg); color:var(--btn-fg); border:1px solid #1d231c; box-shadow:var(--shadow); transition:var(--trans-fast); }
.btn:hover { filter:brightness(1.07); transform:translateY(-2px); }
.btn.alt { --btn-bg:var(--bg-accent); --btn-fg:var(--fg); border:1px solid #2d343f; }
.btn.alt:hover { background:var(--accent-alt); color:#1a0315; }

.section { padding:4.5rem 1.5rem; position:relative; }
.section + .section { border-top:1px solid #1b2129; }
.section-narrow { max-width:860px; margin:0 auto; }
.section h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin:0 0 1.2rem; background:linear-gradient(90deg,var(--accent-alt), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section p { line-height:1.6; }
.muted { color:var(--fg-dim); }

.grid { display:grid; gap:1.7rem; }
.grid-cols-3 { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.card { background:var(--bg-alt); border:1px solid #232a33; padding:1.25rem 1.1rem 1.4rem; border-radius:var(--radius); position:relative; display:flex; flex-direction:column; gap:.9rem; box-shadow:0 3px 14px -4px rgba(0,0,0,.55); }
.card:hover { border-color:#2f3742; }
.card img { display:block; width:100%; height:auto; border-radius:4px; background:#000; }
.status { font-size:.65rem; letter-spacing:.15em; font-weight:700; text-transform:uppercase; display:inline-block; padding:.35rem .55rem; border-radius:2rem; background:#222c36; color:var(--fg-dim); }
.status.coming-soon { background:linear-gradient(90deg,#222c36,#35223c); color:#b1bac4; }

.badge-chain { font-size:.6rem; font-weight:600; letter-spacing:.15em; background:#22352d; color:var(--accent); padding:.35rem .55rem; border-radius:2rem; }
body.theme-light .status { background:#dbe3ea; color:#4d5b68; }
body.theme-light .status.live { background:#d6f5e8; color:#0f5a39; }
body.theme-light .status.upcoming { background:#e7eaf2; color:#5a6070; }
body.theme-light .status.ended { background:#ede2e2; color:#744040; }
body.theme-light .badge-chain { background:#d6ecff; color:#004b92; }

.footer { font-size:.8rem; }
.site-footer { padding:3rem 1.5rem 5rem; background:#07090b; border-top:1px solid #1c222a; }
.site-footer .inner { max-width:var(--grid-max); margin:0 auto; }
.site-footer p { margin:.4rem 0; color:var(--fg-dim); }
.site-footer a { color:var(--accent); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
/* Light theme footer */
body.theme-light .site-footer { background:#f0f4f8; border-top:1px solid #d5dbe2; }
body.theme-light .site-footer p { color:#5f6b78; }
body.theme-light .site-footer a { color:var(--accent); }

/* FAQ */
.faq-item { border:1px solid #232a33; border-radius:var(--radius); margin-bottom:1rem; overflow:hidden; background:var(--bg-alt); }
.faq-item button { width:100%; text-align:left; padding:1rem 1.1rem; background:none; border:0; color:var(--fg); font:inherit; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.faq-item button:hover { background:#1a2027; }
body.theme-light .faq-item button:hover { background:#eef2f6; }
.faq-item .answer { max-height:0; overflow:hidden; transition:max-height .5s ease; padding:0 1.1rem; }
.faq-item.open .answer { padding:0 1.1rem 1rem; }

/* Mobile */
@media (max-width: 880px) {
  /* Mobile off-canvas menu: restored scroll so full list visible */
  .nav-primary { position:fixed; top:0; right:0; left:auto; width:78%; max-width:340px; background:rgba(11,14,18,.96); backdrop-filter:blur(18px); transform:translateX(110%); transition:var(--trans-fast); display:flex; flex-direction:column; justify-content:flex-start; padding:4rem 1.75rem 3rem; overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:-4px 0 14px -4px rgba(0,0,0,.6); z-index:400; }
  .nav-primary ul { flex-direction:column; gap:1.05rem; margin:0; padding:0; }
  .nav-primary a { font-size:.85rem; }
  @media (max-height: 720px) and (max-width:880px){
    .nav-primary { padding:3.5rem 1.5rem 2.4rem; }
    .nav-primary ul { gap:.9rem; }
  }
  @media (max-height: 640px) and (max-width:880px){
    .nav-primary { padding:3.2rem 1.4rem 2rem; }
    .nav-primary a { font-size:.8rem; letter-spacing:.07em; }
  }
  .nav-toggle { display:block; position:relative; z-index:1001; }
  body.nav-open .nav-primary { transform:translateX(0); }
  body.nav-open { overflow:hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  /* Optional backdrop */
  /* Overlay now real element instead of pseudo */
  body.nav-open:before { display:none; }
  .nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); z-index:350; }
  .site-header { z-index:500; }
}

/* Light theme toggle */
body.theme-light { --bg:#f4f7fb; --bg-alt:#fff; --bg-accent:#e9eff5; --fg:#1b222b; --fg-dim:#5f6b78; --accent:#006cff; --accent-alt:#8a2bff; background:linear-gradient(135deg,#f4f7fb,#e3e8ef); }
body.theme-light .site-header { background:rgba(255,255,255,.85); border-color:#d5dbe2; }
body.theme-light .nav-primary a { color:#5f6b78; }
body.theme-light .nav-primary a:hover { color:#192028; }
body.theme-light .card { border-color:#d8dfe6; background:#ffffff; }
body.theme-light .faq-item { border-color:#d8dfe6; background:#fff; }
body.theme-light .theme-switch { background:#dce3ea; color:#192028; border-color:#c2ccd6; }

/* NFT ID input refined */
.nft-id-input { font:inherit; background:var(--bg-accent); color:var(--fg); border:1px solid #2a3038; padding:.7rem .85rem; border-radius:var(--radius); width:130px; letter-spacing:.05em; font-weight:600; text-align:center; box-shadow:0 2px 4px rgba(0,0,0,.4) inset; transition:var(--trans-fast); }
.nft-id-input:focus { outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); background:#10161e; }
.nft-id-input::-webkit-inner-spin-button, .nft-id-input::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }
.nft-id-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.nft-id-input::-webkit-input-placeholder { color:var(--fg-dim); opacity:.55; }
.nft-id-input::placeholder { color:var(--fg-dim); opacity:.55; }
body.theme-light .nft-id-input { background:#e9eff5; border-color:#c8d2dc; color:#1b222b; box-shadow:0 2px 4px rgba(0,0,0,.08) inset; }
body.theme-light .nft-id-input:focus { background:#fff; border-color:var(--accent); }

/* Generic form inputs */
.form-input { font:inherit; background:var(--bg-accent); color:var(--fg); border:1px solid #2a3038; padding:.7rem .85rem; border-radius:var(--radius); letter-spacing:.03em; font-weight:500; width:100%; box-shadow:0 2px 4px rgba(0,0,0,.35) inset; transition:var(--trans-fast); }
.form-input:focus { outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); background:#10161e; }
.form-input::placeholder { color:var(--fg-dim); opacity:.55; }
body.theme-light .form-input { background:#e9eff5; border-color:#c8d2dc; color:#1b222b; box-shadow:0 2px 4px rgba(0,0,0,.08) inset; }
body.theme-light .form-input:focus { background:#fff; border-color:var(--accent); }

/* Mint timeline */
.mint-timeline { position:relative; display:flex; flex-direction:column; gap:1rem; margin:1.25rem 0 2.25rem; }
.mint-stage { display:flex; gap:1.2rem; align-items:stretch; }
.mint-stage-line { position:relative; flex:0 0 28px; display:flex; justify-content:center; }
.mint-stage-anchor { position:relative; width:14px; display:flex; justify-content:center; }
.mint-stage-dot { position:relative; width:14px; height:14px; min-width:14px; min-height:14px; border-radius:50%; border:2px solid #111; box-shadow:0 0 0 2px #222; background:linear-gradient(90deg,#2f3250,#1b1d2c); z-index:2; display:block; box-sizing:border-box; }
.mint-stage-dot-current { background:linear-gradient(90deg,#19a34a,#0d5c28); }
.mint-stage-dot-past { background:#333; }
.mint-stage-connector { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:2px; height:calc(100% + 1rem); background:#222; z-index:1; }
.mint-stage-card { flex:1 1 auto; border:1px solid #222; background:#0a0a0f; padding:1rem 1.1rem .95rem; border-radius:8px; }
.mint-stage-card-current { border-color:#1d3e2b; box-shadow:0 0 0 1px rgba(25,163,74,.2); }
.mint-stage-grid { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:flex-start; }
.mint-stage-info { flex:1 1 240px; min-width:200px; }
.mint-stage-name { font-weight:600; font-size:1rem; letter-spacing:.05em; }
.mint-stage-meta { font-size:.7rem; letter-spacing:.08em; margin-top:.4rem; color:var(--fg-dim); }
.mint-stage-meta + .mint-stage-meta { margin-top:.25rem; }
.mint-stage-tz { font-size:.6rem; letter-spacing:.12em; margin-top:.25rem; text-transform:uppercase; color:var(--fg-dim); }
.mint-stage-side { text-align:right; min-width:120px; }
.mint-stage-price { font-size:.8rem; white-space:nowrap; }
.mint-stage-status { margin-top:.5rem; }
.mint-stage-badge { display:inline-block; padding:.3rem .65rem; border-radius:999px; font-size:.55rem; letter-spacing:.15em; font-weight:600; color:#e6e6e6; border:1px solid #2d2d2d; text-transform:uppercase; background:linear-gradient(90deg,#2d2f49,#1a1c29); }
.mint-stage-badge-current { background:linear-gradient(90deg,#146c39,#0f4d28); }
.mint-stage-badge-past { background:#1d1d1d; }

/* Light theme adjustments for timeline */
body.theme-light .mint-stage-dot { border-color:#c5cdd6; box-shadow:0 0 0 2px #d5dde4; background:linear-gradient(90deg,#cbd3dd,#b8c1cc); }
body.theme-light .mint-stage-dot-current { background:linear-gradient(90deg,#2ca76a,#157d46); }
body.theme-light .mint-stage-dot-past { background:#b0b8c2; }
body.theme-light .mint-stage-connector { background:#cdd5de; }
body.theme-light .mint-stage-card { background:#ffffff; border-color:#d3dbe3; }
body.theme-light .mint-stage-card-current { border-color:#2ca76a; box-shadow:0 0 0 1px rgba(44,167,106,.25); }
body.theme-light .mint-stage-meta, body.theme-light .mint-stage-tz { color:#5f6b78; }
body.theme-light .mint-stage-badge { background:linear-gradient(90deg,#d1d8e0,#bcc5cf); color:#1b222b; border-color:#c2cbd4; }
body.theme-light .mint-stage-badge-current { background:linear-gradient(90deg,#2ca76a,#157d46); color:#fff; }
body.theme-light .mint-stage-badge-past { background:#dde3ea; color:#5f6b78; }

/* NFT attributes */
.nft-attributes { margin-top:1rem; }
.nft-attributes-title { font-size:1rem; margin:0 0 .5rem; }
.nft-attributes-grid { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); font-size:.7rem; letter-spacing:.05em; }
.nft-attr { background:#0a0d11; border:1px solid #1f252d; padding:.55rem .6rem .5rem; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.35) inset; }
.nft-attr-label { display:block; color:#7f8b97; font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; margin:0 0 .2rem; font-weight:600; }
.nft-attr-value { font-weight:600; color:#e6edf3; word-break:break-word; }

/* Light theme overrides for NFT attributes */
body.theme-light .nft-attr { background:#f2f6fa; border:1px solid #d3dbe3; box-shadow:0 1px 2px rgba(0,0,0,.06) inset; }
body.theme-light .nft-attr-label { color:#5f6b78; }
body.theme-light .nft-attr-value { color:#182028; }

/* Countdown */
.launch-countdown { margin:1.5rem 0 2.5rem; padding:1.25rem 1.1rem 1.3rem; background:var(--bg-alt); border:1px solid #232a33; border-radius:var(--radius); box-shadow:0 3px 14px -4px rgba(0,0,0,.55); }
.launch-countdown-title { margin:0 0 1rem; font-size:1.15rem; letter-spacing:.04em; background:linear-gradient(90deg,var(--accent), var(--accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.launch-countdown-grid { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); }
.launch-countdown .cd-item { background:#0f1419; padding:.75rem .65rem .7rem; border:1px solid #1f262f; border-radius:8px; text-align:center; }
.launch-countdown .cd-value { display:block; font-size:1.4rem; font-weight:600; letter-spacing:.05em; line-height:1; margin:0 0 .4rem; }
.launch-countdown .cd-label { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim); font-weight:600; }
.countdown-finished .launch-countdown-grid { opacity:.6; }
body.theme-light .launch-countdown { background:#ffffff; border-color:#d8dfe6; }
body.theme-light .launch-countdown .cd-item { background:#f2f6fa; border-color:#d3dbe3; }
body.theme-light .countdown-finished .launch-countdown-grid { opacity:.55; }