/* fheroes2 online battle lobby.
 *
 * Two screens share this: the host page (index.html) and the join page (spectate.html). Both are
 * a single centred card that walks one player through one decision at a time, so the styling here
 * is deliberately plain and unbranded -- the game's own artwork appears the moment the lobby is
 * dismissed, and a lobby that tried to compete with it only made the wait look busier.
 *
 * No image files and no web fonts: the guest downloads no game data at all, and the published
 * build carries none of the original game's assets. */

:root {
  --fh2-ui-bg: rgba(8, 9, 12, 0.95);
  --fh2-ui-card: #151920;
  --fh2-ui-sunken: #0d1015;
  --fh2-ui-line: #2a303a;
  --fh2-ui-text: #e8eaee;
  --fh2-ui-dim: #99a2af;
  --fh2-ui-faint: #6b7480;
  --fh2-ui-gold: #d9b45a;
  --fh2-ui-green: #4fa46b;
  --fh2-ui-red: #d3705f;
  --fh2-ui-font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fh2-ui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#lobby {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--fh2-ui-bg);
  color: var(--fh2-ui-text);
  font-family: var(--fh2-ui-font);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Taller than the window on a short screen otherwise puts the buttons out of reach. */
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
}

#lobby[hidden] { display: none; }

.lobby-card {
  margin: auto;
  background: linear-gradient(180deg, #171b23, #12151b);
  border: 1px solid var(--fh2-ui-line);
  border-radius: 14px;
  padding: 30px 32px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.lobby-card h1 {
  margin: 0 0 6px;
  font-size: 1.55rem;
  line-height: 1.2;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lobby-card .subtitle {
  margin: 0 0 22px;
  color: var(--fh2-ui-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.lobby-card h2 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  color: var(--fh2-ui-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.lobby-step[hidden] { display: none; }

/* ---- buttons ---- */

.lobby-card button {
  font-family: inherit;
  font-size: 0.95rem;
  color: #fff;
  background: #232933;
  border: 1px solid var(--fh2-ui-line);
  border-radius: 9px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lobby-card button:hover { background: #2c333e; }
.lobby-card button:active { transform: translateY(1px); }
.lobby-card button:focus-visible { outline: 2px solid var(--fh2-ui-gold); outline-offset: 2px; }
.lobby-card button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.lobby-card button:disabled:hover { background: #232933; }

.lobby-card button.primary {
  background: linear-gradient(180deg, #3f8459, #2f6544);
  border-color: #2c6042;
}
.lobby-card button.primary:hover { background: linear-gradient(180deg, #489567, #37744e); }

.lobby-card button.ghost {
  background: transparent;
  color: var(--fh2-ui-dim);
}
.lobby-card button.ghost:hover { background: #1c212a; color: #fff; }

.lobby-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lobby-actions.stack { flex-direction: column; }
.lobby-actions.end { justify-content: flex-end; }
.lobby-actions button { flex: 1; min-width: 130px; }
.lobby-actions.end button { flex: 0 0 auto; }

/* The two front-door choices. Each carries a second line saying what it means, because "Host"
   and "Join" alone leave the player guessing which one needs their game files. */
button.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 15px 18px;
  text-align: left;
}

.btn-title { font-size: 1rem; font-weight: 600; }
.btn-sub { font-size: 0.78rem; opacity: 0.78; font-weight: 400; }

/* ---- room code ---- */

.room-code {
  font-family: var(--fh2-ui-mono);
  font-size: 2.1rem;
  font-weight: 600;
  /* The indent balances the trailing letter-space so the code stays optically centred. */
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-align: center;
  padding: 18px 12px;
  background: var(--fh2-ui-sunken);
  border: 1px solid var(--fh2-ui-line);
  border-radius: 10px;
  color: var(--fh2-ui-gold);
  user-select: all;
  cursor: copy;
}

.room-code.placeholder { color: #39404b; }

.code-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.code-actions button {
  flex: 1;
  font-size: 0.82rem;
  padding: 9px 12px;
}

.code-input {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--fh2-ui-mono);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  padding: 16px 10px;
  background: var(--fh2-ui-sunken);
  border: 1px solid var(--fh2-ui-line);
  border-radius: 10px;
  color: var(--fh2-ui-text);
}

.code-input:focus {
  outline: none;
  border-color: var(--fh2-ui-gold);
  box-shadow: 0 0 0 3px rgba(217, 180, 90, 0.16);
}

.code-input::placeholder { color: #333a45; }

/* ---- status line ---- */

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 13px;
  background: var(--fh2-ui-sunken);
  border: 1px solid var(--fh2-ui-line);
  border-radius: 9px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--fh2-ui-dim);
}

.status[hidden] { display: none; }

.status .dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fh2-ui-gold);
  animation: fh2-pulse 1.4s ease-in-out infinite;
}

.status.ok { color: #bfe6cd; border-color: #2f6544; }
.status.ok .dot { background: var(--fh2-ui-green); animation: none; }

.status.error { color: #f0c9c0; border-color: #6b3227; background: rgba(150, 60, 45, 0.13); }
.status.error .dot { background: var(--fh2-ui-red); animation: none; }

/* Background progress the player is not waiting on: visible, but never competing with the status
   line that is about what they are doing. Last, so it stays quiet even when it turns green. */
.status.quiet {
  margin-top: 10px;
  padding: 8px 13px;
  background: none;
  border-color: transparent;
  font-size: 0.8rem;
  opacity: 0.72;
}

@keyframes fh2-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .status .dot { animation: none; }
}

/* ---- explanatory blocks ---- */

.how {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--fh2-ui-line);
}

ol.steps {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--fh2-ui-dim);
  font-size: 0.86rem;
  line-height: 1.55;
}

ol.steps li { margin-bottom: 8px; }
ol.steps li:last-child { margin-bottom: 0; }
ol.steps li::marker { color: var(--fh2-ui-gold); font-weight: 600; }
ol.steps b { color: var(--fh2-ui-text); font-weight: 600; }

.lobby-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--fh2-ui-faint);
  line-height: 1.55;
}

.lobby-note code {
  background: #1c212a;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--fh2-ui-mono);
  font-size: 0.92em;
}

/* Unfinished-feature notice. Deliberately hard to miss: someone hitting a failed connection
   should already know it is expected rather than assume they did something wrong. */
.lobby-note.wip {
  padding: 10px 12px;
  border-left: 3px solid #b3711f;
  background: rgba(179, 113, 31, 0.13);
  border-radius: 6px;
  color: #d8bb90;
}

.footer-link {
  margin: 20px 0 0;
  font-size: 0.83rem;
  color: var(--fh2-ui-faint);
  text-align: center;
}

.footer-link a { color: var(--fh2-ui-dim); }
.footer-link a:hover { color: #fff; }

/* ---- one-time game data setup ---- */

#asset-drop {
  margin-top: 4px;
  padding: 26px 16px;
  border: 2px dashed #333a45;
  border-radius: 10px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

#asset-drop.over {
  border-color: var(--fh2-ui-green);
  background: rgba(79, 164, 107, 0.09);
}

#asset-drop p { margin: 4px 0; }
#asset-drop .subtitle { margin: 8px 0; }

.file-button {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 18px;
  background: #232933;
  border: 1px solid var(--fh2-ui-line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.file-button:hover { background: #2c333e; }
.file-button input[type=file] { display: none; }

#load-progress {
  width: 100%;
  margin-top: 6px;
  height: 8px;
}

#load-progress[hidden] { display: none; }

/* ---- small screens ---- */

@media (max-width: 600px) {
  #lobby { padding: 14px; }
  .lobby-card { padding: 22px 18px; border-radius: 12px; }
  .lobby-card h1 { font-size: 1.35rem; }
  .room-code { font-size: 1.6rem; }
  .code-input { font-size: 1.5rem; }
  .lobby-actions { flex-direction: column; }
  .code-actions { flex-direction: column; }
}

/* ---------------------------------------------------------------------------------------------
   In-game furniture. Everything below is shown once the lobby is gone.
   --------------------------------------------------------------------------------------------- */

#turn-banner {
  position: fixed;
  top: 8px;
  /* Centred on the GAME, not the window. The message panel takes its width off the right-hand
     side, so centring on the viewport pushes this visibly to the right of the battlefield. */
  left: calc((100vw - var(--fh2-chat-width, 0px)) / 2);
  transform: translateX(-50%);
  z-index: 50;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-family: var(--fh2-ui-font);
  font-size: 0.85rem;
  border-radius: 4px;
  pointer-events: none;
}

#turn-banner[hidden] { display: none; }

/* The two sides of a Battle Only fight, in the game's own palette rather than a guessed blue and red:
   these are indices 0x47 and 0xbd of KB.PAL, which is what the engine paints a unit's flag, its entry
   in the turn order and - during an online battle - the contour around whichever unit is acting. A
   near-enough CSS blue would not read as the same side. */
:root {
  --fh2-side-blue: rgb(64, 76, 180);
  --fh2-side-red: rgb(168, 32, 32);
}

/* Whose turn it is, said around the edge of the picture rather than in a label at the top. The banner
   is easy to tune out while the eye is on the middle of the battlefield; a ring the width of the
   screen is not. Its colour matches the contour the engine draws around the acting unit, so the two
   cues agree.

   A separate element rather than a border on the canvas or the video: an inset box-shadow on a
   replaced element paints underneath its content and would be invisible, and a real border would
   change the layout the guest's pointer coordinates are normalised against. */
#turn-frame {
  position: fixed;
  top: 0;
  left: 0;
  /* Yields the message panel's width, exactly as #guest-video does, so the ring frames the game and
     not the chat. */
  width: calc(100vw - var(--fh2-chat-width, 0px));
  height: 100vh;
  z-index: 40;
  /* Must never swallow a click: the host plays on the canvas underneath this. */
  pointer-events: none;
  box-shadow: inset 0 0 0 5px var(--fh2-turn-frame-color, transparent);
  transition: box-shadow 120ms ease-out;
}

#turn-frame[hidden] { display: none; }

/* Waiting: a dark, desaturated ring. Deliberately not the opponent's own colour - the point of the
   frame is "yours / not yours", and painting the screen in their colour invites reading it as theirs
   at a glance. */
#turn-frame.waiting {
  --fh2-turn-frame-color: rgba(90, 78, 70, 0.85);
}

#guest-video {
  position: fixed;
  top: 0;
  left: 0;
  /* Yields the panel's width rather than sitting under it. Stated as an explicit width rather than
     by pinning left and right: a video is a replaced element, so `width: auto` would fall back to
     the stream's own 640x400 and sit unscaled in the corner. object-fit keeps the picture's shape
     inside whatever is left, and pictureRect() in multiplayer.js measures the element every time,
     so the pointer keeps landing on the cell it is over. */
  width: calc(100vw - var(--fh2-chat-width, 0px));
  height: 100vh;
  object-fit: contain;
  background: #000;
  z-index: 10;
}

/* Waiting state for the turn banner: shown to whichever side may not act right now. */
#turn-banner.waiting {
  background: rgba(120, 60, 20, 0.85);
}

/* Shown to whichever side may not act right now, on the surface they would otherwise play on: the
   host's canvas and the guest's video. A greyed-out "no entry" reads as "not yours to touch"
   immediately, where a normal arrow invites a click that is then silently swallowed by the gate.
   Drawn inline rather than taken from the game's own cursor art: the guest never downloads any
   game files, so nothing from the AGG can be used on that side.

   Dark halo first, grey glyph over it, so it stays legible on both the bright battlefield and the
   dark interface panels. The two numbers after the url() put the hotspot in the middle of the
   circle instead of the default top-left. */
:root {
  --fh2-blocked-cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='5.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='8.5'/%3E%3Cline x1='7' y1='7' x2='19' y2='19'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b4bac1' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='8.5'/%3E%3Cline x1='7' y1='7' x2='19' y2='19'/%3E%3C/g%3E%3C/svg%3E") 13 13,
    not-allowed;
}

/* !important because SDL sets an inline `cursor: none` on the canvas while the engine draws its
   own cursor into the frame buffer, and an inline style would otherwise win. Without this the
   host has no pointer at all on their own screen during the opponent's turn. */
#canvas.fh2-no-control,
#guest-video.fh2-no-control {
  cursor: var(--fh2-blocked-cursor) !important;
}

/* Two pointers on purpose, doing two different jobs.

   The engine draws the real game cursor into the video -- the contextual battle one that says move
   / attack from this side / out of reach -- but it can only arrive a round trip late, so on its own
   it feels like the mouse is dragging something heavy. The dot below is drawn by the guest's own
   browser at the true pointer position, so it is exact and instant, and the eye tracks it while the
   drawn cursor a little behind supplies the meaning.

   Hiding this and leaving only the drawn cursor was tried and felt markedly laggier. A full arrow
   was tried too and competed with the game cursor for attention; a small ring reads as "you are
   here" without pretending to be the pointer that matters. */
#guest-video.fh2-own-control {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Ccircle cx='7.5' cy='7.5' r='5' fill='none' stroke='%23000' stroke-opacity='.6' stroke-width='3.4'/%3E%3Ccircle cx='7.5' cy='7.5' r='5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='1' fill='%23fff'/%3E%3C/svg%3E") 7 7,
    crosshair;
}

/* Host-side control bar. Deliberately outside the engine canvas so the input gate never intercepts
   it -- "Take control back" has to work while the guest holds control.

   Top right, not bottom centre: the engine puts its own controls along the bottom edge -- Battle
   Only's START/EXIT row and, in a fight, the status bar and turn order -- and a bar centred there
   covers them, so the host cannot click START at all at common window sizes. */
#fh2-net-ui {
  position: fixed;
  top: 10px;
  right: calc(var(--fh2-chat-width, 0px) + 54px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #333;
  border-radius: 6px;
  font-family: var(--fh2-ui-font);
  font-size: 0.8rem;
  color: #ddd;
}

#fh2-net-ui[hidden] { display: none; }

#fh2-net-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: #1f5c2e;
  color: #fff;
  white-space: nowrap;
}

