/* The lobby as a page torn out of a notebook and taped over the desk.
 *
 * Loaded after style.css and only restyles the lobby and results card.
 * Handwriting: assets/fonts/hand.woff2 when it exists (a font made from the
 * author's own handwriting), otherwise the system's handwriting faces.
 * Nothing here is perfectly straight on purpose. */
/* Turn this on once assets/fonts/hand.woff2 exists (until then it 404s).
@font-face {
  font-family: "WingsHand";
  src: url("assets/fonts/hand.woff2") format("woff2");
  font-display: swap;
}
*/
:root {
  --hand: "WingsHand", "Noteworthy", "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Neue", cursive;
  --ink: #23356f; /* blue ballpoint */
  --pencil: #4a4a46;
  --paper: #fdfbf3;
  --rule: #b9cce6;
  --margin: #e79a9a;
  --tape: #e9dcb4d9;
  --sticky: #fff3a0;
  --marker: #ffe45c;
  --stamp: #c0392b;
}

/* ------------------------------------------------------------- the sheet */
#lobby {
  background: radial-gradient(ellipse at 70% 40%, #00000000, #2a20140f);
}
#lobby .card,
#results.card {
  position: relative;
  border: 0;
  border-radius: 2px 3px 2px 4px;
  backdrop-filter: none;
  color: var(--pencil);
  padding: 34px 30px 30px 66px;
  /* Ruled lines every 28px, the red margin, and three punched holes. */
  background:
    radial-gradient(circle at 24px 90px, #d9cfb8 0 7px, #0000 8px),
    radial-gradient(circle at 24px 50%, #d9cfb8 0 7px, #0000 8px),
    radial-gradient(circle at 24px calc(100% - 90px), #d9cfb8 0 7px, #0000 8px),
    linear-gradient(90deg, #0000 47px, var(--margin) 47px 48.5px, #0000 48.5px),
    repeating-linear-gradient(180deg, #0000 0 27px, var(--rule) 27px 28px),
    linear-gradient(170deg, #fffdf6, var(--paper) 60%, #f6f0dd);
  background-attachment: local;
  box-shadow:
    0 1px 1px #0000001a,
    0 12px 30px -8px #3b2c1640,
    0 30px 60px -30px #3b2c1640;
  transform: rotate(-0.8deg);
}
/* The end-of-match card floats over the game, centred (style.css #results);
   the shared rule above must not pull it into the page flow, where it ended
   up below the screen and the finished match looked frozen. */
#results.card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%) rotate(-0.8deg);
}
/* Masking tape on two corners, torn at the ends. */
#lobby .card::before,
#lobby .card::after,
#results.card::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, #ffffff14 0 2px, #0000 2px 5px),
    var(--tape);
  box-shadow: 0 1px 2px #0000001f;
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 2%, 20% 6%, 100% 0, 97% 20%, 100% 38%, 96% 55%, 100% 72%, 97% 100%, 0 96%, 3% 76%, 0 58%, 4% 40%, 0 22%);
  pointer-events: none;
  z-index: 2;
}
#lobby .card::before {
  top: -12px;
  left: 18px;
  transform: rotate(-9deg);
}
#lobby .card::after {
  top: -10px;
  right: 22px;
  transform: rotate(6deg);
  width: 90px;
}
#results.card::before {
  top: -12px;
  left: 40%;
  transform: rotate(3deg);
}

/* --------------------------------------------------------- handwriting */
#lobby h1,
#lobby h2,
#lobby .brand p,
#lobby .brand small,
#lobby .card > small,
#lobby label,
#lobby .fine,
#lobby figcaption,
#lobby #plane-trait,
#lobby button,
#results h2,
#results small,
#results button {
  font-family: var(--hand);
  letter-spacing: 0;
}
#lobby .card > small,
#results > small {
  font-size: 15px;
  color: var(--margin);
  text-transform: lowercase;
}
#lobby h2,
#results h2 {
  font-size: 34px;
  line-height: 1.1;
  color: var(--ink);
  margin: 4px 0 16px;
  transform: rotate(-1.2deg);
}
#lobby label {
  font-size: 16px;
  color: var(--pencil);
  margin: 12px 0;
}
#lobby .fine {
  font-size: 15px;
  line-height: 28px;
  color: var(--pencil);
}

