@import url('/lib/cards.css');
@import url('/lib/audio/sound.css');
@import url('/library/drinks.css');

/* Poems (poems.js): the card deck with a picture above and below each poem. */
.poems { --tint: var(--lilac); --on-tint: #261a4a; }
.poems .bar { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.poems .bar .crumb { grid-column: 1; }
.poems .bar h1 { grid-column: 1; }
.poems .drinks-spot { grid-column: 2; grid-row: 1 / span 2; }

.poem-tools { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; }
.find input[type='search'] { flex: 1 1 12rem; max-width: 100%; font: inherit; color: var(--ink); padding: 0.35rem 0.8rem; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); }
.search { position: relative; }
.search-results {
  list-style: none; margin: 0.4rem 0 0; padding: 0.35rem; display: grid; gap: 0.15rem;
  background: var(--paper); border: 2px solid var(--rule); border-radius: 1rem; box-shadow: var(--shadow);
}
.search-results button {
  display: block; width: 100%; text-align: left; padding: 0.45rem 0.7rem; border: 0; border-radius: 0.7rem;
  background: transparent; box-shadow: none; font: inherit; font-size: var(--step--1); color: var(--ink);
}
.search-results button:hover, .search-results button:focus-visible { background: color-mix(in srgb, var(--lilac) 25%, var(--paper)); }
.search-results b { font-family: var(--font-display); font-weight: 600; }
.search-results span { color: var(--ink-soft); }
.search-results .none { padding: 0.45rem 0.7rem; font-size: var(--step--1); color: var(--ink-soft); }
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--ink-soft); }
.find select { flex: 1 1 12rem; max-width: 100%; font: inherit; color: var(--ink); padding: 0.35rem 0.6rem; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); }
.switches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.switches > button { padding: 0.3rem 0.85rem; font-size: 0.9rem; }
.switches > button[aria-pressed='true'] { background: var(--tint); border-color: var(--tint); color: var(--on-tint); }
.switches .volume[hidden] { display: none; }

