/* ============================================================
   DICKSCLOSUREDAY — style.css
   Themes via body[data-theme]. Default theme set in index.html (indigo).
   Universal book-card system: every card is the same height with
   aligned cover, title, genre, blurb, review, and button.
   ============================================================ */
* { box-sizing:border-box; margin:0; padding:0; }

/* ---------- THEME TOKENS ---------- */
body[data-theme="indigo"]{
  --bg:#070718; --bgdot:#15163a; --accent:#00e5ff; --accent2:#ff2bd6; --alert:#ff2bd6;
  --text:#cdd8ff; --panelbg:#0c0c26; --panelborder:#2b3aa0; --foot:#8fd8ff; --ctrbg:#03031a;
  --link:#5ff0ff; --linkv:#ff8be6; --glow:1;
}
body[data-theme="green"]{
  --bg:#000; --bgdot:#13131f; --accent:#39ff14; --accent2:#ffe600; --alert:#ff3b3b;
  --text:#b8ffb0; --panelbg:#04140a; --panelborder:#2f8f1f; --foot:#8fff7a; --ctrbg:#000;
  --link:#7dff5c; --linkv:#ffe600; --glow:1;
}
body[data-theme="amber"]{
  --bg:#0c0a06; --bgdot:#1d1605; --accent:#ffb000; --accent2:#ff8a1e; --alert:#ff5a2c;
  --text:#ffe2b0; --panelbg:#120d04; --panelborder:#7a4f10; --foot:#ffce80; --ctrbg:#0a0702;
  --link:#ffc857; --linkv:#ff8a1e; --glow:1;
}
body[data-theme="netscape"]{
  --bg:#c3c3bb; --bgdot:#b6b6ac; --accent:#000099; --accent2:#cc0000; --alert:#cc0000;
  --text:#1a1a1a; --panelbg:#deded4; --panelborder:#8f8f8f; --foot:#333; --ctrbg:#000;
  --link:#0000ee; --linkv:#551a8b; --glow:0;
}

body {
  background:var(--bg);
  background-image: radial-gradient(var(--bgdot) 1px, transparent 1px);
  background-size:15px 15px;
  color:var(--text);
  font-family:"Times New Roman",Times,serif;
  line-height:1.55;
  padding:0 14px 50px;
  transition: background-color .25s, color .25s;
}
.wrap { max-width:1100px; margin:0 auto; }
a { color:var(--link); }
a:visited { color:var(--linkv); }
a:focus-visible, select:focus-visible, button:focus-visible { outline:2px dashed var(--accent2); outline-offset:3px; }

.glow { text-shadow: 0 0 calc(var(--glow) * 6px) var(--accent), 0 0 calc(var(--glow) * 16px) var(--accent); }
body[data-theme="netscape"] .title { text-shadow:1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.25); }

