/* The long game's screens (owner 27.10.2026, long-game.js). Few words, big
   numbers (bs-vahan-tekstia); everything fits 1280x720 without scrolling. */

/* Start card: the class name and the saved games. */
.sf-lg-class { min-width: 0; }
.sf-lg-continue { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.sf-lg-continue__btn {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 10px;
  background: rgba(0, 196, 180, 0.1); border: 1px solid var(--teal, #00c4b4); color: var(--text, #fff);
  font: inherit; cursor: pointer; text-align: left;
}
.sf-lg-continue__btn b { font-size: 15px; font-weight: 800; }
.sf-lg-continue__btn span { font-size: 13px; color: var(--muted2, #9aa6b2); white-space: nowrap; }
.sf-lg-continue__btn.is-finished { background: transparent; border-color: var(--border, #2a3442); }
.sf-lg-continue__btn:disabled { opacity: 0.6; cursor: default; }

/* Name pick. */
#screen-login .sf-card.sf-lg-names { max-width: 860px; box-sizing: border-box; padding: 30px 34px 26px; }
.sf-lg-names__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sf-lg-names__lesson { font-size: 14px; color: var(--muted2, #9aa6b2); }
.sf-lg-names__firms { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.sf-lg-names__firm { display: flex; flex-direction: column; gap: 8px; }
.sf-lg-names__firm-name { font-size: 13px; font-weight: 800; color: var(--gold, #f0a500); letter-spacing: 0.02em; min-height: 32px; }
.sf-lg-names__name {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border, #2a3442);
  background: var(--card, #182230); color: var(--text, #fff); font: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.sf-lg-names__name:hover { border-color: var(--teal, #00c4b4); }
.sf-lg-names__name.is-taken { opacity: 0.45; cursor: default; }
.sf-lg-names__new {
  margin-top: 16px; background: none; border: none; color: var(--muted2, #9aa6b2);
  font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0;
}

/* Board meeting and year end (pupil): one full screen, one decision. */
.lg-board, .lg-yearend {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: var(--void, #0b111a); color: var(--text, #fff); padding: 16px; box-sizing: border-box;
  z-index: 100000;
}
.lg-board[hidden], .lg-yearend[hidden], .lg-report[hidden], .lg-yearend-bar[hidden], .lg-host[hidden] { display: none !important; }
.lg-board__panel, .lg-yearend__panel { width: 100%; max-width: 900px; }
.lg-board__top { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.lg-board__title { font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 22px; }
.lg-board__lesson { font-size: 16px; color: var(--muted2, #9aa6b2); }
.lg-board__clock, .lg-yearend__saved { margin-left: auto; font-family: "DM Mono", monospace; font-size: 26px; font-weight: 700; color: var(--gold, #f0a500); }
.lg-yearend__saved { font-family: inherit; font-size: 17px; color: var(--teal, #00c4b4); }
.lg-board__firm { font-size: 34px; font-weight: 900; margin-bottom: 20px; letter-spacing: -0.01em; }
.lg-board__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.lg-board__tiles--two { grid-template-columns: repeat(2, 1fr); }
.lg-tile { background: var(--surface, #121a26); border: 1px solid var(--border, #2a3442); border-radius: 14px; padding: 16px 20px; }
.lg-tile__label { font-size: 15px; color: var(--muted2, #9aa6b2); margin-bottom: 6px; }
.lg-tile__value { font-size: 40px; font-weight: 800; white-space: nowrap; }
.lg-tile__move { font-size: 22px; color: var(--teal, #00c4b4); }
.lg-tile__move.is-down { color: #ff8a7a; }
.lg-board__open { font-size: 18px; color: var(--muted2, #9aa6b2); margin-bottom: 24px; }
.lg-board__open b { color: var(--text, #fff); white-space: nowrap; }
.lg-board__ask { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.lg-board__choices, .lg-yearend__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lg-board__choice {
  padding: 22px 18px; border-radius: 14px; border: 2px solid var(--border, #2a3442);
  background: var(--card, #182230); color: var(--text, #fff); font: inherit; font-size: 20px; font-weight: 800; cursor: pointer;
}
.lg-board__choice:hover:not(:disabled) { border-color: var(--teal, #00c4b4); }
.lg-board__choice.is-chosen { border-color: var(--teal, #00c4b4); background: rgba(0, 196, 180, 0.16); }
.lg-board__choice:disabled { cursor: default; }
.lg-board__choice:disabled:not(.is-chosen) { opacity: 0.45; }
/* A lesson's options with their money: one row each, the figures in two
   right-aligned columns of the same size (bs-symmetria). */
.lg-board__choices--rows { grid-template-columns: 1fr; gap: 10px; }
.lg-board__choices--rows .lg-board__choice {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px 210px; align-items: baseline; gap: 16px;
  padding: 16px 22px; text-align: left;
}
.lg-board__label { font-size: 22px; font-weight: 800; }
.lg-board__figure, .lg-board__gain { font-size: 28px; font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-board__gain { color: var(--teal, #00c4b4); }
.lg-board__figure.is-cost, .lg-board__gain.is-cost { color: #ff8a7a; }
.lg-board__choice.is-off { opacity: 0.35; }
/* The Value lesson's offer: one big figure, one plain line beside it. */
.lg-board__offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; }
.lg-board__offer-line { font-size: 22px; font-weight: 800; color: var(--text, #16202c); }
/* The long game's teacher lobby: the board panel sits close above Start (no empty middle). */
#screen-host-lobby .lg-host-room { flex: 0 0 auto !important; }
.lg-board__voted { margin-top: 12px; font-size: 16px; color: var(--muted2, #9aa6b2); }
.lg-yearend__answers .lg-board__choice { padding: 16px 14px; font-size: 18px; }
.lg-yearend__close {
  margin-top: 16px; background: none; border: 1px solid var(--border, #2a3442); color: var(--muted2, #9aa6b2);
  font: inherit; font-size: 15px; padding: 10px 22px; border-radius: 10px; cursor: pointer;
}

/* Teacher lobby: today's firms. */
.lg-host { margin-bottom: 14px; }
.lg-host__top { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.lg-host__title { font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 15px; color: var(--text, #fff); }
.lg-host__board { margin-left: auto; font-size: 14px; color: var(--muted2, #9aa6b2); }
.lg-host__board b { font-family: "DM Mono", monospace; font-size: 22px; color: var(--gold, #f0a500); margin-left: 6px; }
.lg-host__firms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lg-host__firm { background: var(--card, #182230); border: 1px solid var(--border, #2a3442); border-radius: 10px; padding: 10px 12px; }
.lg-host__firm.is-short { border-color: #ff8a7a; }
.lg-host__firm.is-resting { opacity: 0.6; }
.lg-host__firm-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lg-host__firm-name { font-weight: 800; font-size: 13px; color: var(--text, #fff); }
.lg-host__firm-cash { font-weight: 800; font-size: 13px; color: var(--teal, #00c4b4); white-space: nowrap; }
.lg-host__firm-status { font-size: 12px; color: var(--muted2, #9aa6b2); margin: 2px 0 6px; }
.lg-host__person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted2, #9aa6b2); padding: 3px 0; }
.lg-host__person b { color: var(--text, #fff); }
.lg-host__person.is-away b { color: var(--muted, #6b7785); font-weight: 600; text-decoration: line-through; }
.lg-host__tag { font-size: 11px; color: var(--gold, #f0a500); }
.lg-host__voted { font-size: 11px; color: var(--teal, #00c4b4); }
.lg-host__new { margin-top: 10px; background: var(--card, #182230); border: 1px solid var(--gold, #f0a500); border-radius: 10px; padding: 10px 12px; }
.lg-host__new-title { font-weight: 800; font-size: 13px; color: var(--gold, #f0a500); margin-bottom: 4px; }
.lg-host__add {
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--teal, #00c4b4); background: transparent; color: var(--teal, #00c4b4);
}
.lg-host__problem { margin-top: 10px; font-size: 14px; font-weight: 700; color: #ff8a7a; }

/* Teacher: the year-end strip over the Live Chart. */
.lg-yearend-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 100000;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px; border-radius: 12px;
  background: #0e2038; color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); font-size: 15px; max-width: calc(100vw - 32px);
}
.lg-yearend-bar__title { font-weight: 800; white-space: nowrap; }
.lg-yearend-bar__saved { color: #5fe0d4; white-space: nowrap; }
.lg-yearend-bar button, .lg-report__actions button {
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: inherit; white-space: nowrap;
}
.lg-yearend-bar button.is-main, .lg-report__actions button.is-main { background: #00a99d; border-color: #00a99d; color: #fff; }

/* Reports: light, printable. */
.lg-report {
  position: fixed; inset: 0; z-index: 100001; background: rgba(9, 17, 31, 0.6);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; box-sizing: border-box; overflow: auto;
}
.lg-report__panel { width: 100%; max-width: 1080px; background: #fff; color: #16202c; border-radius: 14px; padding: 24px 28px; box-sizing: border-box; }
.lg-report__title { margin: 0 0 4px; font-size: 24px; font-weight: 900; }
.lg-report__sub { color: #5b6672; font-size: 14px; margin-bottom: 14px; }
.lg-report__table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; }
.lg-report__table th { text-align: left; font-size: 12px; color: #5b6672; font-weight: 700; border-bottom: 2px solid #d9dee4; padding: 6px 8px; }
.lg-report__table td { border-bottom: 1px solid #e8ebef; padding: 7px 8px; vertical-align: top; }
.lg-report__table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-report__table tr.is-resting td { color: #8b929c; }
.lg-report__table--pupils { font-size: 13px; }
.lg-report__q { font-weight: 800; margin: 4px 0 6px; }
.lg-report__answers { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; margin-bottom: 14px; }
.lg-report__actions { display: flex; justify-content: flex-end; gap: 10px; }
.lg-report__actions button { color: #16202c; border-color: #c9d0d8; }
.lg-report__actions button.is-main { color: #fff; }

@media (max-height: 740px) {
  .lg-board__firm { font-size: 28px; margin-bottom: 14px; }
  .lg-tile__value { font-size: 34px; }
  .lg-board__choice { padding: 16px 14px; }
  .lg-board__open { margin-bottom: 16px; }
  .lg-board__choices--rows .lg-board__choice { padding: 12px 20px; }
  .lg-board__label { font-size: 20px; }
  .lg-board__figure, .lg-board__gain { font-size: 24px; }
}

@media print {
  body > *:not(.lg-report) { display: none !important; }
  .lg-report { position: static; background: none; padding: 0; }
  .lg-report__actions { display: none; }
}

/* Owner 27.10.2026: the last-lesson mark, "Save and stop here". */
.lg-host__last {
  font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border, #2a3442); background: transparent; color: var(--text, #fff);
}
.lg-host__last.is-on { border-color: var(--teal, #00c4b4); background: rgba(0, 196, 180, 0.14); color: var(--teal, #00c4b4); }
.lg-stop-bar { position: fixed; left: 16px; bottom: 14px; z-index: 100000; }
.lg-stop-bar[hidden], .lg-stopped[hidden] { display: none !important; }
.lg-stop-bar button {
  font: inherit; font-size: 14px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  background: #0e2038; color: #fff; border: 1px solid #0e2038; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.lg-stopped .lg-board__title { margin-bottom: 10px; }

/* The small-class long game (owner 28.10.2026, solo/solo-long-game.js):
   the rejoin names on the solo start card. */
.solo-lg-names__head { margin-bottom: 16px; }
.solo-lg-names__head h1 { margin: 0 0 4px; }
.solo-lg-names .sf-lg-names__lesson { font-size: 15px; }
.solo-lg-names .sf-lg-names__firms { grid-template-columns: 1fr 1fr; gap: 12px; }
.solo-lg-names .sf-lg-names__firm { gap: 6px; }
.solo-lg-names .sf-lg-names__firm-name { min-height: 0; color: #00838f; }
.solo-lg-names .sf-lg-names__name { background: #fff; color: #1f2738; border-color: #d9e0e7; }
.solo-lg-names .sf-lg-names__new { color: #667085; }