/* Fields are written on the line, not boxed. */
#lobby input:not([type="range"]):not([type="checkbox"]),
#lobby select {
  font-family: var(--hand);
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid #23356f80;
  border-radius: 0;
  padding: 4px 2px 3px;
}
#lobby select {
  appearance: none;
  background-image: linear-gradient(45deg, #0000 50%, var(--ink) 50% 62%, #0000 62%),
    linear-gradient(-45deg, #0000 50%, var(--ink) 50% 62%, #0000 62%);
  background-size: 7px 7px;
  background-position: calc(100% - 10px) 55%, calc(100% - 4px) 55%;
  background-repeat: no-repeat;
}
/* Fields you can't change (the host's settings, as a guest; anything once
   the match starts): faded pencil on a dashed line. */
#lobby select:disabled,
#lobby input:disabled {
  color: #4a4a4699;
  border-bottom-style: dashed;
  border-bottom-color: #4a4a4666;
  background-image: none;
  cursor: not-allowed;
  opacity: 0.75;
}
#lobby input[type="range"] {
  accent-color: var(--ink);
}

/* ------------------------------------------------- hand-inked buttons */
#lobby button,
#results button {
  font-size: 20px;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  /* Uneven corners read as a box drawn by hand. */
  border-radius: 255px 14px 225px 16px / 14px 225px 18px 255px;
  padding: 8px 14px;
  transform: rotate(0.6deg);
  transition: transform 0.12s;
}
#lobby button:nth-of-type(2n) {
  transform: rotate(-0.8deg);
  border-radius: 16px 225px 14px 255px / 255px 18px 225px 14px;
}
#lobby button:hover,
#results button:hover {
  background: #23356f0d;
  transform: rotate(-0.4deg) scale(1.01);
}
/* The main button is coloured in with a highlighter, a bit past the lines. */
#lobby button.primary,
#results button.primary {
  color: #1d2a55;
  border-width: 2.5px;
  background:
    linear-gradient(176deg, #0000 6%, var(--marker) 6% 92%, #0000 92%) no-repeat,
    transparent;
  background-size: 103% 100%;
  background-position: -4px 0;
}
#lobby button[data-loading]::after,
#lobby button[data-loading]:not(.primary)::after {
  content: "sharpening pencils…";
  color: var(--pencil);
}

/* ----------------------------------------- the plane on a sticky note */
#lobby #plane-preview {
  position: relative;
  border: 0;
  border-radius: 0 0 2px 18px / 0 0 2px 6px;
  background: linear-gradient(175deg, #fff7b8, var(--sticky) 40%, #f8e783);
  box-shadow: 0 1px 0 #0000000d, 3px 8px 14px -6px #4a3b0659;
  transform: rotate(1.6deg);
  margin: 6px 6px 22px 2px;
}
#lobby #plane-preview::before {
  /* The sticky strip, a touch darker. */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 16px;
  background: #f3df6c80;
}
#lobby #preview-name {
  font-family: var(--hand);
  font-size: 24px;
  color: var(--ink);
}
#lobby #plane-trait {
  display: block;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--pencil);
  padding: 0 14px;
  line-height: 1.3;
}
#lobby #plane-stats .stat {
  font-family: var(--hand);
  font-size: 13px;
  color: var(--pencil);
}
#lobby #plane-stats i {
  background: #0000;
  border-bottom: 1.5px dashed #4a4a4680;
  border-radius: 0;
}
#lobby #plane-stats b.up {
  background: #2f7d4fcc;
  border-radius: 2px 6px 3px 5px;
}
#lobby #plane-stats b.down {
  background: #c0392bc0;
  border-radius: 5px 2px 6px 3px;
}

