/* A shared Bid Lab lesson (lesson.html, src/embed/lessonViewer.js): the
   in-app learner view on its ivory panel, in system fonts so the page makes
   no request beyond its own host. North on top, West and East either side
   of the trick, South below; one column on a narrow frame. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fbf8f1;
  color: #222;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.lv {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 14px 12px;
}

.lv-status {
  margin: 24px 0 12px;
  text-align: center;
  color: #555;
}

.lv-status + .lv-btn {
  display: block;
  margin: 0 auto;
}

/* ── Head ── */

.lv-kicker {
  margin: 0;
  font: 600 0.72rem/1.2 Georgia, 'Times New Roman', serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6d1a;
}

.lv-title {
  margin: 2px 0 2px;
  font: 700 1.3rem/1.2 Georgia, 'Times New Roman', serif;
  color: #1e4620;
  overflow-wrap: anywhere;
}

.lv-score {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: #1e4620;
}

.lv-intro {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #555;
}

/* ── The table ── */

.lv-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    "n n n"
    "w t e"
    "s s s";
  gap: 8px;
  align-items: center;
}

.lv-seat-N { grid-area: n; }
.lv-seat-E { grid-area: e; }
.lv-seat-S { grid-area: s; }
.lv-seat-W { grid-area: w; }
.lv-trick { grid-area: t; }

.lv-seat {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(138, 109, 26, 0.3);
  border-radius: 8px;
  background: #fff;
}

.lv-seat.lv-turn {
  border-color: #d9a93f;
  box-shadow: 0 0 0 2px rgba(217, 169, 63, 0.4);
}

.lv-seat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 8px;
  margin: 0 0 4px;
}

.lv-seat-name {
  font: 700 0.85rem/1.2 Georgia, 'Times New Roman', serif;
  color: #1e4620;
}

.lv-seat-line {
  font-size: 0.75rem;
  color: #6b5626;
}

.lv-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 26px;
}

.lv-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 4px;
  border: 1px solid #c9b88a;
  border-radius: 4px;
  background: #fffdf7;
  font-weight: 700;
  font-size: 0.85rem;
  color: #111;
}

.lv-card.red {
  color: #b3261e;
}

.lv-hidden {
  align-self: center;
  font-size: 0.8rem;
  font-style: italic;
  color: #777;
}

.lv-trick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 30px);
  grid-template-areas:
    ". n ."
    "w . e"
    ". s .";
  place-items: center;
  min-height: 110px;
  padding: 6px;
  border-radius: 10px;
  background: #1e4620;
}

.lv-slot-N { grid-area: n; }
.lv-slot-E { grid-area: e; }
.lv-slot-S { grid-area: s; }
.lv-slot-W { grid-area: w; }

.lv-trick .lv-card.won {
  border-color: #d9a93f;
  box-shadow: 0 0 0 2px #f4d47c;
}

/* ── Under the table ── */

.lv-tally {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  margin: 10px 0 6px;
  font-size: 0.8rem;
  color: #444;
}

.lv-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lv-where {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
  font-size: 0.82rem;
  color: #333;
}

.lv-btn {
  min-width: 40px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #8a6d1a;
  border-radius: 6px;
  background: #fffdf7;
  color: #1e4620;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.lv-btn:hover:not(:disabled) {
  background: #f4ead0;
}

.lv-btn:focus-visible {
  outline: 2px solid #d9a93f;
  outline-offset: 2px;
}

.lv-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.lv-note {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #d9a93f;
  border-radius: 4px;
  background: #fff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lv-end {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: #555;
}

.lv-foot {
  margin: 12px 0 0;
  text-align: right;
  font-size: 0.8rem;
}

.lv-home {
  color: #1e4620;
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

/* A narrow frame: the seats stack, the trick between North and South */
@media (max-width: 480px) {
  .lv {
    padding: 10px 8px;
  }

  .lv-board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "n"
      "w"
      "t"
      "e"
      "s";
  }

  .lv-trick {
    min-height: 96px;
  }

  .lv-btn {
    min-width: 36px;
    padding: 6px 8px;
  }
}