/* ✩｡:*xXBookCryptXx*:｡✩  ~ scene-emo bookstore stylesheet ~ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  --pink: #ff3eb5;
  --hotpink: #ff66cc;
  --darkpink: #cc0077;
  --black: #0a0a0a;
  --panel: #15101a;
  --panel2: #1e1426;
  --acid: #b6ff00;
  --cyan: #00fff7;
  --white: #f7e9ff;
  --border: #ff3eb5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--black);
  /* checkerboard + pink glow */
  background-image:
    repeating-linear-gradient(45deg, #1a1020 0 12px, #0e0a14 12px 24px),
    radial-gradient(circle at 50% -10%, rgba(255,62,181,0.35), transparent 60%);
  color: var(--white);
  font-family: 'VT323', 'Comic Sans MS', cursive;
  font-size: 20px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext y='16' font-size='16'%3E%E2%99%A5%3C/text%3E%3C/svg%3E") 4 4, auto;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--acid); text-decoration: underline wavy var(--pink); }

/* ---- sparkle cursor trail dots ---- */
.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 16px;
  animation: fall 1s linear forwards;
}
@keyframes fall {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(28px) scale(0.2) rotate(180deg); }
}

/* ---- marquee ---- */
.marquee {
  background: var(--black);
  border-top: 2px dashed var(--pink);
  border-bottom: 2px dashed var(--pink);
  color: var(--acid);
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 1px;
  padding: 4px 0;
  text-shadow: 0 0 6px var(--acid);
}

/* ---- layout shell ---- */
.shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 12px 60px;
}

