/* Consequences: the game's own look on the kit's playbill.css (linked before
   this file): its color, its sign, the sheet folded like an accordion. */

/* The game's color: bottle green instead of the kit's red, on paper and in
   the curtain. Red stays for what cannot be undone (the kit's --red). The
   app's color (theme-color, manifest.json) is the curtain's top */
:root {
  --accent: #1d4f3a;
  --accent-tint: #d6f0e5;
  --curtain-top: #1b4a36;
  --curtain-bottom: #102e21;
}

/* The sign: the h1 of the landing page and the room, a picture on 404. Its
   name is filled in the markup with the same color as --accent */
.brand {
  margin: 0 0 10px;
}

.brand-sign {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}

/* Smaller in the room: the sheet should fit the first screen of a phone */
.brand--room .brand-sign {
  max-width: 300px;
}

@media (min-width: 768px) {
  .brand--room .brand-sign {
    max-width: 360px;
  }
}

/* Font sizes inside the SVG are viewBox units: the sign scales as a whole.
   Oswald (the kit's fonts) draws the name and the two small lines */
.brand-sign__name,
.brand-sign__small {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
}

/* ===== The round ===== */

/* The sheet's paper and its pleats: lighter than the kit's cards, so the
   sheet lies on the card like a sheet on a table */
:root {
  --sheet-paper: #fbf5e6;
  --fold-light: #f3e8cd;
  --fold-dark: #dccaa1;
  /* How far a pleat's edge breaks, to the side, at each crease */
  --fold-shift: 7px;
}

/* The step: "Step 4 of 8" and eight marks, the one being answered in the
   game's color */
.step-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.step-marks {
  display: flex;
  gap: 5px;
}

.step-marks i {
  display: block;
  width: 18px;
  height: 6px;
  border: 1px solid var(--ink-soft);
  border-radius: 1px;
  background: var(--paper-light);
}

.step-marks i.done {
  border-color: var(--ink);
  background: var(--ink);
}

.step-marks i.now {
  border-color: var(--accent);
  background: var(--accent);
}

/* The sheet: the answered questions folded under, a pleat each, and the
   open part with the question */
.sheet {
  position: relative;
  max-width: 560px;
  margin: 4px auto 6px;
  background: var(--sheet-paper);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(42, 29, 23, .28), 0 1px 0 rgba(255, 255, 255, .6) inset;
}

.sheet__open {
  padding: 18px 20px 20px;
}

/* The sheet with pleats: their edges are cut (clip-path), and a cut would
   show the sheet's own rectangle behind them, so the paper is the open
   part's, and the shadow follows the cut (a box-shadow would not). The
   pleats' zigzag leaves the open part a step narrower; with no pleats yet
   it takes the whole width */
.sheet--pleated {
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(42, 29, 23, .32));
}

.sheet--pleated .sheet__open {
  margin-right: var(--fold-shift);
  background: var(--sheet-paper);
}

#folds:empty + .sheet__open {
  margin-right: 0;
}

.sheet__number {
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sheet__question {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

/* The answer's field grows with its text (game-room.js sets its height) */
.sheet textarea {
  min-height: 96px;
  resize: none;
  overflow: hidden;
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  background: #fffdf6;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 1.15rem;
}

/* Under the field: the keys on the left, the count on the right */
.sheet__under {
  display: flex;
  gap: 12px;
  margin: 4px 0 12px;
  color: var(--ink-soft);
  font-size: .85rem;
}

/* Only for a computer's keyboard: a phone's has no Shift + Enter, and its
   Enter starts a new line */
.sheet__keys {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .sheet__keys {
    display: inline;
  }
}

/* The send button. On a computer it is the main button under the field. On
   a phone - a touch screen, no mouse - the keyboard covers what is under the
   field: a square at the field's right, level with its bottom, as messengers
   have it, in the game's color with a paper plane; its label stays for a
   screen reader */
.answer-send__plane {
  display: none;
}

.answer-send__wing {
  fill: currentColor;
}

.answer-send__fold {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}

@media not all and (hover: hover) and (pointer: fine) {
  #answerForm {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
  }

  #answerForm > * {
    grid-column: 1 / -1;
  }

  #answerForm > .sheet__number {
    grid-row: 1;
  }

  #answerForm > .sheet__question {
    grid-row: 2;
  }

  #answerForm > #answerText {
    grid-column: 1;
    grid-row: 3;
  }

  #answerForm > .answer-send {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
  }

  #answerForm > .sheet__under {
    grid-row: 4;
  }

  #saveAndPass {
    --bs-btn-color: var(--paper-light);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-active-color: var(--paper-light);
    --bs-btn-active-bg: var(--curtain-bottom);
    --bs-btn-active-border-color: var(--curtain-bottom);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
  }

  .answer-send__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .answer-send__plane {
    display: block;
    width: 26px;
    height: 26px;
  }
}

.sheet__count {
  margin-left: auto;
}

.sheet__count--over {
  color: var(--ink);
  font-weight: 700;
}

