/* SPDX-License-Identifier: LicenseRef-Proprietary */
/* The level select of parts/level-select.js, on the landing page and on the start screen of the demo.
   Each card shows the first line of its attack in the style of the attack, on the plain light cards
   of the fake windows. Jack's trick is the tag below it, in the words of the outcome. */

.level-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--width-level-card), 100%), 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.level-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  border: var(--border-1) solid var(--line);
  border-left: var(--border-3) solid var(--jack);
  border-radius: var(--radius);
  background: var(--surface);
}
.level-play { margin-top: auto; text-align: left; }
.level-case { color: var(--text-2); font: var(--font-badge); }

.trick-tag {
  justify-self: start;
  padding: var(--space-6) var(--space-10);
  border: var(--border-2) solid var(--jack);
  color: var(--jack);
  font: var(--font-tag);
}

/* The first line of the attack. */
.level-opening {
  display: grid;
  gap: var(--space-4);
  align-self: stretch;
  padding: var(--space-12);
  border-radius: var(--radius-8);
  background: var(--fake-window);
  color: var(--on-fake-window);
  font: var(--font-14)/var(--leading-140) var(--system-sans);
}
.level-from { font-weight: 700; }
.level-notice { border-left: var(--border-4) solid var(--jack); }
.level-caller { justify-items: center; text-align: center; }
.level-caller .level-from { font-size: var(--font-18); }
.level-sticker {
  justify-items: center;
  text-align: center;
  background: var(--qr-paper);
  color: var(--on-qr-paper);
  box-shadow: var(--shadow-sticker);
}
/* The chat shows the sender above the bubble of the message. */
.level-chat { padding: 0; background: none; color: inherit; }
.level-chat .level-from { color: var(--muted); font-size: var(--font-12); }
.level-chat .level-line {
  justify-self: start;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius) var(--radius) var(--radius) var(--radius-4);
  background: var(--fake-message);
  color: var(--on-fake-window);
}