/* ---- header ---- */
header.crypt-head {
  text-align: center;
  padding: 24px 10px 10px;
}
.logo {
  font-family: 'Press Start 2P', cursive;
  font-size: 30px;
  line-height: 1.5;
  color: var(--hotpink);
  text-shadow:
    2px 2px 0 var(--black),
    0 0 12px var(--pink),
    0 0 24px var(--darkpink);
  animation: glow 1.6s ease-in-out infinite alternate;
}
@keyframes glow {
  from { filter: drop-shadow(0 0 2px var(--pink)); }
  to   { filter: drop-shadow(0 0 14px var(--hotpink)); }
}
.tagline {
  color: var(--acid);
  font-size: 22px;
  margin-top: 6px;
}
.tagline .blink { animation: blink 1s steps(2,start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---- nav ---- */
nav.crypt-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 24px;
}
nav.crypt-nav a {
  background: linear-gradient(180deg, var(--hotpink), var(--darkpink));
  color: var(--white) !important;
  font-family: 'Press Start 2P', cursive;
  font-size: 11px;
  padding: 10px 14px;
  border: 2px outset var(--hotpink);
  border-radius: 4px;
  text-shadow: 1px 1px 0 var(--black);
  text-decoration: none !important;
}
nav.crypt-nav a:hover { background: linear-gradient(180deg, var(--acid), #5a8a00); color: var(--black) !important; }
nav.crypt-nav a.here { background: linear-gradient(180deg, var(--cyan), #007a76); color: var(--black) !important; }

/* ---- panels ---- */
.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--black), 4px 4px 0 var(--darkpink);
  margin: 18px 0;
  overflow: hidden;
}
.panel > h2 {
  margin: 0;
  background: repeating-linear-gradient(90deg, var(--darkpink) 0 10px, var(--pink) 10px 20px);
  color: var(--white);
  font-family: 'Press Start 2P', cursive;
  font-size: 13px;
  padding: 10px 12px;
  text-shadow: 1px 1px 0 var(--black);
}
.panel .body { padding: 14px; }

/* ---- columns on home ---- */
.cols { display: flex; flex-wrap: wrap; gap: 18px; }
.cols .col-side { flex: 1 1 220px; }
.cols .col-main { flex: 2 1 380px; }

/* ---- hit counter ---- */
.counter { text-align: center; }
.odometer {
  display: inline-flex;
  gap: 3px;
  background: var(--black);
  padding: 6px;
  border: 2px inset var(--cyan);
  border-radius: 4px;
}
.odometer span {
  font-family: 'Press Start 2P', cursive;
  font-size: 16px;
  color: var(--acid);
  background: #001a00;
  padding: 6px 5px;
  border-radius: 2px;
  text-shadow: 0 0 6px var(--acid);
}

/* ---- music player ---- */
.player { text-align: center; }
.player button {
  font-family: 'Press Start 2P', cursive;
  font-size: 11px;
  color: var(--black);
  background: linear-gradient(180deg, var(--acid), #6f9c00);
  border: 2px outset var(--acid);
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
}
.player button:active { border-style: inset; }
.now-playing { color: var(--cyan); margin-top: 8px; min-height: 24px; }
.eq { display: inline-flex; gap: 3px; height: 18px; vertical-align: middle; margin-left: 6px; }
.eq i { width: 4px; background: var(--acid); align-self: flex-end; animation: bounce 0.6s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay: .15s } .eq i:nth-child(3){ animation-delay: .3s } .eq i:nth-child(4){ animation-delay: .45s }
.eq.paused i { animation-play-state: paused; height: 4px; }
@keyframes bounce { 0%,100%{height:4px} 50%{height:18px} }

/* ---- blinkies / badges ---- */
.blinkies { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.blinkie {
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 3px 8px;
  border: 1px solid var(--white);
  border-radius: 3px;
  background: var(--black);
  text-shadow: 0 0 4px currentColor;
  animation: blink 1.4s steps(2,start) infinite;
}

/* ---- book grid ---- */
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; }
.book {
  background: var(--panel2);
  border: 2px solid var(--pink);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  transition: transform .12s;
}
.book:hover { transform: rotate(-1.5deg) scale(1.03); box-shadow: 0 0 16px var(--pink); }
.book .cover {
  height: 150px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  text-shadow: 0 0 12px #000;
  border: 1px solid rgba(255,255,255,.2);
}
.book h3 { font-family: 'VT323', monospace; font-size: 22px; margin: 8px 0 2px; color: var(--hotpink); }
.book .author { color: var(--cyan); font-size: 17px; }
.book .price { color: var(--acid); font-size: 20px; margin: 4px 0; }
.book .mood { font-size: 15px; color: #aa88cc; }
.book button {
  margin-top: 8px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  background: linear-gradient(180deg, var(--hotpink), var(--darkpink));
  color: var(--white);
  border: 2px outset var(--hotpink);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  width: 100%;
}
.book button:active { border-style: inset; }

/* ---- mood filter ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters button {
  font-family: 'VT323', monospace;
  font-size: 18px;
  background: var(--black);
  color: var(--cyan);
  border: 2px solid var(--cyan);
  border-radius: 14px;
  padding: 4px 12px;
  cursor: pointer;
}
.filters button.active { background: var(--cyan); color: var(--black); }

/* ---- guestbook form ---- */
.gb-form label { display: block; margin: 10px 0 3px; color: var(--hotpink); }
.gb-form input, .gb-form textarea {
  width: 100%;
  background: var(--black);
  color: var(--acid);
  border: 2px inset var(--pink);
  border-radius: 4px;
  font-family: 'VT323', monospace;
  font-size: 19px;
  padding: 7px;
}
.gb-form textarea { min-height: 80px; resize: vertical; }
.gb-form .mood-pick { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.gb-form .mood-pick button {
  background: var(--panel2); color: var(--white);
  border: 1px solid var(--pink); border-radius: 12px;
  padding: 3px 10px; font-family:'VT323',monospace; font-size:17px; cursor:pointer;
}
.gb-form .mood-pick button.sel { background: var(--pink); color: var(--black); }
.gb-form .submit {
  margin-top: 12px;
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  background: linear-gradient(180deg, var(--acid), #6f9c00);
  color: var(--black);
  border: 2px outset var(--acid);
  border-radius: 4px;
  padding: 12px 16px;
  cursor: pointer;
}

/* ---- guestbook entries ---- */
.entry {
  display: flex; gap: 10px;
  background: var(--panel2);
  border: 2px solid var(--pink);
  border-radius: 6px;
  padding: 10px;
  margin: 12px 0;
}
.entry .avatar {
  font-size: 34px; width: 56px; height: 56px; flex: none;
  display:flex; align-items:center; justify-content:center;
  background: var(--black); border:2px solid var(--cyan); border-radius:6px;
}
.entry .meta { color: var(--hotpink); font-size: 18px; }
.entry .meta .stamp { color: #8866aa; font-size: 15px; }
.entry .meta .moodtag { color: var(--acid); }
.entry .msg { color: var(--white); font-size: 19px; margin-top: 4px; word-break: break-word; }

/* ---- footer ---- */
footer.crypt-foot {
  text-align: center;
  color: #aa88cc;
  font-size: 16px;
  padding: 20px 10px 40px;
}
footer.crypt-foot .webring a { color: var(--cyan); }

.hr-stars { text-align:center; color: var(--pink); letter-spacing: 4px; margin: 6px 0; }

/* =====================================================
   ✩ mobile / small screens ✩
   ===================================================== */

/* tablets & small laptops */
@media (max-width: 700px) {
  .shell { padding: 0 10px 48px; }

  header.crypt-head { padding: 18px 8px 8px; }
  .logo { font-size: 22px; line-height: 1.4; }
  .tagline { font-size: 19px; }

  .marquee { font-size: 19px; }

  /* let the side + main columns stack full-width & in reading order */
  .cols { gap: 14px; }
  .cols .col-side,
  .cols .col-main { flex-basis: 100%; }

  .panel { margin: 14px 0; }
  .panel > h2 { font-size: 12px; padding: 9px 10px; }
  .panel .body { padding: 12px; }
}

/* phones */
@media (max-width: 480px) {
  body { font-size: 19px; }

  .logo { font-size: 17px; word-break: break-word; }
  .tagline { font-size: 17px; }
  .marquee { font-size: 17px; letter-spacing: 0; }

  nav.crypt-nav { gap: 6px; margin: 12px 6px 18px; }
  nav.crypt-nav a { font-size: 10px; padding: 9px 10px; }

  .panel > h2 { font-size: 11px; line-height: 1.5; }

  /* one comfortable book per row instead of cramped columns */
  .books { grid-template-columns: 1fr; gap: 12px; }
  .book .cover { height: 130px; font-size: 46px; }

  /* odometer can get wide — let it wrap & shrink */
  .odometer { flex-wrap: wrap; justify-content: center; }
  .odometer span { font-size: 14px; padding: 5px 4px; }

  /* roomier tap targets for the mood filters */
  .filters button,
  .gb-form .mood-pick button { padding: 7px 12px; }

  footer.crypt-foot { font-size: 15px; padding: 16px 8px 32px; }
}

/* touch devices: kill the fake cursor + hover-only effects */
@media (hover: none) {
  body { cursor: auto; }
  a:hover { color: var(--cyan); text-decoration: none; }
  .book:hover { transform: none; box-shadow: none; }
  nav.crypt-nav a:hover { background: linear-gradient(180deg, var(--hotpink), var(--darkpink)); color: var(--white) !important; }
}

/* respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}