/* ---------- TOP BAR / THEME SWITCH ---------- */
.topbar {
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  border-bottom:2px ridge var(--panelborder); padding:8px 0; margin-bottom:6px;
  font-family:"Courier New",monospace; font-size:13px; color:var(--foot);
}
.topbar label { letter-spacing:.12em; font-weight:700; color:var(--accent); }
.topbar select {
  font-family:"Courier New",monospace; font-size:13px; font-weight:700;
  background:var(--panelbg); color:var(--accent); border:2px outset var(--panelborder);
  padding:3px 6px; cursor:pointer;
}
body[data-theme="netscape"] .topbar select { background:#fff; }
.arrows { color:var(--alert); }

/* ---------- MASTHEAD ---------- */
header { text-align:center; padding:20px 0 10px; }
.title { font-size:clamp(34px,8vw,68px); font-weight:900; color:var(--accent); letter-spacing:.01em; line-height:.95; }
.tagline { color:var(--accent2); font-family:"Comic Sans MS","Comic Sans",cursive; font-size:clamp(13px,3vw,17px); margin-top:8px; }
.marquee { overflow:hidden; white-space:nowrap; border-top:2px ridge var(--accent); border-bottom:2px ridge var(--accent); margin:14px 0; padding:5px 0; }
.marquee span { display:inline-block; padding-left:100%; animation:scrollx 18s linear infinite; color:var(--alert); font-weight:700; font-size:14px; }
@keyframes scrollx { to { transform:translateX(-100%); } }
.blink { animation:blink 1.1s steps(2,start) infinite; color:var(--alert); font-weight:700; }
@keyframes blink { to { visibility:hidden; } }

/* ---------- INTRO ---------- */
.intro { border:3px ridge var(--panelborder); background:var(--panelbg); padding:16px 18px; margin:8px 0 26px; font-size:15px; }
.intro h2 { color:var(--accent2); font-family:"Comic Sans MS",cursive; font-size:16px; text-decoration:underline; margin-bottom:8px; }
.intro p { margin-bottom:8px; }
.intro .fine { font-size:12px; color:var(--foot); font-style:italic; }

/* ---------- SHELF (universal card grid) ---------- */
.shelf-head { text-align:center; color:var(--accent); font-size:22px; font-weight:900; margin:6px 0 4px; }
.shelf-sub { text-align:center; color:var(--foot); font-family:"Courier New",monospace; font-size:12px; letter-spacing:.1em; margin-bottom:20px; }

.shelf {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:1fr;          /* every row equal height -> all cards identical */
  gap:20px;
  align-items:stretch;
}
@media (max-width:880px){ .shelf { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .shelf { grid-template-columns:1fr; } }

.book {
  display:flex; flex-direction:column; height:100%;
  border:2px ridge var(--panelborder); background:var(--panelbg); padding:12px;
}
/* fixed cover area — identical across all cards */
.cover { position:relative; aspect-ratio:2/3; width:100%; border:2px outset rgba(255,255,255,.25); margin-bottom:10px; overflow:hidden; }
.cover .real { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.ph { position:absolute; inset:0; padding:10px 9px; display:flex; flex-direction:column; justify-content:space-between; z-index:1; }
.ph .pt { font-size:13px; font-weight:800; line-height:1.1; }
.ph .pa { font-size:10px; opacity:.85; }
.ph.greys { background:#2b2d31; color:#e9e6da; font-family:Georgia,serif; }
.ph.greys .pt{ font-weight:600; }
.ph.crypt { background:radial-gradient(120% 90% at 70% 25%,#2a3f6b 0%,#101d3c 70%); color:#ffae4d; font-family:"Arial Black",Impact,sans-serif; }
.ph.crypt .pa{ color:#fff; }
.ph.orb { background:#0d1b3a; color:#f3d27a; font-family:"Times New Roman",serif; }
.ph.orb .dot{ position:absolute; right:10px; bottom:34%; width:20px; height:20px; border-radius:50%; background:#e23b2e; box-shadow:0 0 11px #e23b2e; }
.ph.forb { background:linear-gradient(160deg,#5a3b73 0%,#c0623e 60%,#e8a24a 100%); color:#ffe9b0; font-family:Georgia,serif; }
.ph.forb .pt{ font-weight:700; }
.ph.hybrid { background:radial-gradient(circle at 50% 64%, rgba(60,222,200,.6) 0 12%, rgba(60,222,200,.18) 22%, transparent 38%), linear-gradient(#f6e4d0,#eccfb2); color:#6b4a35; font-family:Georgia,serif; }
.ph.hybrid .pt{ font-weight:700; }
.ph.davinci { background:radial-gradient(circle at 50% 46%, rgba(216,176,72,.16) 0 26%, transparent 42%), linear-gradient(#2a2117,#13100a); color:#d8b048; font-family:Georgia,serif; }
.ph.davinci .circ{ position:absolute; top:30%; left:50%; transform:translateX(-50%); width:54%; aspect-ratio:1; border:1px solid rgba(216,176,72,.5); border-radius:50%; }
.ph.davinci .pt{ font-weight:700; }
.ph.burger { background:radial-gradient(circle at 50% 60%, rgba(220,150,60,.4) 0 16%, transparent 40%), linear-gradient(#f4e6c4,#e7c98c); color:#6b4a25; font-family:Georgia,serif; }
.ph.burger .pt{ font-weight:700; }
.ph.richdad { background:linear-gradient(#5b2a8c,#3a1a5e); color:#ffd84d; font-family:"Arial Black",Impact,sans-serif; }
.ph.richdad .band{ position:absolute; left:0; right:0; top:46%; height:14%; background:#ffd84d; opacity:.9; }
.ph.richdad .pa{ color:#fff; position:relative; }

/* fixed-height text blocks so titles/tags/buttons all align */
.book .bt {
  color:var(--accent); font-size:16px; font-weight:800; line-height:1.15;
  min-height:2.3em;                 /* reserve 2 lines */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.book .ba { color:var(--text); font-size:12px; font-style:italic; margin:3px 0 7px; min-height:1.2em; }
.genre {
  display:inline-block; align-self:flex-start;
  background:var(--accent2); color:var(--bg);
  font-family:"Courier New",monospace; font-size:10px; font-weight:700; letter-spacing:.07em;
  padding:2px 7px; margin-bottom:9px;
}
body[data-theme="netscape"] .genre { color:#fff; }
.book .blurb {
  flex:1 1 auto;                    /* fills the variable middle so footers align */
  font-size:13px; margin-bottom:10px;
}
.book .stars {
  font-family:"Courier New",monospace; font-size:11px; color:var(--foot);
  min-height:3em;                    /* reserve ~2 lines so buttons align */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.book .stars b { color:var(--alert); }
.sample-btn {
  display:block; width:100%; text-align:center;
  font-family:"Courier New",monospace; font-weight:700; font-size:12px; letter-spacing:.05em;
  background:var(--accent); color:var(--bg); border:2px outset var(--accent);
  padding:7px 10px; margin-top:auto; cursor:pointer;   /* margin-top:auto pins to bottom */
}
.sample-btn:hover { filter:brightness(1.15); }
body[data-theme="netscape"] .sample-btn { color:#fff; }

/* ---------- EXCERPT MODAL ---------- */
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:18px; z-index:100; }
.modal-back[hidden] { display:none; }
.modal { background:var(--panelbg); border:3px ridge var(--accent); max-width:580px; width:100%; max-height:84vh; display:flex; flex-direction:column; box-shadow:0 0 34px rgba(0,0,0,.65); }
.modal-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--accent); color:var(--bg); padding:6px 8px 6px 12px; font-family:"Courier New",monospace; font-weight:700; letter-spacing:.05em; }
body[data-theme="netscape"] .modal-bar { color:#fff; }
.modal-title { font-size:13px; }
.modal-x { background:var(--panelbg); color:var(--accent); border:2px outset var(--accent); font-weight:700; cursor:pointer; min-width:26px; height:23px; line-height:1; }
body[data-theme="netscape"] .modal-x { background:#fff; }
.modal-body { padding:18px; overflow:auto; color:var(--text); }
.modal-body h4 { color:var(--accent2); font-family:"Comic Sans MS",cursive; font-size:14px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.04em; }
.modal-body p { margin-bottom:12px; font-size:15px; line-height:1.62; }
.modal-body .ex-foot { font-family:"Courier New",monospace; font-size:11px; color:var(--foot); border-top:1px dashed var(--panelborder); padding-top:10px; }

/* ---------- UNDER CONSTRUCTION ---------- */
.construction { text-align:center; margin:30px 0 10px; border:3px dashed var(--alert); padding:12px; font-family:"Courier New",monospace; color:var(--alert); font-weight:700;
  background:repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,255,0,.06) 12px, rgba(255,255,0,.06) 24px); }

/* ---------- FOOTER ---------- */
footer { text-align:center; margin-top:26px; padding-top:16px; border-top:2px ridge var(--panelborder); font-family:"Courier New",monospace; font-size:12px; color:var(--foot); }
footer p { margin-bottom:8px; }
.counter { display:inline-block; background:var(--ctrbg); border:1px solid var(--accent); color:var(--accent2); padding:2px 8px; letter-spacing:.22em; font-weight:700; }
.webring { margin:10px 0; }
.webring a { font-weight:700; text-decoration:none; }
.badge { display:inline-block; border:1px solid var(--panelborder); padding:3px 8px; margin:6px 4px 0; font-size:10px; letter-spacing:.06em; }

@media (prefers-reduced-motion:reduce){ .marquee span{ animation:none; padding-left:0; } .blink{ animation:none; } }