/* =============================================================
   Folded Studio - "mixtape" style
   A homemade mixtape on a desk: a cassette in a clear case, a
   paper label and a folded J-card, all written in blue ballpoint.
   Flat colors only. No gloss, no gradients.
   ============================================================= */

:root {
  --desk: #E9E6E0;      /* the surface behind everything */
  --shell: #2E2E30;     /* matte cassette shell */
  --paper: #F6F1E4;     /* label, J-card and liner-notes paper */
  --ink: #2B4C7E;       /* blue ballpoint, for all handwriting */
  --stripe: #C8553D;    /* the one stripe on the label (only accent) */
  --tape: #EFE6CF;      /* masking tape, used at 70% */
  --sticky: #FBEFA8;    /* sticky notes */

  --hand: "Gochi Hand", cursive;
  --hand-size: 27px;    /* handwriting, at least 26px on phone */
  --shadow: 0 1px 2px rgba(50, 40, 30, 0.22); /* small, hard, like paper on a table */
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  background: var(--desk);
  color: var(--ink);
}

body {
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* Stop long-press from selecting text or opening menus on phones. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  height: 100vh;
  height: 100dvh; /* phones: the real visible height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- The stage ----------
   Fills the phone screen. On desktop it is a phone-sized area in
   the middle of the same desk (no frame around it). */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden; /* shown after the case opens */
}
.stage.is-open { visibility: visible; }

@media (min-width: 520px) {
  .stage {
    width: 390px;
    height: min(844px, 100% - 48px);
  }
}

