/* =============== SHARED CHILLED CAT STYLES =============== */
:root {
  --bg1:#001f3f; --bg2:#004080; --card:#001a3a; --ink:#d0eaff;
  --cyan:#00ccff; --cyan2:#33ffff; --edge:#0066cc; --glow:#0088ff;
}

html,body {
  margin:0; padding:0;
  background:linear-gradient(to bottom,var(--bg1),var(--bg2));
  color:var(--ink);
  font-family:"Comic Sans MS",cursive,sans-serif;
}

/* Links */
a { color:#9dd7ff; text-decoration:none }
a:hover { color:#cfeaff }

/* Header */
.topbar {
  padding:14px 10px;
  text-align:center;
  background:#001a33;
  border-bottom:2px solid var(--cyan);
  text-shadow:0 0 6px #00f6ff,0 0 12px var(--cyan2);
}
.topbar h1 { margin:0; font-size:28px; color:var(--cyan) }
.sub { font-size:14px; color:#b0dfff; margin-top:4px }

/* Sections */
.wrap { max-width:1100px; margin:0 auto; padding:16px }
.section {
  background:linear-gradient(180deg,#002451,#001a3a);
  border:3px ridge var(--cyan);
  border-radius:14px;
  box-shadow:0 0 16px var(--glow),inset 0 0 18px #003a66;
  margin:16px 0; overflow:hidden;
}
.section h2 {
  margin:0; padding:12px 14px;
  color:#66ccff;
  border-bottom:2px solid var(--edge);
  text-shadow:0 0 5px var(--cyan);
}
.content { padding:14px }
.lead { color:#b0dfff; font-size:16px }

/* Callout */
.callout {
  background:#001233; border:2px dashed #33aaff;
  border-radius:10px; padding:10px; margin-top:10px;
}

/* Timeline */
.timeline { position:relative; margin:0; padding:0; list-style:none }
.timeline::before {
  content:""; position:absolute; left:14px; top:0; bottom:0;
  width:3px; background:#0a3f77; box-shadow:0 0 8px #0a3f77;
}
.event { position:relative; margin:0 0 16px 0; padding-left:46px }
.dot {
  position:absolute; left:6px; top:6px;
  width:16px; height:16px; border-radius:50%;
  background:#00ccff; box-shadow:0 0 10px #33ffff;
}
.event time { display:inline-block; font-weight:bold; color:#9dd7ff; margin-bottom:4px }
.card { background:#00162d; border:2px solid var(--edge); border-radius:10px; padding:10px }

/* Media grid */
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
.tile {
  background:#00132a; border:2px solid var(--edge); border-radius:10px;
  overflow:hidden; box-shadow:inset 0 0 10px #003356;
}
.tile img { width:100%; height:170px; object-fit:cover; display:block }
.tile .cap { padding:8px; color:#cfe8ff }

/* Tabs + gallery (stickers) */
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px auto}
.tab{padding:6px 12px;border:2px solid var(--cyan);border-radius:10px;background:#003366;color:#e0f7ff;cursor:pointer;box-shadow:0 0 8px #0088ff;text-shadow:0 0 4px var(--cyan2)}
.tab.active,.tab:hover{background:#004080;box-shadow:0 0 12px #33aaff}
.grid .card{border:3px ridge var(--cyan);border-radius:14px;overflow:hidden;position:relative}

/* Sticker thumbnails */
.thumb { aspect-ratio: 1/1; background:#00132a; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:2px solid var(--edge); }
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.card:hover .thumb img { transform:scale(1.06); }
.meta{padding:10px}
.title{font-weight:bold;color:#66ccff;margin:0 0 6px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:12px;border:1px solid var(--cyan);border-radius:999px;padding:2px 8px;background:#003b6b}
.cta-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* Buttons */
.btn {
  padding:6px 10px; border:2px solid var(--cyan); border-radius:10px;
  background:#003366; color:#e0f7ff; cursor:pointer;
  box-shadow:0 0 8px var(--glow); text-shadow:0 0 4px var(--cyan2);
}
.btn:hover { background:#004080; box-shadow:0 0 12px #33aaff }

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,20,50,.9);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox.show{display:flex}
.lb-card{max-width:min(92vw,1000px);max-height:90vh;background:#001a3a;border:3px ridge var(--cyan);border-radius:12px;box-shadow:0 0 16px #0099ff,inset 0 0 12px #003a66;overflow:auto}
.lb-media{background:#000c1f;display:flex;align-items:center;justify-content:center}
.lb-media img{max-width:100%;height:auto;display:block}
.lb-meta{padding:12px;border-top:2px solid var(--edge)}
.lb-title{margin:0 0 6px;color:#66ccff}
.lb-close{position:fixed;top:14px;right:16px;font-size:28px;cursor:pointer}

/* Whitepaper extras */
.marq{color:#00ccff;font-size:20px}
.blink{animation: blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
.stripe {
  --y:#ffd100; --k:#111;
  margin:12px auto; width:min(820px,92vw); height:38px;
  background: repeating-linear-gradient(45deg,var(--y) 0 22px,var(--k) 22px 44px);
  border:3px solid #ffea7f; box-shadow:0 0 12px #ffea7f;
  color:#ffffff;
  /* Outline + glow for readability */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 6px #ffffff,
     0 0 12px #00ccff;
  display:flex; align-items:center; justify-content:center;
  font-weight:bold; letter-spacing:1px;
}

.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center;margin:8px 0}
.cat{background:#00132a;border:3px solid var(--edge);border-radius:12px;box-shadow:0 0 10px #007bd1; padding:6px}
.cat img{display:block;width:120px;height:120px;object-fit:cover}
.progress{margin:14px auto 8px; width:min(720px,90vw); background:#00122a; border:2px solid var(--edge); border-radius:10px; overflow:hidden}
.progress .barfill{height:16px; width:33%; background:linear-gradient(90deg,#00a2ff,#33ffff); box-shadow:0 0 10px #00c6ff inset}

/* Footer */
footer { padding:20px; text-align:center; color:#9bbfe8 }


/* Whitepaper dedicated card (to avoid conflict with history .card) */
.wp-card{
  margin:16px auto;
  max-width:820px;
  padding:16px;
  background:linear-gradient(180deg,#002451,#001a3a);
  border:3px ridge var(--cyan);
  border-radius:14px;
  box-shadow:0 0 16px var(--glow), inset 0 0 18px #003a66;
}

section.wp-card a.btn {
  display:block;
  width:max-content;
  margin:12px auto 0;
}


/* Global site navigation */
.site-nav {
  display:flex;
  justify-content:center;
  gap:18px;
  padding:12px;
  background:#001a33;
  border-bottom:2px solid var(--cyan);
}
.site-nav .nav-link {
  color:#9dd7ff;
  font-weight:bold;
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  transition: background 0.2s;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active {
  background:#003366;
  color:#fff;
  box-shadow:0 0 8px var(--cyan2);
}


/* Index: external links gallery */
.link-images { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.link-images img { height:75px; width:auto; border:2px ridge var(--cyan); border-radius:6px;
  box-shadow:0 0 6px #0088ff; background:#001f3f; padding:4px; transition:transform .2s, box-shadow .2s; }
.link-images img:hover { box-shadow:0 0 14px var(--cyan2); transform:scale(1.08); }


/* Index: contract copy UI */
.address { font-family:"Courier New",monospace; font-size:16px; background:#111133; padding:6px 10px;
  border:2px dashed var(--cyan2); display:inline-block; color:#00ffff; text-shadow:0 0 6px #00ffcc; cursor:pointer; }
.copy-message { display:none; color:#66ff66; font-size:14px; font-weight:bold; text-shadow:0 0 5px #00ff00; animation: blink 1s step-start infinite; }


/* Index: music controls layout */
.btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
#volume { width:min(260px,90%); margin-top:8px; }


.marquee{
  font-size:28px;color:#00ccff;text-shadow:0 0 6px #00f6ff,0 0 12px #33ffff;margin:0 0 20px 0;
}


.counter{
  margin:30px auto;font-family:"Courier New",monospace;font-size:22px;color:#66ccff;background:#002244;
  display:inline-block;padding:8px 14px;border:2px ridge #00ccff;border-radius:6px;
  text-shadow:0 0 4px #00ccff,0 0 8px #0088ff;box-shadow:0 0 12px #003366 inset;
  display: block;       /* take full row space */
  width: fit-content;   /* shrink-wrap around content, but keep centering */
}


.links{margin:30px auto;padding:16px;background:#002244;border:3px ridge #00ccff;border-radius:10px;
  box-shadow:0 0 12px #003366 inset;text-align:center;display:block;max-width: 900px;}
.links h3{color:#66ccff;text-shadow:0 0 5px #00ccff;margin-bottom:12px}
.link-images{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.link-images a{display:inline-block;margin:8px}
.link-images img{height:100px;width:auto;border:2px ridge #00ccff;border-radius:6px;box-shadow:0 0 6px #0088ff;background:#001f3f;
  padding:6px;transition:transform .2s,box-shadow .2s}
.link-images img:hover{box-shadow:0 0 14px #33ffff;transform:scale(1.1)}



.contract-box{margin:30px auto;padding:12px;width:fit-content;background:#000033;border:4px double #00ffcc;border-radius:8px;
  box-shadow:0 0 12px #00ffff inset,0 0 10px #00ccff;color:#00ffcc;text-align:center;font-family:"Courier New",monospace}
.contract-box marquee{font-size:18px;color:#ff66ff;font-weight:bold;text-shadow:0 0 6px #ff00ff,0 0 10px #ff3399;margin-bottom:10px}
.contract-box .address{font-size:16px;background:#111133;padding:6px 10px;margin:10px auto;border:2px dashed #33ffff;display:inline-block;color:#00ffff;
  text-shadow:0 0 6px #00ffcc;cursor:pointer}
.contract-box .address:hover{background:#003366;box-shadow:0 0 8px #33ffff}
.copy-message{display:none;color:#66ff66;font-size:14px;font-weight:bold;text-shadow:0 0 5px #00ff00;animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:0}}



/* Persistent mini-player (global) */
.playerbar{
  position:fixed;left:0;right:0;bottom:0;background:#001a33;border-top:2px solid #00ccff;
  display:flex;align-items:center;gap:10px;padding:8px 12px;z-index:10000;box-shadow:0 -4px 16px rgba(0,0,0,.35);
}
.playerbar .pbtn{padding:4px 8px;border:2px solid #00ccff;border-radius:8px;background:#003366;color:#e0f7ff;cursor:pointer}
.playerbar .pbtn:hover{background:#004080}
.playerbar .ptrack{flex:1;min-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9dd7ff;font-weight:bold}
.playerbar .pvol{width:130px}
body{padding-bottom:70px}

.counter-section {
  text-align: center;
  margin: 20px auto;
}

.counter-section img {
  width: 150px;   /* adjust size */
  height: auto;
}

.about-card {
  border: 3px ridge #dcdcff;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(100,100,255,0.1));
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  text-align: center;
}

.about-card h2 {
  font-size: 1.8em;
  color: #fff;
  text-shadow: 0 0 6px #ff00ff, 0 0 10px #00ffff;
  margin-bottom: 10px;
}

.about-card p {
  line-height: 1.6;
  color: #f2f2ff;
  margin-bottom: 14px;
}

.retro-flair {
  margin-top: 16px;
  border: 2px dashed #aaaaff;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}

.browser-footer {
  text-align: center;
  margin-top: 40px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: white;
}

.browser-footer img {
  margin: 5px;
  border: 2px solid #000;
  image-rendering: pixelated; /* makes it look 90s */
}