#fh2-net-pill.inactive { background: #7a3d12; }

#fh2-net-ui button {
  padding: 5px 10px;
  font-size: 0.8rem;
  font-family: inherit;
  color: #eee;
  background: #262c35;
  border: 1px solid #3a424e;
  border-radius: 5px;
  cursor: pointer;
}

#fh2-net-ui button:hover { background: #313945; }
#fh2-net-ui button[hidden] { display: none; }
#btn-sound {
  position: fixed;
  top: 8px;
  right: calc(var(--fh2-chat-width, 0px) + 54px);
  z-index: 60;
  padding: 7px 13px;
  font-family: var(--fh2-ui-font);
  font-size: 0.85rem;
  color: #eee;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #3a424e;
  border-radius: 6px;
  cursor: pointer;
}

#btn-sound[hidden] { display: none; }

/* ---------------------------------------------------------------------------------------------
   Message panel beside the game.

   Styled to sit next to the engine's own artwork rather than compete with it: aged parchment for
   the reading surface, dark tooled wood for the frame, and the gold the game uses for its own
   headings. All of it is CSS -- no image files -- so the guest still needs no downloads and the
   published build still carries none of the original game's assets.

   The width is published as a variable so both pages can subtract it from the game surface. It is
   zero unless the panel is actually open, which keeps the game full-bleed until someone talks.
   --------------------------------------------------------------------------------------------- */