/* The player's own answer while they wait: a small label and the text */
.sent-block {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(42, 29, 23, .25);
}

.sent-block__label {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sent-block__text {
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.sheet__hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.fold {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 20px;
  border-bottom: 1px solid rgba(42, 29, 23, .25);
  color: rgba(42, 29, 23, .7);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Both edges break the same way, as paper folded back and forth. Counted
   from the last pleat, so that it always ends level with the open part */
.fold:nth-last-child(odd) {
  clip-path: polygon(var(--fold-shift) 0, 100% 0, calc(100% - var(--fold-shift)) 100%, 0 100%);
  background: linear-gradient(to bottom, var(--fold-dark) 0%, var(--fold-light) 65%);
}

.fold:nth-last-child(even) {
  clip-path: polygon(0 0, calc(100% - var(--fold-shift)) 0, 100% 100%, var(--fold-shift) 100%);
  background: linear-gradient(to bottom, var(--fold-light) 35%, var(--fold-dark) 100%);
}

/* A title that takes two lines splits them evenly, so a star never stays
   alone on the second («★ Историю / рассказывают ★») */
.sheet-title {
  text-wrap: balance;
}

/* The table: who writes or reads, who is away, who is done */
.seat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.seat-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(42, 29, 23, .18);
}

.seat-list li:last-child {
  border-bottom: 0;
}

.seat-avatar {
  width: 36px;
  font-size: 1.6rem;
  text-align: center;
}

.seat-avatar img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  vertical-align: middle;
}

.seat-name {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.seat-status {
  flex: 1 1 auto;
  color: var(--ink-soft);
}

.seat-status > span + span::before {
  content: ' · ';
  color: var(--ink-soft);
}

/* Done in ink with a tick, never in green: the game's color is green, and
   "away" is drawn in it */
.seat-status .done {
  color: var(--ink);
}

.seat-status .away {
  color: var(--accent);
  font-weight: 600;
}

.seat-list .btn {
  margin-left: auto;
}

.waiting-newcomers {
  color: var(--ink-soft);
}

/* The reading: the player's sheet and the ones they read for the absent */
.reading-sheet + .reading-sheet {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(42, 29, 23, .35);
}

.reading-sheet__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
}

.lead-on-sheet {
  margin: 0 0 14px;
}

/* A closed sheet: a sealed envelope, a button. The flap is two diagonal
   lines drawn by gradients */
.closed-sheet {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 6px auto 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.envelope {
  /* How far down the seal is, and the flap's point under it. The point is
     hidden by the wax and the eye carries the lines on to a meeting above
     it: 8px lower is what looks centered (the owner's pick by eye) */
  --seal-center: 60%;
  --flap-point: calc(var(--seal-center) + 8px);
  position: relative;
  display: block;
  width: min(100%, 300px);
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(42, 29, 23, .45);
  background:
    linear-gradient(to top right, transparent calc(50% - .75px), rgba(42, 29, 23, .45) 50%, transparent calc(50% + .75px)) left top / 50% var(--flap-point) no-repeat,
    linear-gradient(to top left, transparent calc(50% - .75px), rgba(42, 29, 23, .45) 50%, transparent calc(50% + .75px)) right top / 50% var(--flap-point) no-repeat,
    var(--sheet-paper);
  box-shadow: 0 3px 8px rgba(42, 29, 23, .3);
}

/* The wax seal. The shadow follows the wax's uneven edge */
.envelope__seal {
  position: absolute;
  left: 50%;
  top: var(--seal-center);
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  background: url('../img/seal.svg') center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.closed-sheet__label {
  display: block;
  margin-top: 10px;
  font-weight: 600;
}

.reading-sheet > .btn {
  display: block;
  margin: 0 auto;
}

.opened-count {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: center;
}

/* An open sheet: the story, its answers one under another with a line between */
.story {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.story li {
  padding: 8px 20px 10px;
  border-bottom: 1px dashed rgba(42, 29, 23, .3);
}

.story li:last-child {
  border-bottom: 0;
}

.story__answer {
  display: block;
  /* A line the author broke with Shift + Enter stays broken */
  white-space: pre-line;
  font-size: 1.2rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Every story: one column on a phone, two from a tablet */
.stories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 768px) {
  .stories {
    grid-template-columns: 1fr 1fr;
  }
}

.stories .sheet {
  max-width: none;
  margin: 0;
}

.stories .story li {
  padding-top: 5px;
  padding-bottom: 6px;
}

.stories .story__answer {
  font-size: 1.05rem;
}

.story-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(42, 29, 23, .25);
  font-weight: 600;
}

.story-head small {
  color: var(--ink-soft);
  font-weight: 400;
  text-align: right;
}

/* Sharing a story: a strip across the bottom of its sheet (the owner's pick
   from a page of variants) */
.story-share {
  display: block;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  border-top: 1px solid rgba(42, 29, 23, .25);
  background: none;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .story-share:hover {
    background: var(--accent-tint);
  }
}