/* The board: a drawing over the whole screen, on both screens at once.
 *
 * See public/board.js for what it is and src/board.mjs for the coordinate
 * decision. This file is only where it sits and what it looks like.
 *
 * ## The layer it lives on
 *
 * The room's ladder, which this has to fit into rather than sit on top of:
 * the cast is 38, the jump pill 39, the sheets 40, the basement 44, the peek
 * 45, the effects 55, the toasts 60 and the message menu 70.
 *
 * The ink is **41** — over the room, over the characters, under the basement.
 * Over the sheets too, which is deliberate: ink is over everything by
 * definition, and while a sheet is open the ink takes no presses, so the sheet
 * underneath still works exactly as it did.
 *
 * The toolbar is 42, and the board's own sheets are 43 so they are above their
 * own ink. Everything above 44 is left alone: the basement is a punishment that
 * covers the screen, and a drawing must not be able to stand in front of it.
 */

.board {
  position: fixed;
  inset: 0;
  z-index: 41;
  display: none;
  /* Watching takes no presses at all: the chat, the video and every button
     underneath keep working with the drawing over the top of them. Only the
     hit layer below turns this on, and only in draw mode. */
  pointer-events: none;
  overflow: hidden;
}

.board.on { display: block; }

.board-canvas,
.board-media,
.board-hit {
  position: absolute;
  inset: 0;
}

.board-img {
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

/* What takes the pointer while drawing.
   `touch-action: none` is the whole of "drawing works on a phone": without it
   the first movement of a finger is a scroll or a pinch and the browser takes
   the gesture away mid-stroke. */
body.board-draw .board-hit {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}

body.board-draw .board-hit.erasing { cursor: cell; }

/* While the picker is up for the board, the tools get out of the way: on a
   phone that sheet stands exactly where this bar does. */
body.board-picking .board-bar,
body.board-picking .board-pip { display: none; }

/* ---------------------------------------------------------- the frame
 *
 * How far the other person's window reaches. One of them is on a tall phone
 * and the other on a wide iPad, so a corner of one screen is off the other —
 * this is that fact, drawn, instead of "why can't you see it". */

.board-frame {
  position: absolute;
  display: none;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.board-frame.on { display: block; }

.board-frame-tag {
  position: absolute;
  top: -11px;
  left: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(43, 29, 37, 0.8);
  color: #ffe4ef;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* ------------------------------------------------------ the selection */

.board-sel {
  position: absolute;
  display: none;
  border: 2px dashed var(--pink);
  border-radius: 8px;
  pointer-events: none;
}

.board-sel.on { display: block; }

/* The two handles are the only part of the layer that takes a press outside
   the hit surface, and they need a target a thumb can find: 34px of button
   around a 15px glyph, hanging outside the frame so they never cover the
   middle of what is being moved. */
.board-handle {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pink-deep);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  touch-action: none;
}

.board-del { top: -17px; left: -17px; }
.board-size { bottom: -17px; right: -17px; cursor: nwse-resize; }

/* ---------------------------------------------------------- the pencil
 *
 * The way back in when the ink is on screen but the tools are not. Only ever
 * on while watching, and out of the way of everything a thumb reaches for: it
 * rides the right edge above the composer rather than sitting in the corner
 * where the send button and the jump pill already are. */

.board-pip {
  position: fixed;
  right: 10px;
  bottom: 30vh;
  z-index: 42;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: none;
  place-content: center;
  font-size: 19px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(217, 64, 122, 0.28);
}

.board-pip.on { display: grid; }

/* --------------------------------------------------------- the toolbar */

.board-bar {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 42;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(43, 29, 37, 0.35);
  /* It wraps rather than scrolls, so nothing is ever off the end of a bar
     nobody thought to drag. A ceiling in case it ever grows past a phone. */
  max-height: 42vh;
  overflow-y: auto;
}

.board-bar.on { display: flex; }

.board-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 16px;
  background: var(--surface);
}

.board-btn {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  /* Every one of these is pressed with a finger that is already mid-drawing,
     and a long press on a button is how a phone starts selecting its label. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.board-btn.on { background: var(--pink-soft); box-shadow: 0 0 0 2px var(--pink) inset; }
.board-btn:hover { background: var(--lav-soft); }

/* The colours. A swatch is the button, so it is drawn rather than labelled. */
.board-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 4px rgba(43, 29, 37, 0.3);
}

.board-color:hover { background: var(--swatch); }
.board-color.on {
  box-shadow: 0 0 0 3px var(--pink-deep);
  transform: scale(1.08);
}

.board-sizebtn { width: 34px; height: 34px; }
.board-dot { border-radius: 50%; background: var(--ink); display: block; }
.board-sizebtn.on .board-dot { background: var(--pink-deep); }

.board-close { background: var(--pink-soft); }

/* -------------------------------------------------------- the shelf */

/* Above its own ink, and above the room's other sheets, because it is opened
   from a toolbar that is itself above them. */
.board-sheet { z-index: 43; }

.board-sheet .sheet-card {
  position: relative;
  /* The sheet is opened from a toolbar standing on a phone in landscape as
     often as not, so the card has to be able to be shorter than its contents. */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  /* Room for the ✕, which is absolutely positioned over this corner. */
  padding-right: 52px;
}

/* The way out that is not the backdrop. The shelf card fills a phone almost
   edge to edge, which leaves "tap outside it" as a target of a few pixels. */
.board-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 15px;
  background: var(--lav-soft);
  color: var(--ink);
}