:root {
  --fh2-chat-width: 0px;
  --fh2-parchment: #e4d3a8;
  --fh2-parchment-dim: #cbb787;
  --fh2-ink: #3a2a14;
  --fh2-wood: #45301a;
  --fh2-wood-dark: #2b1d0f;
  --fh2-gold: #d9b45a;
}

body.fh2-chat-open {
  --fh2-chat-width: 310px;
}

/* Below this the game would be squeezed harder than the conversation is worth. */
@media (max-width: 900px) {
  body.fh2-chat-open { --fh2-chat-width: 0px; }
  #fh2-chat { display: none; }
}

#fh2-chat {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--fh2-chat-width);
  z-index: 70;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  gap: 8px;

  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34)),
    repeating-linear-gradient(90deg, var(--fh2-wood) 0 7px, #3d2a17 7px 9px, var(--fh2-wood) 9px 16px);
  border-left: 3px solid var(--fh2-wood-dark);
  box-shadow: inset 3px 0 0 rgba(217, 180, 90, 0.28), -6px 0 14px rgba(0, 0, 0, 0.55);
  font-family: Georgia, "Times New Roman", serif;
}

#fh2-chat[hidden] { display: none; }

#fh2-chat-title {
  flex: none;
  text-align: center;
  padding-bottom: 6px;
  color: var(--fh2-gold);
  font-size: 1.05rem;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 #000;
  border-bottom: 1px solid rgba(217, 180, 90, 0.4);
}

