:root {
  --bg: #16131c; --panel: #221e2b; --line: #352f42; --text: #f3f0f7; --muted: #a59fb3;
  --chud: #e0a030; --woke: #b45cf0; --radius: 16px;
  --grad: linear-gradient(90deg, var(--chud), #c9c3d4 50%, var(--woke));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh; display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line);
  background: var(--bg);
}
/* Logo bar and the Books / Movies / Series / Music tabs stay pinned to the top together */
.pin { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.cats { display: flex; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { flex: 1 0 auto; border: 0; border-radius: 999px; padding: 6px 10px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.cats button.on { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.cats button.later { opacity: .5; cursor: default; } .cats button small { font-weight: 600; font-size: 11px; }
.logo { font-weight: 800; font-size: 22px; letter-spacing: -0.5px; text-decoration: none; }
.logo .c { color: var(--chud); } .logo .w { color: var(--woke); }
.modes { display: flex; background: var(--panel); border-radius: 999px; padding: 4px; }
.modes a { padding: 6px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); }
.modes a.on { background: var(--text); color: var(--bg); }
.modes a.tip { color: #72a4f2; }
.modes a.tip:hover { background: #72a4f2; color: #fff; }
@media (max-width: 360px) { .modes a { padding: 6px 11px; } }

main { overflow-x: clip; flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 16px; outline: none; }
.kofi {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px;
  background: #72a4f2; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 2px 10px rgba(114,164,242,.35);
}
.kofi:hover { filter: brightness(1.08); }
.foot { color: var(--muted); font-size: 13px; text-align: center; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }

/* Home */
.hero { text-align: center; padding: 24px 0 8px; }
.hero h1 { font-size: clamp(30px, 8vw, 44px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -1px; }
.hero h1 .c { color: var(--chud); } .hero h1 .w { color: var(--woke); }
.hero p { color: var(--muted); margin: 0 0 24px; }
.scale { margin: 0 auto 28px; max-width: 420px; }
.scale .bar { height: 12px; border-radius: 6px; background: var(--grad); }
.scale .ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-top: 6px; }
.scale .ends span:first-child { color: var(--chud); } .scale .ends span:last-child { color: var(--woke); }
.choices { display: grid; gap: 12px; }
.or { text-align: center; color: var(--muted); font-size: 14px; margin: 22px 0 10px; }
.big {
  display: block; width: 100%; padding: 18px; border-radius: var(--radius); border: 0;
  font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
}
.big.primary { background: var(--text); color: var(--bg); }
.big.alt { background: var(--panel); border: 1px solid var(--line); }
/* The main call to action: gradient, glow, gentle pulse */
.big.cta {
  position: relative; overflow: hidden; padding: 22px 18px; font-size: 24px; font-weight: 900; letter-spacing: -0.3px;
  color: #fff; background: linear-gradient(100deg, var(--chud) 0%, #d0609a 50%, var(--woke) 100%);
  background-size: 200% 100%; box-shadow: 0 8px 28px rgba(180, 92, 240, .45), 0 2px 0 rgba(255,255,255,.25) inset;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); animation: cta-shift 4s ease-in-out infinite alternate, cta-pulse 2.4s ease-in-out infinite;
  transition: transform .12s;
}
.big.cta:active { transform: scale(.97); }
.big.cta::after { /* light sweep across the button */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
  animation: cta-shine 3.2s ease-in-out infinite;
}
.cta-arrow { display: inline-block; animation: cta-nudge 1.2s ease-in-out infinite; }
.big.cta small { opacity: .9; font-weight: 700; font-size: 14px; letter-spacing: .3px; white-space: pre; }
@keyframes cta-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 8px 28px rgba(180,92,240,.45); } 50% { box-shadow: 0 8px 40px rgba(224,160,48,.6); } }
@keyframes cta-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes cta-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .big.cta, .big.cta::after, .cta-arrow { animation: none; } }
.big small { display: block; font-weight: 400; font-size: 14px; opacity: .7; margin-top: 2px; }

/* Top 10 boards */
.boards { margin-top: 36px; }
.boards h2 { font-size: 22px; margin: 0 0 12px; text-align: center; }
.tabs { display: flex; background: var(--panel); border-radius: 999px; padding: 4px; margin: 0 auto 14px; max-width: 360px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.top-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.top-col { background: var(--panel); border-radius: var(--radius); padding: 12px 8px; min-width: 0; }
.top-col h3 { margin: 0 0 8px; font-size: 16px; text-align: center; }
.top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.top-list a { display: grid; grid-template-columns: 12px 32px 1fr auto; gap: 6px; align-items: center; text-decoration: none; min-width: 0; }
.top-list .rank { color: var(--muted); font-size: 13px; font-weight: 700; text-align: right; }
.top-list .mini { width: 32px; height: 48px; border-radius: 4px; object-fit: cover; background: var(--line); }
.top-t { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.top-list .r-num { font-size: 18px; }
.top-list .r-num.none { font-size: 12px; }
.boards .empty { color: var(--muted); font-size: 14px; text-align: center; margin: 12px 0; }
@media (min-width: 560px) { .top-t { font-size: 14px; } }

/* Search */
.searchbox { display: flex; gap: 8px; margin-bottom: 16px; }
.searchbox input {
  flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
}
.searchbox input:focus { outline: 2px solid var(--woke); outline-offset: 1px; }
.searchbox button { border: 0; border-radius: 12px; padding: 0 18px; background: var(--text); color: var(--bg); font-weight: 700; }
.fallback { color: var(--muted); font-size: 13px; text-align: center; margin: 0 0 8px; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.result {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px 8px 6px;
  background: var(--panel); border-radius: 12px;
}
.result a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-decoration: none; min-width: 0; }
.r-text { min-width: 0; }
.arrows { display: flex; flex-direction: column; gap: 6px; }
.vrow { display: flex; align-items: center; gap: 2px; }
.vrow.woke .vcount { color: var(--woke); } .vrow.chud .vcount { color: var(--chud); }
.arrow { width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.arrow.woke { color: var(--woke); } .arrow.chud { color: var(--chud); }
.arrow.on.woke { background: var(--woke); color: #fff; } .arrow.on.chud { background: var(--chud); color: #fff; }
.arrow:disabled { opacity: .35; cursor: default; } .arrow.on:disabled { opacity: 1; }
.vcount { font-size: 14px; font-weight: 800; min-width: 20px; }
.r-score { min-width: 44px; text-align: right; }
.thumb { width: 56px; height: 84px; border-radius: 6px; object-fit: cover; background: var(--line); }
.r-title { font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-meta { color: var(--muted); font-size: 14px; margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note { color: var(--muted); text-align: center; padding: 24px 8px; }

/* Score meter */
.meter { position: relative; height: 10px; border-radius: 5px; background: var(--grad); }
.meter i {
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 3px solid var(--bg); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(255,255,255,.3);
}
.meter.none { background: var(--line); }
.score-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-top: 6px; }
.score-line b { font-size: 15px; }
.r-num { font-size: 30px; font-weight: 900; line-height: 1.1; }
.r-num.none { font-size: 15px; font-weight: 700; color: var(--muted); }
.retry { margin-top: 8px; border: 0; border-radius: 12px; padding: 12px 22px; background: var(--text); color: var(--bg); font-weight: 700; }
.tag-chud { color: var(--chud); } .tag-woke { color: var(--woke); } .tag-mid { color: #d7d2df; }

/* Book page */
.book { display: grid; gap: 16px; }
.book-head { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.book-head img, .book-head .nocover { width: 110px; height: 165px; border-radius: 8px; object-fit: cover; background: var(--line); }
.book h1 { font-size: 22px; line-height: 1.2; margin: 0 0 4px; }
.book .by { color: var(--muted); margin: 0; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 16px; }
.bignum { font-size: 44px; font-weight: 800; line-height: 1; }
.why { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.vote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.vbtn { border: 0; border-radius: 12px; padding: 16px; font-weight: 800; font-size: 17px; color: #16131c; }
.vbtn.chud { background: var(--chud); } .vbtn.woke { background: var(--woke); color: #fff; }
.vbtn:disabled { opacity: .35; cursor: default; }
.back { color: var(--muted); font-size: 15px; text-decoration: none; }

/* Swipe mode */
.deck { position: relative; height: min(61dvh, 560px); margin: 4px auto 0; max-width: 400px; touch-action: pan-y; user-select: none; }
.card {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); display: flex; flex-direction: column; will-change: transform;
  touch-action: none; /* the card owns the gesture, so a curved thumb swipe isn't taken as a page scroll */
}
.card.behind { transform: scale(.95) translateY(10px); filter: brightness(.7); }
.card .cover { position: relative; flex: 1; min-height: 0; background: #0d0b11; perspective: 1200px; }
/* Hold to flip: front = cover, back = what the book is about */
.card .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s ease; }
.card.flipped .flip { transform: rotateY(180deg); }
.card.flipped { touch-action: pan-y; } /* flipped: the blurb can scroll */
.card .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card .face.back {
  transform: rotateY(180deg); background: var(--panel); padding: 18px 18px 52px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch;
}
.card, .card * { -webkit-touch-callout: none; }
.back-title { font-weight: 800; font-size: 19px; line-height: 1.2; }
.back-by { color: var(--muted); font-size: 14px; }
.blurb-text p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.blurb-text p.muted, .muted { color: var(--muted); }
.back-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.back-tags span { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--line); color: #d7d2df; }
/* Little flip arrow, bottom-right of the cover (and of the back): tap to turn the card over */
.flip-icon {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; line-height: 1;
  color: #fff; background: rgba(22,19,28,.72); border: 1px solid rgba(255,255,255,.25); pointer-events: none;
}
.panel.about .blurb-text { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .card .flip { transition: none; } }
img.noimg { visibility: hidden; }
.card .cover .front:has(img.noimg) { background: linear-gradient(160deg, #2b2536, #16131c); }
.card .cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; -webkit-user-drag: none; }
/* Score badge: just the number, in the top-right corner of the cover, coloured from the CHUD -> WOKE gradient */
.cover-score {
  position: absolute; top: 12px; right: 12px;
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: #16131c; background: #c9c3d4;
  border: 3px solid #16131c; box-shadow: 0 4px 16px rgba(0,0,0,.55);
}
.cover-score.none { background: #352f42; color: var(--text); }
.book-head .cover-wrap { position: relative; }
.book-head .cover-score { top: 6px; right: 6px; width: 44px; height: 44px; font-size: 18px; border-width: 2px; }
.card .info { padding: 12px 16px 14px; }
.card .t { font-weight: 800; font-size: 18px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .a { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stamp {
  position: absolute; top: 24px; padding: 6px 14px; border: 4px solid; border-radius: 10px;
  font-size: 30px; font-weight: 900; letter-spacing: 1px; opacity: 0; pointer-events: none;
}
.stamp.chud { right: 20px; color: var(--chud); transform: rotate(14deg); }
.stamp.woke { left: 20px; color: var(--woke); transform: rotate(-14deg); }
.swipe-help { text-align: center; color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.swipe-btns { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; max-width: 400px; margin: 12px auto 0; align-items: center; }
/* MEH: a small round button in the colour halfway between CHUD orange and WOKE purple (dusty rose) */
.swipe-btns .skip {
  width: 58px; height: 58px; border-radius: 50%; padding: 0; border: 0;
  background: rgba(202, 126, 144, .3); color: #f0bcc8; font-weight: 800; font-size: 14px; letter-spacing: .5px; cursor: pointer;
}
.swipe-btns .skip:active { background: rgba(202, 126, 144, .38); }
.swipe-btns .skip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1; }
.swipe-btns .skip .both { font-size: 18px; font-weight: 400; margin-top: 2px; opacity: .85; }
.result-pop { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); }

#toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 30px);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 700;
  font-size: 15px; opacity: 0; transition: .2s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; z-index: 2147483647;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Ko-fi "Support me" button and its panel: centred at the bottom instead of Ko-fi's bottom-left */
/* Support me + Share sit together, centred: Ko-fi's button moves left by half the share button and gap (its frame has a little padding). */
.floatingchat-container-wrap, .floatingchat-container-wrap-mobi { left: 50% !important; transform: translateX(calc(-50% - 36px)) !important; }
.floating-chat-kofi-popup-iframe, .floating-chat-kofi-popup-iframe-mobi { left: 50% !important; transform: translateX(-50%) !important; max-width: calc(100vw - 24px); }
body { padding-bottom: 84px; } /* room so the button never covers the footer */

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Share button next to Ko-fi's "Support me" (placed by share.js; this is where it sits until then) */
.share-btn {
  position: fixed; left: calc(50% + 96px); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2147483646;
  width: 48px; height: 48px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  background: var(--chud); color: #16131c; box-shadow: 0 4px 16px rgba(0,0,0,.45); cursor: pointer;
}
.share-menu {
  position: fixed; left: calc(50% - 44px); bottom: 76px; z-index: 2147483646; min-width: 180px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 14px; background: var(--panel); box-shadow: 0 8px 30px rgba(0,0,0,.55);
}
.share-menu[hidden] { display: none; }
.share-menu a, .share-menu button { padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; text-align: left; background: none; border: 0; font-size: 15px; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: var(--line); }

/* Share card on a title page */
.share-card { display: grid; gap: 10px; }
.card-preview { width: 100%; height: auto; border-radius: 10px; display: block; background: var(--line); aspect-ratio: 1200 / 630; }
.card-share { border: 0; border-radius: 12px; padding: 12px; font-weight: 800; font-size: 16px; background: var(--chud); color: #16131c; cursor: pointer; }
.card-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.card-menu[hidden] { display: none; }
.card-menu button { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: transparent; color: var(--text); font-weight: 700; cursor: pointer; }