/* Shared lightweight illustrated atmosphere. Decoration never intercepts input. */
.library-page, .site-home.sunshine-theme {
  --glow-a:#8bd5ff; --glow-b:#ffaee0; --glow-c:#ffdb68;
  position:relative; isolation:isolate;
  background:radial-gradient(ellipse at 0 12%,var(--glow-a),transparent 55%),radial-gradient(ellipse at 100% 48%,var(--glow-b),transparent 55%),radial-gradient(ellipse at 10% 92%,var(--glow-c),transparent 60%),#f7edff;
}
.library-page.origin-pack { --glow-a:#65e9c6; --glow-b:#91dfff; --glow-c:#ffdb65; }
.library-page.special-pack { --glow-a:#c293ff; --glow-b:#ff9acb; --glow-c:#ffdc7c; }
:is(.library-page,.site-home)::before,:is(.library-page,.site-home)::after {
  content:""; position:fixed; inset:-45px; pointer-events:none; z-index:-1;
}
:is(.library-page,.site-home)::before { background:url('comic-doodles.svg') repeat; background-size:600px 640px; animation:doodle-drift 12s ease-in-out infinite alternate; }
:is(.library-page,.site-home)::after { background:radial-gradient(ellipse at 20% 30%,#ffffff70,transparent 45%),radial-gradient(ellipse at 80% 70%,var(--glow-c),transparent 50%); opacity:.3; animation:glow-drift 18s ease-in-out infinite alternate; }
@keyframes doodle-drift { from {transform:translate3d(-18px,-24px,0)} to {transform:translate3d(18px,24px,0)} }
@keyframes glow-drift { from {transform:translate3d(-25px,20px,0) scale(1);opacity:.2} to {transform:translate3d(25px,-20px,0) scale(1.08);opacity:.45} }
.library-main { padding-top:36px; padding-bottom:60px; }
.library-intro { background:linear-gradient(120deg,#ffffffed,#fff4ddeb 55%,#f0dcffed); border:1px solid #fff; box-shadow:0 14px 40px #55419118,inset 0 1px white; padding:32px; }
.library-intro h1 { font-size:clamp(34px,4.5vw,56px); color:#32346b; }
.library-intro h1 span { color:#e66387; }
.library-eyebrow { color:#60518d; }
.library-status-line { padding:0 8px; }
.library-page:not(.pack-page) #recent { background:linear-gradient(110deg,#f3faffed,#e9e4ffeb); border:1px solid white; box-shadow:0 10px 30px #55419110; }
.library-page:not(.pack-page) #upcoming { background:linear-gradient(110deg,#fff3d9ed,#ffe5eaeb); border:1px solid #fff9e6; }
.genre-shelves .shelf { background:#eff8ffed; border-top:3px solid #6bb6e0; box-shadow:0 8px 20px #47367e0a; }
.genre-shelves .shelf:nth-child(2) { background:#fff1f4ed; border-top:3px solid #e38aaa; }
.genre-shelves .shelf:nth-child(3) { background:#f0f9e9ed; border-top:3px solid #9cbd65; }
.genre-shelves .shelf:nth-child(4) { background:#f3edffed; border-top:3px solid #a98bdc; }
.genre-shelves .shelf:nth-child(5) { background:#fff7e2ed; border-top:3px solid #dfb550; }
.genre-shelves .shelf:nth-child(6) { background:#eaf9f3ed; border-top:3px solid #68b79b; }
.genre-shelves .shelf:nth-child(7) { background:#eaf4ffed; border-top:3px solid #7aa4d7; }
.genre-shelves .shelf:nth-child(8) { background:#fff0f8ed; border-top:3px solid #d28bab; }
.collection-card { box-shadow:0 10px 24px #244f4514; }
.tile-cover { box-shadow:0 5px 12px #39336716; }
.tile-placeholder { padding:14px; text-align:center; font-size:20px; }
.comic-tile[data-comic="fairy"] .tile-placeholder,.fairy-cover { background:radial-gradient(circle at 20% 20%,#fff8d1,transparent 65%),#e9dcff; color:#75549d; }
.comic-tile[data-comic="paradise2"] .tile-placeholder { background:linear-gradient(135deg,#203d6b,#66507e); color:#ffe4a9; }
.universe-timeline { padding:26px; background:linear-gradient(130deg,#fffffffa,#faf5fffa); border:1px solid white; border-radius:24px; box-shadow:0 14px 36px #55419112; }
/* A single connected rail; origins share one milestone, not three consecutive dates. */
.timeline-list { display:flex; gap:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#b8a8d6 #eee8f5; padding:8px 4px 18px; margin:20px 0 14px; }
.timeline-era { --era-color:#9278bd; flex:0 0 calc(var(--story-count) * 156px + 10px); min-width:0; position:relative; padding:0 20px 0 0; scroll-snap-align:start; }
.timeline-era:first-child { --era-color:#497eaf; }
.timeline-era:nth-child(2) { --era-color:#419b94; }
.timeline-era:nth-child(3) { --era-color:#9278bd; }
.timeline-era:nth-child(4) { --era-color:#c383a4; }
.timeline-era:nth-child(5) { --era-color:#c09a47; }
.timeline-era:nth-child(6) { --era-color:#6b96ae; }
.comic-tile[data-comic^="future5"] .tile-placeholder { background:linear-gradient(135deg,#fff1bd,#f8d7db); color:#805a42; }
.comic-tile[data-comic^="future6"] .tile-placeholder { background:linear-gradient(135deg,#d7f6ee,#dce4ff); color:#3c6583; }
.timeline-era::before { content:""; position:absolute; left:16px; right:0; top:16px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--era-color),#dcd2ec); }
.timeline-era:last-child { padding-right:0; }
.timeline-era:last-child::before { display:none; }
.era-heading { position:relative; margin-bottom:14px; min-height:106px; }
.era-heading .timeline-number { position:relative; margin:0 0 14px; background:var(--era-color); border:3px solid #fff; color:white; box-shadow:0 0 0 1px var(--era-color),0 4px 10px #5642731a; width:36px; height:36px; }
.era-heading h3 { margin:0; font-size:13px; line-height:1.4; color:#3f3c65; }
.era-heading p { margin:4px 0 0; color:#736787; font-size:10px; line-height:1.5; }
.era-stories { display:flex; gap:10px; }
.era-stories .comic-tile { width:146px; flex:0 0 146px; min-width:0; }
.era-stories .tile-title { font-size:11px; }
.era-stories .tile-placeholder { font-size:14px; padding:8px; }
.era-stories .tile-badge { font-size:7px; padding:2px 4px; left:3px; bottom:3px; }
.era-stories .tile-footer { flex-wrap:wrap; font-size:9px; }
.timeline-note { margin-bottom:0; }
.timeline-era { transition:flex-basis .3s ease,flex-grow .3s ease; }
.era-heading button.timeline-number { cursor:pointer; font:inherit; font-size:12px; font-weight:800; width:44px; height:44px; margin-top:-4px; margin-bottom:10px; transition:box-shadow .2s,background .2s; }
.era-heading button.timeline-number:hover { box-shadow:0 0 0 5px #b8a5da40; }
.era-heading button.timeline-number:focus-visible { outline:3px solid #3c548d; outline-offset:4px; }
.timeline-list.has-selection .timeline-era { flex:0 0 calc(var(--story-count) * 70px + 10px); }
.timeline-list.has-selection .timeline-era.is-selected { flex:0 0 max(700px,calc(var(--story-count) * 230px + 10px)); }
.timeline-list.has-selection .era-stories .comic-tile { flex:0 1 60px; }
.timeline-list.has-selection .is-selected .era-stories .comic-tile { width:220px; flex:0 0 220px; }
.timeline-list.has-selection .is-selected .era-stories { justify-content:center; }
.timeline-list.has-selection .is-selected .tile-title { font-size:12px; }
.timeline-list.has-selection .timeline-era:not(.is-selected) .tile-title { font-size:9px; }
.timeline-list.has-selection .timeline-era:not(.is-selected) .tile-footer,
.timeline-list.has-selection .timeline-era:not(.is-selected) .tile-badge { display:none; }
.timeline-list.has-selection .timeline-era:not(.is-selected) .tile-placeholder { font-size:9px; padding:3px; }
.timeline-list.has-selection .is-selected .timeline-number { box-shadow:0 0 0 5px #b8a5da50,0 4px 12px #58427925; }
.era-stories .comic-tile { transition:flex-basis .3s ease; }
.pack-hero { border-color:#fff; box-shadow:0 16px 40px #365a5324; }
.pack-toolbar { background:#fffdf2ed; padding:18px; border-radius:18px; border:1px solid white; }
.pack-page .pack-cover-wrap img { min-height:0; max-height:100%; object-fit:contain; }
.pack-page .cta { background:var(--pack-strong); box-shadow:0 3px 0 #00000024; }
.pack-page.special-pack .cta { background:linear-gradient(110deg,#59336f,#945886); }
.pack-grid-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
.special-pack .pack-grid-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pack-page .pack-cover-wrap { height:180px; }
.pack-page .book-title { font-size:18px; }
.pack-page .book-card { border-color:#ffffff; box-shadow:0 10px 28px #44346e17; }
.library-intro { background:linear-gradient(120deg,#d9f3ff,#fff1b9 55%,#efdaff); }
.library-page:not(.pack-page) #recent { background:linear-gradient(110deg,#e0f5ffed,#dedaffed); }
.library-page:not(.pack-page) #upcoming { background:linear-gradient(110deg,#ffecb4ed,#ffd6e5ed); }
.genre-shelves .shelf { background:#e0f3ff; border-top-color:#369edc; }
.genre-shelves .shelf:nth-child(2) { background:#ffe3ed; border-top-color:#e76ba1; }
.genre-shelves .shelf:nth-child(3) { background:#e4f6ce; border-top-color:#83b94a; }
.genre-shelves .shelf:nth-child(4) { background:#edddff; border-top-color:#a16bdf; }
.genre-shelves .shelf:nth-child(5) { background:#fff0bc; border-top-color:#dbac29; }
.genre-shelves .shelf:nth-child(6) { background:#d7f5e9; border-top-color:#39b38a; }
.genre-shelves .shelf:nth-child(7) { background:#dceaff; border-top-color:#598fe0; }
.genre-shelves .shelf:nth-child(8) { background:#ffe0f2; border-top-color:#d762a8; }
.collection-card { background:linear-gradient(120deg,#c9f5e4,#e7ffdb); }
.collection-card[data-pack="special"] { background:linear-gradient(120deg,#543282,#974f9b); }
.origin-pack .pack-hero { background:linear-gradient(125deg,#bdf6df,#fff0a3); }
.special-pack .pack-hero { background:linear-gradient(125deg,#502c7f,#884694 65%,#bf628a); }
@media(max-width:1000px) { .pack-grid-list,.special-pack .pack-grid-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .library-intro { padding:20px; } .universe-timeline { padding:16px; } :is(.library-page,.site-home)::before { background-size:420px auto; opacity:.75; } }
@media(max-width:520px) { .pack-grid-list,.special-pack .pack-grid-list { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { :is(.library-page,.site-home)::before,:is(.library-page,.site-home)::after { animation:none; } .timeline-era,.era-stories .comic-tile { transition:none; } }
@media print { :is(.library-page,.site-home)::before,:is(.library-page,.site-home)::after { display:none; } }