/*
 * Tonight's card, and the sheets that sit over the board.
 *
 * Tonight's card is an ordinary page: text reflows and scrolls rather than
 * shrinking with the board. The sheets are part of the board, laid out in its
 * 390×844 design space, where only y 50–814 is guaranteed to be on screen.
 */

/* -------------------------------------------------------------- start --- */

/*
 * Sizes are written for a phone and multiplied by --s, which grows on a
 * tablet. On a phone the card scrolls if it has to, and the Start button stays
 * pinned to the bottom so it is never the thing that gets cut off.
 */
.screen-start {
  --s: 1;
  --gutter: 22px;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
}

.screen-start.is-active {
  display: block;
}

.start-inner {
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--s));
  min-height: 100%;
  max-width: calc(440px * var(--s) + 2 * var(--gutter));
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 24px)
    calc(env(safe-area-inset-right) + var(--gutter))
    0
    calc(env(safe-area-inset-left) + var(--gutter));
}

.start-head {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--s));
}

.eyebrow,
.label {
  margin: 0;
  font-size: calc(11px * var(--s, 1));
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* "Bedtime #12 · Wednesday, September 30" breaks at the dot, never mid-date. */
.eyebrow > span {
  white-space: nowrap;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(50px * var(--s));
  line-height: 1;
}

.start-vignette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 104;
  margin-top: calc(8px * var(--s));
}

.tonight {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--s));
  padding: calc(14px * var(--s)) calc(14px * var(--s)) calc(12px * var(--s));
  background: var(--cream);
  border-radius: 2px;
}

.tonight-head {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--s));
}

.tonight-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(19px * var(--s));
  line-height: 1.2;
}

.cast-list {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--s));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast-row {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--s));
}

.cast-portrait {
  flex: none;
  width: calc(30px * var(--s));
  height: calc(44px * var(--s));
}

.cast-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cast-name {
  font-size: calc(14px * var(--s));
  font-weight: 600;
}

.cast-blurb {
  font-size: calc(12px * var(--s));
  line-height: 1.3;
  color: var(--ink-soft);
}

.goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8px * var(--s));
}

.goal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: calc(8px * var(--s)) calc(10px * var(--s));
  border-radius: 2px;
  color: var(--cream);
}

.goal-bed { background: var(--teal-dark); }
.goal-mayhem { background: var(--tomato-dark); }

.goal-label {
  font-size: calc(10px * var(--s));
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.goal-n {
  font-family: var(--serif);
  font-size: calc(22px * var(--s));
  line-height: 1;
}

.how {
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--s));
  margin: 0;
  padding: 0 0 0 calc(18px * var(--s));
  font-size: calc(13px * var(--s));
  line-height: 1.35;
  color: var(--ink-soft);
}

/* The arrow keys only get a mention where there is likely a keyboard. */
.keys-hint {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .keys-hint {
    display: inline;
  }
}

.start-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 18px);
  background: var(--paper);
}

/* Whatever scrolls under the pinned button fades out rather than being cut. */
.start-actions::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
  background: linear-gradient(rgba(242, 231, 211, 0), var(--paper));
  pointer-events: none;
}

.start-actions .btn-primary {
  flex: 1;
  min-height: calc(52px * var(--s));
  font-size: calc(13px * var(--s));
}

.start-actions .btn-icon {
  width: calc(48px * var(--s));
  height: calc(48px * var(--s));
  border-radius: 50%;
}

.played {
  flex-basis: 100%;
  margin: 0;
  font-size: calc(13px * var(--s));
  line-height: 1.35;
}

/* An iPhone SE: room for "Play again (practice)" on one line. */
@media (max-width: 380px) {
  .start-actions .btn-primary {
    padding: 0 12px;
    letter-spacing: 1.6px;
  }
}

/*
 * A tablet. Bigger type, and the card sits in the middle of the screen with
 * the button straight after it rather than marooned at the bottom.
 */
@media (min-width: 700px) and (min-height: 600px) {
  .screen-start {
    --s: 1.25;
    --gutter: 40px;
  }

  .start-inner {
    justify-content: center;
    padding-bottom: 32px;
  }

  .start-actions {
    position: static;
    margin-top: 4px;
    padding: 0;
  }

  .start-actions::before {
    display: none;
  }
}

/*
 * Landscape — an iPad on its side, a laptop: two columns, so the whole card
 * fits without scrolling. The title, the picture and the button on the left;
 * who is out tonight on the right.
 */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .screen-start {
    --s: 1.15;
  }

  .start-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head    tonight"
      "how     tonight"
      "actions tonight";
    align-content: center;
    align-items: start;
    column-gap: 48px;
    row-gap: calc(18px * var(--s));
    max-width: 1040px;
    padding-bottom: 32px;
  }

  .start-head { grid-area: head; }
  .tonight { grid-area: tonight; align-self: center; }
  .how { grid-area: how; }
  .start-actions { grid-area: actions; }

  .wordmark {
    font-size: calc(62px * var(--s));
  }
}

/* -------------------------------------------------------------- sheets --- */

.sheet {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.sheet[hidden] {
  display: none;
}

.sheet-pause {
  display: grid;
  place-items: center;
  background: rgba(42, 38, 35, .55);
}

.sheet-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  padding: 22px 20px 16px;
  background: var(--paper);
  border-radius: 2px;
}

.sheet-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
}

/*
 * The end card leaves the top of the board in view: on a loss that is the
 * whole point — the lounge, wrecked, with every escaped cat in it.
 */
.sheet-end {
  background: linear-gradient(rgba(242, 231, 211, 0) 300px, rgba(42, 38, 35, .35) 300px);
}

.end-card {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 318px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px 18px;
  background: var(--paper);
  border-radius: 2px;
  text-align: center;
}

.end-banner {
  position: absolute;
  top: -26px;
  left: 6px;
  right: 6px;
  padding: 10px 0 11px;
  background: var(--tomato-dark);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .5px;
  transform: rotate(-3deg);
  display: none;
}

.sheet-end.is-lost .end-banner { display: block; }
.sheet-end.is-lost .end-stars { display: none; }
.sheet-end.is-lost .end-title { margin-top: 18px; }

.end-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
}

.end-stars {
  width: 132px;
  height: 40px;
}

.end-verdict {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

.end-stats {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 4px 0 0;
}

.end-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  background: var(--cream);
  border-radius: 2px;
}

.end-stats div[hidden] {
  display: none;
}

.end-stats dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.end-stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
}

.end-note {
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.end-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.end-next {
  margin: 0;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--ink-soft);
}