/* One scene per slide; only the current one is shown. */
.sheet {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.sheet.is-current { visibility: visible; }

.hand {
  font-family: var(--hand);
  font-size: var(--hand-size);
  line-height: 1.22;
  margin: 0;
  overflow-wrap: break-word;
}

.count { font-variant-numeric: tabular-nums; }

/* ---------- Progress bars (top) ---------- */
.progress {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  gap: 3px;
  pointer-events: none;
}
.progress span {
  flex: 1;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
}

/* ---------- The cassette ----------
   Drawn by app.js as one SVG (see SHAPES there). The writing on
   the label sits on top as normal text. Sizes are in em, and the
   cassette's font-size is a tenth of its width, so the writing
   grows and shrinks with the cassette. */
.cassette {
  position: absolute;
  filter: drop-shadow(0 1px 1.5px rgba(40, 30, 20, 0.3));
}
.cassette svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c-shell { fill: var(--shell); }
.c-label { fill: var(--paper); }
.c-stripe { fill: var(--stripe); }
.c-rule { stroke: #D3CBB8; stroke-width: 0.9; fill: none; }
.c-window { fill: #4B4B4F; }
.c-pack { fill: #3A302A; }   /* the brown tape wound on each reel */
.c-hub { fill: var(--paper); }
.c-hole { fill: var(--shell); }
.c-head { fill: #3A3A3D; }
.c-screw { fill: #48484C; }
.c-slot { stroke: var(--shell); stroke-width: 0.9; }

/* The two reels turn slowly only while the song is playing. */
.reel {
  transform-box: fill-box;
  transform-origin: center;
  animation: reel-spin 3.6s linear infinite;
  animation-play-state: paused;
}
.stage.is-playing:not(.is-held) .reel { animation-play-state: running; }
@keyframes reel-spin { to { transform: rotate(-360deg); } }

/* Writing on the label. */
.label-line,
.label-corner {
  position: absolute;
  margin: 0;
  font-family: var(--hand);
  line-height: 1;
  white-space: nowrap;
}
.label-line {
  left: 9.5%;
  right: 8.5%;
  top: 9%;
  height: 20.4%;
  display: flex;
  align-items: flex-end;
  font-size: 1.12em;
  transform: rotate(-0.8deg);
}
.label-corner {
  left: 6.4%;
  width: 26.5%;
  top: 37%;
  text-align: center;
  font-size: max(26px, 0.78em);
  transform: rotate(-4deg);
}

/* ---------- Paper things on the desk ---------- */

/* A torn scrap of paper (bottom edge torn by hand). The outer box
   holds the shadow and the tape; the inner paper is cut to shape. */
.scrap {
  position: absolute;
  filter: drop-shadow(0 1px 1.5px rgba(50, 40, 30, 0.25));
}
.scrap-paper {
  background: var(--paper);
  padding: 14px 18px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 96% 93%, 91% 89%, 85% 95%, 78% 90%, 71% 96%,
    63% 91%, 55% 97%, 48% 92%, 40% 96%, 33% 90%, 25% 95%, 18% 90%, 10% 96%, 4% 91%, 0 95%);
}

/* Masking tape: a see-through strip with uneven torn ends. */
.mtape {
  position: absolute;
  z-index: 2;
  width: 84px;
  height: 24px;
  background: var(--tape);
  opacity: 0.7;
  mix-blend-mode: multiply;
  clip-path: polygon(2% 4%, 98% 0, 100% 28%, 97% 52%, 100% 78%, 98% 100%, 3% 96%, 0 72%, 3% 46%, 0 22%);
}

/* A printed photo with a thin white border. */
.print {
  position: relative;
  background: #fff;
  padding: 6px;
  box-shadow: var(--shadow);
}
.print img { display: block; object-fit: cover; }

/* The J-card / liner-notes paper. The paper itself (.panel-paper)
   is cut a little unevenly, like scissors; app.js gives every panel
   its own cut. The shadow follows the cut. */
.panel {
  position: absolute;
  top: 70px;
  left: 16px;
  right: 16px;
  bottom: 96px;
  filter: drop-shadow(0 1px 1.5px rgba(50, 40, 30, 0.25));
}
.panel-paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
}
.panel .writing {
  position: absolute;
  top: 26px;
  left: 22px;
  right: 20px;
  display: flow-root; /* so the height we measure includes margins */
}

/* --- Track (memory card) panel --- */
.panel.track {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 12px 22px;
  isolation: isolate; /* keeps .panel-paper behind the writing */
}
.panel { isolation: isolate; }
.track-line {
  font-size: 31px;
  line-height: 1.1;
}
.track-no {
  font-size: 26px;
  margin-right: 0.3em;
}
.photo-area {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 10px;
}
.track-date {
  font-size: 26px;
  align-self: flex-end;
  margin-top: auto !important; /* the date always sits at the bottom */
  transform: rotate(-2.5deg);
  margin-top: 4px;
}

/* --- Side B (reasons) --- */
.sideb-heading {
  font-size: 32px;
  margin-bottom: 14px;
}
.reason {
  display: grid;
  grid-template-columns: 1.3em 1fr;
  margin-bottom: 8px;
}

/* Short phones: a little less space between reasons, so a normal
   list still fits on one panel. */
@media (max-height: 760px) {
  .sideb-heading { margin-bottom: 8px; }
  .reason { margin-bottom: 2px; line-height: 1.16; }
}

/* --- Liner notes (letter) --- */
.panel.liner .writing { top: 30px; }
.crease {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(46, 46, 48, 0.09);
}
.letter-greeting { font-size: 31px; margin-bottom: 10px; }
.letter-p {
  font-size: 26px;
  line-height: 1.3;
  text-indent: 1.2em;
  margin-bottom: 12px;
}
.letter-p.cont { text-indent: 0; } /* a paragraph continued from the last page */
.sign-off {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  text-align: right;
  white-space: pre-line;
  padding-right: 6px;
  margin-top: 6px;
}

/* The lipstick kiss beside the sign-off: pressed on a little crooked. */
.kiss {
  width: 58px;
  height: 35px;
  flex: none;
  opacity: 0.8;
  transform: rotate(-11deg) translateY(4px);
}
.kiss-lip { fill: #C4566B; }
.kiss-lines {
  fill: none;
  stroke: var(--paper);  /* the gaps where the lip lines are */
  stroke-width: 0.9;
  stroke-linecap: round;
  opacity: 0.75;
}

/* --- Share card --- */
.stat { margin-bottom: 6px; }
.stat-value { font-size: 40px; line-height: 1; margin-right: 0.15em; }
.share-area {
  position: absolute;
  left: 34px;
  right: 34px;
  font-size: 14px;
  line-height: 20px;
}
.share-note {
  margin: 14px 0 0;
  max-width: 270px;
}
.share-note[hidden] { display: none; }

/* ---------- Paper-sticker buttons (mute, share) ---------- */
.sticker {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: 2px 4px 2px 3px;
  box-shadow: 0 1px 1.5px rgba(40, 30, 20, 0.32);
  padding: 9px 14px;
  min-height: 36px;
  cursor: pointer;
  transform: rotate(-2deg);
}
.sticker:active { transform: rotate(-2deg) scale(0.96); }
.sticker:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }

.mute {
  position: absolute;
  top: 24px;
  left: 10px;
  z-index: 6;
  padding: 6px 11px;
  min-height: 32px;
}

/* ---------- Heart doodle with the initials, on the label ----------
   Drawn with one pen stroke (see HEART_PATH in core.js), in the
   empty right corner of the label, opposite "side A". */
.label-heart {
  position: absolute;
  left: 74.8%;
  top: 34.8%;
  width: 11.4%;
  height: 16.4%;
  color: var(--ink);
  transform: rotate(6deg);
}
.heart-doodle svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.heart-initials {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  text-align: center;
  font-family: var(--hand);
  font-size: 0.4em;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Small watermark ---------- */
.watermark {
  position: absolute;
  bottom: 16px;
  right: 18px;
  z-index: 4;
  font-size: 14px;
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- Start screen: the closed case on the desk ---------- */
.start {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--desk);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}

.case {
  position: relative;
  /* width and height are set by app.js */
  transform: rotate(-3deg);
  perspective: 900px;
}
.case-tray,
.case-lid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.case-tray path {
  fill: #DCD8D0;  /* clear plastic on the desk: just a bit darker */
  stroke: rgba(46, 46, 48, 0.35);
  stroke-width: 1.2;
}
.case-cassette .cassette { filter: none; }
.case-lid {
  transform-origin: 50% 0;   /* hinged along the top edge */
}
.lid-edge {
  fill: rgba(255, 255, 255, 0.22);  /* flat, barely there: clear plastic */
  stroke: rgba(46, 46, 48, 0.5);
  stroke-width: 1.4;
}
.lid-rim {
  fill: none;
  stroke: rgba(46, 46, 48, 0.22);
  stroke-width: 1;
}
.lid-hinge {
  fill: rgba(46, 46, 48, 0.18);
  stroke: rgba(46, 46, 48, 0.4);
  stroke-width: 0.8;
}

.press-play {
  position: absolute;
  margin: 0;
  width: 104px;
  padding: 12px 10px 14px 14px;
  background: var(--sticky);
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1;
  transform: rotate(5deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  /* left and top are set by app.js, next to the case */
}

/* The cassette sliding out, only during the opening. */
.slide-out {
  position: fixed;
  z-index: 20;
  pointer-events: none;
}

/* People who asked for less motion: no spinning reels. */
@media (prefers-reduced-motion: reduce) {
  .reel { animation: none; }
}