/* Audio page behind a QR code: one page, one picture, one big button */

.player-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.player-top { display: flex; justify-content: center; padding: 34px 16px 0; }
.player-top a { display: inline-flex; text-decoration: none; }
/* the worm carries the name itself */
.player-top img { width: 124px; }

.player { width: 100%; max-width: 460px; margin: 0 auto; padding: 8px 16px 32px; flex: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
/* the whole player fits on one phone screen */
.player-art { width: 100%; max-width: min(340px, calc((100svh - 390px) * .72)); background: #fff; padding: 12px; border: 1px solid #cfc4ae; border-radius: 2px; }
.player-art img { width: 100%; height: auto; }
/* A slider of pages instead of a single picture (Thumbelina): sized so the player still fits one screen */
.player .carousel.player-pages { --w: min(215px, calc((100svh - 430px) * .7)); width: 100%; margin: 4px 0 0; }
.player-pages .carousel-stage { overflow-x: clip; }
.player-pages .carousel-dots { margin-top: 12px; }
.player-pages .slide { border-color: #cfc4ae; box-shadow: 0 3px 10px rgba(43, 39, 35, .1); }
/* neighbours show only their white margins, so they stay opaque and slightly tinted to read as sheets */
.player-pages .slide.is-side { opacity: 1 !important; filter: brightness(.9); }
.player-meta { margin: 16px 0 2px; font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; }
.player h1 { font-size: 32px; margin: 0 0 14px; }

/* Controls */
.controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
.ctrl { border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ctrl svg { display: block; }
.ctrl.skip { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.ctrl.skip:active { background: var(--paper-2); }
.ctrl.play { width: 84px; height: 84px; border-radius: 50%; background: var(--gold); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(175, 139, 50, .35); transition: transform .15s; }
.ctrl.play:active { transform: scale(.95); }
.ctrl.play .i-pause { display: none; }
.is-playing .ctrl.play .i-play { display: none; }
.is-playing .ctrl.play .i-pause { display: block; }
.is-loading .ctrl.play { opacity: .7; }

.seek { width: 100%; margin-top: 18px; }
.seek input { width: 100%; margin: 0; height: 28px; background: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  --p: 0%; }
.seek input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) var(--p), var(--line) var(--p)); }
.seek input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.seek input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--gold); }
.seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--gold); border: 0; }
.seek input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 0; }
.times { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 2px; }

.player-hint { margin: 18px 0 0; font: italic 400 19px/1.45 var(--serif); color: var(--ink-soft); max-width: 340px; }
.player-credit { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); max-width: 340px; }
.player-credit a { color: var(--ink-soft); }
.player-foot { text-align: center; font-size: 13px; color: var(--ink-soft); padding: 0 16px 24px; }
.player-foot a { color: var(--ink-soft); margin: 0 8px; }