.screen {
  padding-bottom: calc(290px + env(safe-area-inset-bottom, 0px)); /* keep carousel/artwork content clear of the fixed controls overlay */
}

/* larger content panel than the wheel app — this variant has screen space to spare
   since there's no need to leave the whole surface free for an invisible wheel input.
   Scoped to portrait phones only; landscape/wider screens keep style.css's sizing. */
@media (orientation: portrait) {
  .carousel-item {
    max-width: 75vw;
  }
  /* leaves headroom below the image for the title, so image + title together fit
     inside the 75vw-square #podcasts-carousel without overflowing into the index label */
  .carousel-item > img {
    width: calc(75vw - 40px);
  }
  .episode-card {
    width: 75vw;
  }
  /* bigger thumb + larger type than the shared style.css defaults — this variant
     has the screen space to spare (see the comment at the top of this file) */
  img.episode-thumb {
    width: 54%;
  }
  .episode-title-inner {
    font-size: 17px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .episode-date {
    font-size: 14px;
  }
  .artwork-info-wrap {
    width: min(64vw, 260px); /* matches .progress-wrap's width so the two align */
    overflow: visible; /* let .info-overlay below be wider than the artwork square itself */
  }

  /* the about-episode text gets more width than the artwork square it sits over */
  .info-overlay {
    left: 50%;
    right: auto;
    width: min(92vw, 380px);
    transform: translateX(-50%);
  }

  /* size both carousels to the card itself instead of stretching to fill the
     screen, so the "x / N" counter sits right under the card instead of near
     the bottom of the available area — and so the podcasts and episodes panels
     end up the same footprint */
  #podcasts-carousel,
  #episodes-carousel {
    flex: 0 0 auto;
    width: 75vw;
    aspect-ratio: 1 / 1;
  }
  #podcasts-index,
  #episodes-index {
    margin-top: 10px;
  }
}

/* feint border around the podcast artwork and the episode panel, so they read as
   distinct panels against the black background rather than just floating imagery */
#podcasts-carousel .carousel-item > img {
  border: 1px solid rgba(245, 245, 247, 0.28);
}
.episode-card {
  border: 1px solid rgba(245, 245, 247, 0.28);
}

/* podcast title: single line, centered while it fits. Once JS (markTruncatedTitles)
   finds it's wider than the card, .truncated switches it to left-aligned with a
   fade at the cut-off edge instead of wrapping/ellipsis or a symmetric center-clip. */
#podcasts-carousel .carousel-item .title {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#podcasts-carousel .carousel-item .title.truncated {
  text-align: left;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
}

/* live finger-tracking during a panel swipe (see panelPointerMove/End in app.js) —
   while .dragging is set, the whole 3-item track shifts by --drag-x with no easing
   so it follows the finger 1:1; removing .dragging (on release) re-enables the
   transition so the swipe either continues into the next slide or eases back to rest */
.carousel.dragging .carousel-item {
  transition: none;
}
.carousel.dragging .carousel-item.pos-current {
  transform: translate(calc(-50% + var(--drag-x, 0px)), -50%) scale(1);
}
.carousel.dragging .carousel-item.pos-prev {
  transform: translate(calc(-50% - 92% + var(--drag-x, 0px)), -50%) scale(.72);
}
.carousel.dragging .carousel-item.pos-next {
  transform: translate(calc(-50% + 92% + var(--drag-x, 0px)), -50%) scale(.72);
}

/* off-screen start/end points for the sliding carousel transition (see stepCarousel
   in app.js) — an entering item starts here then transitions to pos-prev/pos-next,
   an exiting item transitions here before being removed */
.carousel-item.pos-prev-far {
  transform: translate(calc(-50% - 160%), -50%) scale(.6);
  opacity: 0;
  filter: blur(1px);
  z-index: 0;
}
.carousel-item.pos-next-far {
  transform: translate(calc(-50% + 160%), -50%) scale(.6);
  opacity: 0;
  filter: blur(1px);
  z-index: 0;
}

/* #controls is the *active touch area*, deliberately much bigger than the visible
   dial — full viewport width, taller, flush with the bottom edge — so the
   corner-background tap (see controlsBg* in app.js) is easy to hit without
   precision. .controls-visual is sized/positioned exactly as .controls used to be,
   so the ring/center/back appear in exactly the same place as before this change. */
.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 290px; /* matches .screen's reserved bottom clearance, so it doesn't reach into visible carousel/artwork content */
  z-index: 20;
  touch-action: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 10px);
}

.controls-visual {
  position: relative;
  flex: none;
  width: 220px;
  height: 220px;
}

.dial-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* clip-path (not just border-radius, which only affects painting) restricts this
     element's hit-area to the visible circle, so the square's corners fall through
     to #controls itself instead of being (invisibly) part of the ring's rotation gesture */
  clip-path: circle(50%);
  border: 2px solid var(--dim);
  background: transparent;
  touch-action: none;
  transition: background .1s ease, border-color .1s ease;
}

.dial-ring.pressed {
  background: rgba(138, 138, 144, 0.18);
  border-color: var(--fg);
}

.dial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(245, 245, 247, 0.06);
  border: 1px solid var(--dim); /* matches the outer ring; .playing (audio actually playing) turns it blue */
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
  transition: border-color .15s ease;
}

.dial-center.playing {
  border-color: var(--accent);
}

.dial-center:active {
  background: rgba(62, 166, 255, 0.18);
}

.dial-back {
  /* floats clear of the ring, out at the 10 o'clock position (300° clockwise from 12) */
  position: absolute;
  left: -29px;
  top: 30px;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(245, 245, 247, 0.06);
  border: 1px solid var(--dim);
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 18px;
  line-height: 1;
}

.dial-back:active {
  background: rgba(138, 138, 144, 0.25);
}

.dial-back.hidden {
  display: none;
}