#fh2-chat-log {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 9px 10px;
  box-sizing: border-box;

  /* Parchment: a warm base, a slight vertical ageing, and a mottling of soft blotches. */
  background-color: var(--fh2-parchment);
  background-image:
    radial-gradient(ellipse at 22% 18%, rgba(150, 116, 62, 0.18), transparent 62%),
    radial-gradient(ellipse at 78% 68%, rgba(150, 116, 62, 0.15), transparent 58%),
    linear-gradient(var(--fh2-parchment), var(--fh2-parchment-dim));
  border: 1px solid #6b4d28;
  border-radius: 2px;
  box-shadow: inset 0 0 22px rgba(120, 88, 42, 0.5);

  color: var(--fh2-ink);
  font-size: 0.86rem;
  line-height: 1.42;
  word-break: break-word;
}

.fh2-chat-line { margin-bottom: 5px; }

.fh2-chat-who {
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 5px;
}

.fh2-chat-own .fh2-chat-who { color: #1f4a70; }
.fh2-chat-peer .fh2-chat-who { color: #7c2418; }

.fh2-chat-notice {
  font-style: italic;
  color: #6a5433;
  text-align: center;
  margin: 8px 0;
}

#fh2-chat-form {
  flex: none;
  display: flex;
  gap: 6px;
}

#fh2-chat-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #f0e2bd;
  border: 1px solid #6b4d28;
  border-radius: 2px;
  color: var(--fh2-ink);
  font-family: inherit;
  font-size: 0.85rem;
}