/* The card: a cream page in both themes, plum ink. */
.poems .card {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; cursor: default;
  white-space: normal;
  background: #fffaf2; color: #4a2545;
  border-color: color-mix(in srgb, var(--lilac) 60%, #fffaf2);
}
.poems .card:hover { transform: rotate(var(--tilt, 0deg)); }

.pic { position: relative; width: 100%; aspect-ratio: 160 / 72; overflow: hidden; }
.pic.bottom { aspect-ratio: 160 / 40; transition: opacity 1.6s ease; }
.pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* The diffused look: a blurred copy laid over the pixels. */
.pic canvas.glow { filter: blur(5px) saturate(1.2); opacity: 0.45; mix-blend-mode: screen; transform: scale(1.04); }
.pic.top { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.pic.bottom { -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }

.words { flex: 1; display: grid; justify-items: center; align-content: center; gap: 0.6rem; padding: 0.75rem 1.5rem 1.25rem; text-align: center; }
.poems .title { margin: 0; font: 600 var(--step-2)/1.2 var(--font-display); color: #6a3a72; }
.poems .poem { margin: 0; display: grid; gap: 0.15rem; font: 500 var(--step-1)/1.55 var(--font-body); }
.poems .poem .gap { height: 0.8rem; }

.waiting { opacity: 0; }
.ch { opacity: 0; transition: opacity 0.5s ease; }
.ch.on { opacity: 1; }

/* Share, and the shared poem's cover. */
.poems .rate { flex-wrap: wrap; }
.share-btn .icon { font-size: 1.05em; line-height: 1; }
.share-note { margin: -0.4rem 0 0; min-height: 1.3em; font-size: var(--step--1); color: var(--ink-soft); text-align: center; overflow-wrap: anywhere; }
.poems .card { position: relative; }
.seal {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 0.6rem; padding: 2rem;
  text-align: center; background: #fffaf2; color: #4a2545;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.seal.opening { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.seal__wax {
  display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3a6c3, #c2337f 70%); color: #fff4e2;
  font-size: 1.8rem; box-shadow: 0 4px 12px -4px rgb(194 51 127 / 0.6);
}
.seal__title { margin: 0.4rem 0 0; font: 600 var(--step-2)/1.2 var(--font-display); color: #6a3a72; }
.seal__note { margin: 0 0 0.6rem; color: #7a5a76; }

/* Full screen: the card fills the screen; the rest of the page hides. */
.full-bar { display: none; }
html.poem-full { overflow: hidden; }
.poems.full .card {
  position: fixed; inset: 0; z-index: 50;
  min-height: 0 !important; height: 100dvh; width: 100vw;
  border: 0; border-radius: 0; box-shadow: none; transform: none;
  justify-content: center; align-items: center;
  background: radial-gradient(ellipse at 50% 40%, #fffaf2 55%, #f6ead9);
}
.poems.full .card:hover { transform: none; }
.poems.full .pic { width: min(100%, 44rem, calc(30dvh * 160 / 72)); flex: none; }
.poems.full .pic.bottom { width: min(100%, 44rem, calc(16dvh * 160 / 40)); margin-bottom: calc(5.5rem + var(--edge-y)); }
/* Soft sides too, so the pictures melt into the page. */
.poems.full .pic.top {
  -webkit-mask-image: linear-gradient(#000 75%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 75%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.poems.full .pic.bottom {
  -webkit-mask-image: linear-gradient(transparent, #000 30%), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 30%), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.poems.full .words { flex: none; max-width: 44rem; padding: 1rem 1.5rem; }
.poems.full .title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.poems.full .poem { font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem); }
.poems.full .seal { position: fixed; z-index: 51; }

.poems.full .full-bar {
  display: block; position: fixed; inset: auto 0 0 0; z-index: 60;
  padding: 0.5rem 0.5rem calc(var(--edge-y) + env(safe-area-inset-bottom));
  pointer-events: none;
}
.full-bar .ghost {
  pointer-events: auto;
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
  opacity: 0.75; box-shadow: none;
  /* A thin grey outline round the white shape, from four hairline shadows. */
  --edge: rgb(120 112 120 / 0.75);
  filter: drop-shadow(0.7px 0 0 var(--edge)) drop-shadow(-0.7px 0 0 var(--edge)) drop-shadow(0 0.7px 0 var(--edge)) drop-shadow(0 -0.7px 0 var(--edge));
  transition: opacity 0.3s ease;
}
.full-bar .ghost:hover, .full-bar .ghost:focus-visible { opacity: 0.95; background: transparent; }
.full-bar .ghost:focus-visible { outline: 2px solid rgb(255 255 255 / 0.8); outline-offset: 1px; }
.full-bar .ghost[data-rate][aria-pressed='true'] { opacity: 0.95; color: #f3a6c3; }
.full-bar__row { display: flex; justify-content: space-between; align-items: center; }
.full-bar__mid, .full-bar__side { display: flex; gap: 0.5rem; }
.full-bar .close-full { position: fixed; top: calc(var(--edge-y) + env(safe-area-inset-top)); right: 0.6rem; }
.full-note { margin: 0.2rem 0 0; min-height: 1.2em; text-align: center; font-size: var(--step--1); color: #8a6a86; overflow-wrap: anywhere; pointer-events: auto; }

/* Dark: a night card (the "Dark" switch; full screen is dark unless turned off). */
.poems.dark .card { background: #1e1834; color: #efe4f0; border-color: #3b2f5c; }
.poems.dark .title, .poems.dark .seal__title { color: #d8bdf3; }
.poems.dark .pic canvas:not(.glow) { filter: brightness(0.85); }
.poems.dark .seal { background: #1e1834; color: #efe4f0; }
.poems.dark .seal__note { color: #bba6c8; }
.poems.full.dark .card { background: radial-gradient(ellipse at 50% 40%, #211a3a 50%, #110d20); }
.poems.dark .full-note { color: #bba6c8; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 30rem) {
  .words { padding-inline: 1rem; }
  .poems .poem { font-size: 1.12rem; }
  .full-bar .ghost { width: 3.6rem; height: 3.6rem; }
  .full-bar__mid, .full-bar__side { gap: 0; }
}
@media (max-width: 25rem) {
  .full-bar .ghost { width: 3rem; height: 3rem; } /* seven fit on a small phone */
}
@media (prefers-reduced-motion: reduce) {
  .ch, .pic.bottom, .seal, .full-bar .ghost { transition: none; }
}