:root {
  --bg: #0b0d10;
  --panel: #141920;
  --ink: #e7eef7;
  --sub: #9fb0c0;
  --acc: #61dbfb;
  --good: #41b883;
  --warn: #f6a62f;
  --ring: #253042;
  --muted: #7c8b9a;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --plank: #0e1319;
  --plank-edge: #0a0f14;
}

/* Reset + Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); color: var(--ink); }
body {
  margin: 0;
  font: 16px/1.6 system-ui, Segoe UI, Roboto, Inter, Arial;
}
.wrap {
  max-width: 1200px;
  margin: auto;
  padding: 24px;
  display: grid;
  gap: 22px;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
h1 { margin: 0; font-size: 1.35rem; letter-spacing: .3px; }
.actions { display: flex; gap: 8px; }

.btn {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--acc); }
.btn:active { transform: translateY(0); }
.btn.outline { background: transparent; }
.btn.primary { background: var(--acc); color: #081016; border-color: transparent; }

/* Search */
.search-section {
  margin: 0 24px;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.controls {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-bottom: 20px;
}
.controls::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(15deg);
  font-size: 1rem;
  color: var(--sub);
  opacity: 0.5;
  pointer-events: none;
}
.input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--ring);
  color: var(--ink);
  padding: 10px 12px 10px 36px;
  border-radius: 10px;
  outline: none;
  font-family: inherit;
}
.input::placeholder { color: var(--muted); font-style: italic; }

/* Chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  font-size: .9rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--ring);
  color: var(--sub);
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
}

/* Neon glow per genre */
.chip[data-genre="dark_arcane"]       { border-color:#9b5de5; box-shadow:0 0 6px #9b5de5aa; }
.chip[data-genre="heroic_high"]       { border-color:#4cc9f0; box-shadow:0 0 6px #4cc9f0aa; }
.chip[data-genre="mystical_dreamlike"]{ border-color:#f72585; box-shadow:0 0 6px #f72585aa; }
.chip[data-genre="myth_legend"]       { border-color:#f6a62f; box-shadow:0 0 6px #f6a62faa; }
.chip[data-genre="gothic_folk_horror"]{ border-color:#ef233c; box-shadow:0 0 6px #ef233caa; }
.chip[data-genre="last_embers_tales"] { border-color:#61dbfb; box-shadow:0 0 6px #61dbfbaa; }
.chip[data-genre="all"]               { border-color:#3aff20; box-shadow:0 0 6px #99fb61aa; }

/* Active chip fills */
.chip[data-active="true"][data-genre="dark_arcane"]       { background:#9b5de5; color:#0b0d10; }
.chip[data-active="true"][data-genre="heroic_high"]       { background:#4cc9f0; color:#0b0d10; }
.chip[data-active="true"][data-genre="mystical_dreamlike"]{ background:#f72585; color:#fff; }
.chip[data-active="true"][data-genre="myth_legend"]       { background:#f6a62f; color:#0b0d10; }
.chip[data-active="true"][data-genre="gothic_folk_horror"]{ background:#ef233c; color:#fff; }
.chip[data-active="true"][data-genre="last_embers_tales"] { background:#61dbfb; color:#0b0d10; }
.chip[data-active="true"][data-genre="all"]               { background:#3aff20; color:#0b0d10; }

/* Intro */
.intro .sub { color: var(--sub); margin: .5rem 0 1rem; }
.intro-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 10px 0 20px;
}
.intro-cards .card {
  background: linear-gradient(135deg, #0f1319, #0c1016);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.intro-cards h2 { margin-top:0; font-size:1.1rem; color:var(--acc); }
@media (max-width:700px) { .intro-cards { grid-template-columns:1fr; } }

/* Shelves */
.shelves { display: grid; gap: 26px; }
.shelf {
  background: linear-gradient(0deg, var(--plank), #0d1218);
  border: 1px solid var(--plank-edge);
  border-radius: 14px;
  padding: 12px 12px 16px;
  box-shadow: var(--shadow);
  margin-bottom:2em;
}
.shelf-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 4px 10px;
}
.shelf-title { margin:0; font-size:1.05rem; letter-spacing:.2px; }
.shelf-count { color:var(--muted); font-size:.9rem; }
.shelf-rail { position:relative; padding-bottom:14px; margin-bottom:8px; }

/* Base shelf rail */
.shelf-rail::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:6px;
  border-radius:6px;
  background:linear-gradient(180deg,#0d131a,#070b10);
  box-shadow:0 3px 10px rgba(0,0,0,.5) inset, 0 -1px 0 rgba(255,255,255,.04) inset;
}
/* Add genre glow */
.shelf[data-genre="dark_arcane"] .shelf-rail::after        { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 12px 2px #9b5de5aa; }
.shelf[data-genre="heroic_high"] .shelf-rail::after        { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 12px 2px #4cc9f0aa; }
.shelf[data-genre="mystical_dreamlike"] .shelf-rail::after { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 12px 2px #f72585aa; }
.shelf[data-genre="myth_legend"] .shelf-rail::after        { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 12px 2px #f6a62faa; }
.shelf[data-genre="gothic_folk_horror"] .shelf-rail::after { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 12px 2px #ef233caa; }
.shelf[data-genre="last_embers_tales"] .shelf-rail::after  { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 12px 2px #61dbfbaa; }

/* Covers */
.covers {
  display:grid;
  grid-template-columns:repeat(5,minmax(170px,1fr));
  gap:14px;
  padding:6px 2px 2px;
}
.covers::-webkit-scrollbar { display:none; }

.cover {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid var(--ring);
  background:linear-gradient(135deg,#0f1620,#0b1118 60%,#0f1b2a);
  box-shadow:0 10px 18px rgba(0,0,0,.45);
  min-height:260px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Rune markers */
.cover::after {
  content:"";
  position:absolute;
  bottom:6px; right:8px;
  font-size:1.4rem;
  font-family:"Segoe UI Symbol","Noto Sans Symbols",sans-serif;
  text-shadow:0 0 6px currentColor,0 0 12px currentColor;
  pointer-events:none;
  z-index:2;
}
.cover[data-length="short"]::after   { content:"✦"; color:#4cc9f0; }
.cover[data-length="novella"]::after { content:"⌘"; color:#9b5de5; }
.cover[data-length="tale"]::after    { content:"☉"; color:#f72585; }
.cover[data-length="epic"]::after    { content:"⚚"; color:#f6a62f; }

/* Length legend */
.length-key {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin:12px 0 20px;
  font-size:0.9rem;
  color:var(--sub);
}
.length-item { display:flex; align-items:center; gap:6px; font-weight:500; }
.length-item[data-length="short"]   { color:#4cc9f0; text-shadow:0 0 6px #4cc9f0aa; }
.length-item[data-length="novella"] { color:#9b5de5; text-shadow:0 0 6px #9b5de5aa; }
.length-item[data-length="tale"]    { color:#f72585; text-shadow:0 0 6px #f72585aa; }
.length-item[data-length="epic"]    { color:#f6a62f; text-shadow:0 0 6px #f6a62faa; }

/* Hover system */
.cover:hover {
  transform: perspective(900px) rotateY(0deg) translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.45);
}
.cover[data-genre="dark_arcane"]:hover        { border-color:#9b5de5; box-shadow:0 0 12px 3px #9b5de588, 0 10px 18px rgba(0,0,0,.45); }
.cover[data-genre="heroic_high"]:hover        { border-color:#4cc9f0; box-shadow:0 0 12px 3px #4cc9f088, 0 10px 18px rgba(0,0,0,.45); }
.cover[data-genre="mystical_dreamlike"]:hover { border-color:#f72585; box-shadow:0 0 12px 3px #f7258588, 0 10px 18px rgba(0,0,0,.45); }
.cover[data-genre="myth_legend"]:hover        { border-color:#f6a62f; box-shadow:0 0 12px 3px #f6a62f88, 0 10px 18px rgba(0,0,0,.45); }
.cover[data-genre="gothic_folk_horror"]:hover { border-color:#ef233c; box-shadow:0 0 12px 3px #ef233c88, 0 10px 18px rgba(0,0,0,.45); }
.cover[data-genre="last_embers_tales"]:hover  { border-color:#61dbfb; box-shadow:0 0 12px 3px #61dbfb88, 0 10px 18px rgba(0,0,0,.45); }

/* Footer */
.site-footer {
  color: var(--muted);
  text-align: center;
  padding: 20px 0 10px;
}
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

/* Story container */
#storyMount {
  display:none;
  max-width:900px;
  margin:auto;
  padding:24px;
}
#storyMount[hidden]{ display:none!important; }
body[data-mode="story"] .intro,
body[data-mode="story"] #shelves { display:none!important; }
body[data-mode="story"] #storyMount {
  display:block!important;
  max-width:900px;
  margin:24px auto;
  padding:24px;
}
body[data-mode="story"] .site-footer { margin-top:40px; }

/* Responsive */
@media (max-width:1100px){ .covers{ grid-template-columns:repeat(4,minmax(170px,1fr)); } }
@media (max-width:900px) { .covers{ grid-template-columns:repeat(3,minmax(170px,1fr)); } }
@media (max-width:700px) { .covers{ grid-template-columns:repeat(2,minmax(170px,1fr)); } }
@media (max-width:420px) { .covers{ grid-template-columns:1fr; } }

/* XP bars */
.xpRow { display:grid; gap:2px; margin-bottom:8px; }
.xpBar {
  height:6px; background:#222; border-radius:4px;
  overflow:hidden; box-shadow:inset 0 0 4px rgba(0,0,0,.5);
}
.xpFill { height:100%; width:0%; transition:width 0.4s ease; border-radius:4px; }
.xpFill.knowledge { background:#4cc9f0; box-shadow:0 0 6px #4cc9f0aa; }
.xpFill.cunning   { background:#f72585; box-shadow:0 0 6px #f72585aa; }
.xpFill.will      { background:#f6a62f; box-shadow:0 0 6px #f6a62faa; }
.xpFill.arcana    { background:#9b5de5; box-shadow:0 0 6px #9b5de5aa; }

button.locked-choice {
  background:#232733; border-color:#333b52; color:#7c8b9a!important;
  cursor:not-allowed!important; opacity:0.68; position:relative;
}
button.locked-choice .lock-emoji { font-size:1.1em; vertical-align:middle; }
button.locked-choice:hover { background:#232733; border-color:#333b52; color:#7c8b9a; }

/* Synopsis paragraphs */
.synopsis p { margin:0 0 1em; }