#fh2-chat-input:focus {
  outline: none;
  border-color: var(--fh2-gold);
  box-shadow: 0 0 0 1px rgba(217, 180, 90, 0.6);
}

#fh2-chat-send {
  flex: none;
  padding: 6px 12px;
  background: linear-gradient(#6a4a26, #4a3218);
  border: 1px solid var(--fh2-wood-dark);
  border-radius: 2px;
  color: var(--fh2-parchment);
  font-family: inherit;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  cursor: pointer;
}

#fh2-chat-send:hover { background: linear-gradient(#7d5930, #583c1d); }
#fh2-chat-send:active { background: linear-gradient(#4a3218, #6a4a26); }

/* Sits clear of the panel when it is open and against the edge when it is not. */
#fh2-chat-toggle {
  position: fixed;
  top: 10px;
  right: calc(var(--fh2-chat-width) + 10px);
  z-index: 71;
  width: 34px;
  height: 34px;
  padding: 0;
  background: linear-gradient(#6a4a26, #4a3218);
  border: 1px solid var(--fh2-wood-dark);
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  color: var(--fh2-gold);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

#fh2-chat-toggle[hidden] { display: none; }

#fh2-chat-unread {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  background: #8d2b1c;
  border-radius: 999px;
  color: #fff;
  font-family: var(--fh2-ui-font);
  font-size: 0.6rem;
  line-height: 15px;
  text-align: center;
}

#fh2-chat-unread[hidden] { display: none; }

/* A quiet, secondary way out of the front page: replacing the game files is rare, and should not
   compete with the two things nearly everyone came here to do. */
.replace-files {
  margin-top: 18px;
  font-size: 0.82rem;
}

button.linklike {
  padding: 0;
  background: none;
  border: 0;
  color: #6cf;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

button.linklike:hover { color: #9df; }

/* ---- back to the site ----
 *
 * Sits in the card rather than over the canvas, and therefore disappears with the card the moment
 * the game starts drawing. A link floating above a battle is one misclick away from ending it, and
 * the browser's own Back button already covers anyone who wants out mid-game.
 *
 * Outside the .lobby-step elements on purpose, so it survives every step change: whichever screen
 * a player gets stuck on -- loading, the folder picker, waiting for an opponent -- there is a way
 * out that is not the address bar. */
.lobby-back {
  display: inline-block;
  margin: 0 0 18px;
  color: var(--fh2-ui-faint);
  font-size: 0.86rem;
  text-decoration: none;
}

.lobby-back:hover { color: var(--fh2-ui-gold); }

.lobby-back b { color: var(--fh2-ui-dim); font-weight: 600; }
.lobby-back:hover b { color: var(--fh2-ui-gold); }