@import url('/library/drinks.css');

/*
  The library adventures (The Glass Tower, Cheragh-e Jadoo). The book is cream paper with plum ink in both themes,
  like the reader, so the pictures always sit on the paper they were drawn
  for. The library's mint is the frame. The adventure sheet is page-coloured
  and follows the theme.
*/
.adv {
  --paper-book: #fffaf3;
  --ink-book: #4a2545;
  --ink-book-soft: #7a5a76;
  --tint: var(--mint);
  max-width: 64rem;
}
.adv-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.adv-top .crumb { margin: 0; }
.adv .drinks__cup { width: 2.2rem; }
.adv .drinks { min-height: 2.2rem; }
.adv .drinks__coaster { padding: 0.2rem 0.7rem; }
.adv .linkish { padding: 0; border: 0; background: none; color: var(--ink-soft); font-family: var(--font-display); font-size: var(--step--1); text-decoration: underline; }

/* Title screen. */
.cover {
  display: grid;
  gap: 1.25rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--tint);
  box-shadow: var(--shadow);
}
.cover__art svg, .book__art svg { display: block; width: 100%; height: auto; }
.cover__art { border-radius: calc(var(--radius) - 0.5rem); overflow: hidden; }
.cover__words { background: var(--paper-book); color: var(--ink-book); border-radius: calc(var(--radius) - 0.5rem); padding: 1.25rem; }
.cover__kicker { margin: 0; font-family: var(--font-display); color: var(--ink-book-soft); }
.cover h1 { color: var(--ink-book); margin: 0.2rem 0 0.5rem; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); }
.cover__lede { margin: 0 0 1rem; font-size: var(--step-1); max-width: 34rem; }
.cover__note { margin: -0.5rem 0 1rem; color: var(--ink-book-soft); font-size: var(--step--1); }
.cover__go { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.adv .cover__words button:not(.primary), .adv .book button:not(.primary) { background: var(--paper-book); color: var(--ink-book); border-color: #f3d6e6; }
.adv button.primary { color: #3a1636; }
@media (min-width: 48rem) {
  .cover { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .cover__words { display: flex; flex-direction: column; justify-content: center; }
}
.how { margin-top: 1.25rem; }
.how summary, .sheet summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; }
.how p { margin: 0.6rem 0 0; }

.found { margin-top: 2rem; }
.found h2 { font-size: var(--step-1); }
.endings { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; }
.ending {
  display: grid; gap: 0.15rem; align-content: center; min-height: 4.2rem; padding: 0.6rem 0.8rem; text-align: center;
  border-radius: 1rem; border: 2px dashed var(--rule); color: var(--ink-soft); font-family: var(--font-display);
}
.ending.got { border-style: solid; color: var(--ink); background: var(--paper); }
.ending--perfect.got { background: color-mix(in srgb, var(--shine) 30%, var(--paper)); border-color: var(--shine); }
.ending--good.got { background: color-mix(in srgb, var(--mint) 35%, var(--paper)); border-color: var(--mint); }
.ending--close.got { background: color-mix(in srgb, var(--lilac) 30%, var(--paper)); border-color: var(--lilac); }
.ending small { font-size: 0.75rem; color: var(--ink-soft); }

/* Rolling a hero. */
.roll { max-width: 34rem; margin-inline: auto; padding: 1.25rem; border-radius: var(--radius); background: var(--paper); border: 2px solid var(--rule); box-shadow: var(--shadow); }
.roll h1 { font-size: var(--step-3); }
.roll__lede { color: var(--ink-soft); margin: 0.4rem 0 1rem; }
.roll__rows { display: grid; gap: 0.6rem; }
.roll__row { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; align-items: center; gap: 0.6rem; font-family: var(--font-display); }
.roll__bar { height: 0.9rem; border-radius: 999px; background: var(--rule); overflow: hidden; }
.roll__bar span { display: block; height: 100%; width: 0; background: var(--candyfloss); border-radius: inherit; transition: width 120ms; }
.roll__n { text-align: right; font-size: var(--step-1); }
.roll__key { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; margin: 1.2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.roll__key dt { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.roll__key dd { margin: 0; }
.roll__meal { margin: 0.8rem 0 1rem; }

/* The book and the sheet. */
.play { display: grid; gap: 1rem; align-items: start; }
.play .sheet { order: -1; }
@media (min-width: 60rem) {
  .play { grid-template-columns: minmax(0, 1fr) 17rem; }
  .play .sheet { order: 0; position: sticky; top: 1rem; }
}

.book {
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--tint);
  box-shadow: var(--shadow);
}
.book--perfect { background: var(--shine); }
.book--bad { background: var(--lilac); }
.book--close { background: var(--peach); }
.book.turned > * { animation: page-in 280ms ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateX(1rem); } }
.book__art svg { max-height: min(58vh, 30rem); margin-inline: auto; }
.book__art { border-radius: calc(var(--radius) - 0.5rem) calc(var(--radius) - 0.5rem) 0 0; overflow: hidden; background: var(--paper-book); }
.book__words, .book__do { background: var(--paper-book); color: var(--ink-book); padding: 0.4rem 1.25rem 0.2rem; }
.book__words { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); line-height: 1.6; }
.book__words p { margin: 0 0 0.8em; max-width: 38rem; }
.book__do { padding-bottom: 1.25rem; border-radius: 0 0 calc(var(--radius) - 0.5rem) calc(var(--radius) - 0.5rem); }
.book__num {
  float: right; margin: 0.3rem 0 0.4rem 0.8rem !important;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink-book);
  min-width: 2.6rem; padding: 0.2rem 0.5rem; text-align: center; border-radius: 999px; background: color-mix(in srgb, var(--tint) 55%, var(--paper-book));
}
.book__kind { font-family: var(--font-display); color: var(--ink-book-soft); margin: 0.6rem 0 0 !important; }
.book__title { color: var(--ink-book); font-size: var(--step-3); margin: 0.1rem 0 0.7rem; }

.notes { list-style: none; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.note { font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); padding: 0.15rem 0.7rem; border-radius: 999px; border: 2px solid; }
.note--hurt, .note--lose { border-color: #e7a3b3; background: #fdebef; color: #8a2440; }
.note--heal, .note--gain { border-color: #8fd9bb; background: #e6f8f0; color: #1d6b4c; }

.choices { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.5rem; }
.adv .choice {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  text-align: left; border-radius: 1.1rem; padding: 0.7rem 1rem; font-size: 1.02rem; line-height: 1.3;
}
.choice__to { flex: none; font-weight: 600; color: var(--ink-book-soft); }
.choice.primary .choice__to { color: #3a1636; }
.adv .choice:hover:not(:disabled) { border-color: var(--candyfloss-deep); }

.test, .fight { display: grid; gap: 0.6rem; padding: 0.9rem; border-radius: 1.1rem; background: color-mix(in srgb, var(--tint) 30%, var(--paper-book)); }
.test__what { margin: 0; }
.test__why { color: var(--ink-book-soft); font-size: var(--step--1); }
.test__dice { display: flex; align-items: center; gap: 0.8rem; min-height: 0; flex-wrap: wrap; }
.dice { display: inline-flex; gap: 0.4rem; }
.die svg { width: 2.6rem; height: 2.6rem; display: block; }
.die rect { fill: #fff; stroke: #4a2545; stroke-width: 3; }
.die circle { fill: #4a2545; }
.dice.rolling .die { animation: wobble 140ms infinite alternate; }
.dice.rolling .die + .die { animation-delay: 70ms; }
@keyframes wobble { from { transform: rotate(-14deg) translateY(-2px); } to { transform: rotate(12deg) translateY(2px); } }
.verdict { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
.verdict.good, .line.good { color: #1d6b4c; }
.verdict.bad, .line.bad { color: #a8264a; }
.roll-btn { justify-self: start; font-size: 1.1rem; padding: 0.7rem 1.4rem; }
.test__out, .fight__do { display: grid; gap: 0.5rem; justify-items: start; }
.test__out .choice, .fight__do .choice { width: auto; min-width: 14rem; }
.hint { margin: 0; font-size: var(--step--1); color: var(--ink-book-soft); }

.foes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; }
.foe { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0.6rem; border-radius: 1rem; background: var(--paper-book); border: 2px solid #f3d6e6; }
.foe.target { border-color: var(--candyfloss-deep); }
.foe.down { opacity: 0.45; }
.foe__art svg { width: 3.6rem; height: 3.6rem; display: block; }
.foe__about { display: grid; gap: 0.05rem; font-size: var(--step--1); min-width: 0; flex: 1; }
.foe__about b { font-family: var(--font-display); font-size: 1rem; }
.you { margin: 0; font-size: var(--step--1); font-family: var(--font-display); }
.round { display: grid; gap: 0.2rem; }
.round__n { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-book-soft); }
.line { margin: 0; font-size: 0.98rem; }
.line__sums { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-book-soft); }

.bar { display: block; height: 0.55rem; border-radius: 999px; background: #f3d6e6; overflow: hidden; }
.bar span { display: block; height: 100%; background: #e2558f; border-radius: inherit; transition: width 300ms; }
.bar.low span { background: #c43a4f; }
.bar.foe-bar span { background: #8e7bc0; }

.end { display: grid; gap: 0.8rem; }
.end p { margin: 0; }

/* The adventure sheet. */
.sheet { padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--paper); border: 2px solid var(--rule); box-shadow: var(--shadow); }
.sheet summary { display: flex; justify-content: space-between; gap: 1rem; list-style: none; }
.sheet summary::-webkit-details-marker { display: none; }
.sheet summary::after { content: '▾'; color: var(--ink-soft); }
.sheet[open] summary::after { content: '▴'; }
.sheet__peek { margin-left: auto; color: var(--candyfloss-deep); }
.sheet[open] .sheet__peek { display: none; }
.sheet__body { display: grid; gap: 0.7rem; margin-top: 0.7rem; }
.stam { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.5rem; align-items: baseline; }
.stam__label { font-family: var(--font-display); font-weight: 600; }
.stam strong { font-family: var(--font-display); font-size: var(--step-2); }
.stam small { font-size: var(--step-0); color: var(--ink-soft); }
.stam .bar { grid-column: 1 / -1; height: 0.7rem; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; margin: 0; }
.stats dt { font-family: var(--font-display); }
.stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; text-align: right; }
.stats small { color: #1f8a62; }
@media (prefers-color-scheme: dark) { .stats small { color: #6fd6a8; } }
.meals { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-family: var(--font-display); }
.sheet h3 { font-size: 1rem; margin-top: 0.3rem; }
.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: var(--step--1); line-height: 1.4; }
.items b { font-family: var(--font-display); }
.items span { color: var(--ink-soft); }
.items button { margin-top: 0.25rem; display: block; }
.none { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.sheet__foot { margin: 0.3rem 0 0; }

/* A book that paints its own pictures as pixel art (The Clockwork Comet): hard pixels, with a soft glow screened over them. */
.adv-tools { display: flex; align-items: center; gap: 0.6rem; }
.adv .adv-sound { font-size: var(--step--1); padding: 0.3rem 0.8rem; }
.pixel-art { position: relative; background: #1a1838; }
.pixel-art canvas.pixels, .pixel-art svg { display: block; width: 100%; height: auto; image-rendering: pixelated; aspect-ratio: 4 / 3; }
.book__art.pixel-art canvas.pixels, .book__art.pixel-art svg { max-height: min(58vh, 30rem); object-fit: contain; }
.pixel-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; backdrop-filter: blur(5px) brightness(1.1); mix-blend-mode: screen; opacity: 0.32; }
.cover__art.pixel-art { display: grid; } .cover__art.pixel-art canvas.pixels, .cover__art.pixel-art svg { height: 100%; object-fit: cover; }