/* ------------------------------------------------- the left-hand side */
#lobby .brand {
  position: relative;
}
#lobby .brand small {
  display: inline-block;
  font-size: 18px;
  color: var(--pencil);
  transform: rotate(-2deg);
}
#lobby h1 {
  font-size: 104px;
  line-height: 0.9;
  letter-spacing: -1px;
  color: var(--ink);
  transform: rotate(-3deg);
  text-shadow: 0.5px 0.5px 0 #23356f55;
}
#lobby h1 em {
  font-style: normal;
  color: var(--stamp);
}
#lobby .brand p {
  font-size: 22px;
  line-height: 1.35;
  color: var(--pencil);
  transform: rotate(-1deg);
}
/* A soft paper-coloured halo keeps pencil writing readable over the room. */
#lobby .brand p,
#lobby .brand small {
  text-shadow: 0 0 2px #fffdf5, 0 0 8px #fffdf5, 0 0 16px #fffdf5cc;
}
#lobby h1 {
  filter: drop-shadow(0 0 10px #fffdf5aa);
}

/* Stickers, a stamp, a doodle and a coffee ring (all drawn in index.html). */
.scrap {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.sticker {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  font: 17px/1.05 var(--hand);
  text-align: center;
  color: #fff;
  background: #e2574c;
  box-shadow: 0 0 0 4px #fff, 0 3px 8px #0000004d;
}
.sticker.round {
  width: 74px;
  height: 74px;
  left: 4px;
  bottom: -70px;
  background: #3f8f6b;
  transform: rotate(-11deg);
  font-size: 15px;
}
.stamp {
  right: 26px;
  top: 30px;
  padding: 6px 12px;
  border: 3px double var(--stamp);
  border-radius: 6px;
  color: var(--stamp);
  font: 700 15px/1.1 "Courier New", monospace;
  letter-spacing: 2px;
  text-align: center;
  opacity: 0.72;
  mix-blend-mode: multiply;
  transform: rotate(-11deg) translate(6px, 3px); /* never quite lined up */
  filter: url(#rough);
  /* Patchy ink. */
  -webkit-mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, #000c 4px, #000 6px);
  mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, #000c 4px, #000 6px);
}
.doodle {
  left: 4px;
  top: 150px;
  width: 44px;
  filter: url(#rough);
}
.coffee-ring {
  right: -38px;
  top: 330px;
  width: 140px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  filter: url(#rough);
}
#lobby .card .doodle,
#lobby .card .coffee-ring,
#lobby .card .stamp {
  z-index: 1;
}
#lobby .card > * {
  position: relative;
  z-index: 3;
}
#lobby .card > .scrap {
  position: absolute;
}

/* --------------------------------------------- the page in other spots */
#lobby #room-panel,
#lobby .team,
#lobby .invite {
  background: #ffffff8c;
  border-color: #23356f33;
  border-radius: 3px 8px 4px 6px;
}
#lobby .room-head b,
#lobby .team header {
  font-family: var(--hand);
  font-size: 17px;
  color: var(--ink);
}

/* First-person tips (notes.js): in the lobby, the countdown and on respawn. */
.tip {
  font: 19px/1.3 var(--hand);
  color: var(--ink);
}
#lobby-tip {
  margin: 14px 0 0;
  transform: rotate(-0.7deg);
}
#countdown-tip,
#tip {
  max-width: min(520px, 86vw);
  text-align: center;
  color: #fff8e6;
  text-shadow: 0 1px 3px #1d2a22, 0 0 12px #1d2a2299;
  transform: rotate(-1deg);
}
#tip {
  position: absolute;
  top: 46%;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
}
#tip:empty {
  display: none;
}

@media (max-width: 800px) {
  #lobby h1 {
    font-size: 70px;
  }
  #lobby .card {
    padding-left: 58px;
  }
  .sticker.round {
    display: none;
  }
}
@media (max-width: 600px) {
  #lobby .card {
    transform: none;
    padding: 30px 18px 24px 54px;
  }
  .coffee-ring {
    width: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #lobby button {
    transition: none;
  }
}