.board-x:hover { background: var(--pink-soft); }

.board-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  /* 16px exactly. Anything smaller and iOS zooms the whole page in on focus,
     which on a full screen drawing is a window that never comes back. */
  font-size: 16px;
  outline: none;
  background: var(--input);
  color: inherit;
  margin-bottom: 12px;
}

.board-shelf {
  display: grid;
  /* A ceiling on the track, not just a floor. `minmax(150px, 1fr)` gives one
     saved drawing the whole width of the sheet, which on a laptop is a 300px
     thumbnail of a doodle and a card taller than the panel it is in. */
  grid-template-columns: repeat(auto-fill, minmax(136px, 168px));
  justify-content: center;
  gap: 12px;
  max-height: 62vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.board-card {
  padding: 10px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}

.board-thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #2b1d25;
  display: grid;
  place-content: center;
  font-size: 30px;
  margin-bottom: 8px;
}

.board-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.board-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--pink-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-by { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }

.board-card-row {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.board-card-row .save-btn,
.board-card-row .medals-btn { padding: 7px 10px; font-size: 12px; }
.board-trash { padding: 7px 9px; }

/* ------------------------------------------------------------ a phone */

@media (max-width: 700px) {
  .board-bar {
    left: 6px;
    right: 6px;
    gap: 5px;
    padding: 6px;
  }

  /* Touch sized, and the row still wraps rather than hiding anything. */
  .board-btn { width: 40px; height: 40px; font-size: 18px; }
  .board-color { width: 28px; height: 28px; }
  .board-sizebtn { width: 34px; height: 34px; }
  .board-pip { bottom: 34vh; }
}

/* ------------------------------------------------------------- at night */

:root[data-theme="dark"] .board-bar {
  background: #241a20;
  border-color: #3a2b33;
}

:root[data-theme="dark"] .board-group { background: #2e2129; }
:root[data-theme="dark"] .board-btn { color: #f3e7ef; }
:root[data-theme="dark"] .board-btn:hover { background: #3b2c36; }
:root[data-theme="dark"] .board-dot { background: #f3e7ef; }
:root[data-theme="dark"] .board-pip { background: #241a20; border-color: #3a2b33; }
:root[data-theme="dark"] .board-card { background: #2e2129; border-color: #3a2b33; }