/* Jogo Leve — styles for the shared runtime (account strip, scoreboard, toast).
 *
 * Kept out of the game stylesheets on purpose: the games must render correctly if
 * this file never loads, and the scoreboard must not be able to change how a game
 * looks. Only elements created by jl.js are styled here.
 */

/* ------------------------------------------------------------------ toast */
.jl-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2147483000;
  max-width: min(88vw, 420px);
  padding: 10px 14px;
  border-radius: 10px;
  background: #161c24;
  border: 1px solid #2c3846;
  color: #e9eef5;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.jl-toast-out { opacity: 0; }
.jl-toast-ok { border-color: #2f6b45; }
.jl-toast-warn { border-color: #6b5a2f; }

/* ----------------------------------------------------------- account strip */
[data-jl-account] { margin: 0 0 14px; }
.jl-acct-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jl-acct-name { font-size: 13.5px; font-weight: 600; }
/* THE GUEST REMINDER. A quiet box above the sign-in buttons: it states a fact and
   offers one action. Reference lines carry the accent colour so it reads as an
   invitation rather than a warning — nothing is wrong, something is at stake. */
.jl-acct-remind{border:1px solid var(--jl-line);border-left:3px solid var(--jl-accent,#5b8def);
  border-radius:7px;padding:10px 12px;margin:0 0 12px;background:#141a21}
.jl-acct-remind-title{margin:0 0 4px;font-weight:700;font-size:15px}
.jl-acct-remind-facts{margin:0 0 6px;font-size:14px;color:var(--jl-accent,#5b8def);font-weight:600}
.jl-acct-remind-why{margin:0 0 10px;font-size:13px;color:var(--jl-muted,#9aa6b2);line-height:1.45}
.jl-acct-remind .jl-btn-primary{display:block;width:100%;text-align:center}

.jl-acct-note {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .66;
}
.jl-acct-title { font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.jl-acct-msg { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: #ffb4a8; min-height: 0; }
.jl-acct-msg:empty { display: none; }
.jl-acct-form { display: grid; gap: 8px; }

.jl-in {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid #2c3846;
  background: #10161d;
  color: #e9eef5;
  font: 15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.jl-in:focus-visible { outline: 2px solid #64B5F6; outline-offset: 1px; }

.jl-btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #2c3846;
  background: #1b232d;
  color: #e9eef5;
  font: 600 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.jl-btn:active { transform: scale(.985); }
.jl-btn:focus-visible { outline: 2px solid #64B5F6; outline-offset: 2px; }
.jl-btn[disabled] { opacity: .55; cursor: default; }
.jl-btn-primary { background: #1d4e7f; border-color: #2a6ba8; }

/* ------------------------------------------------------------ account sheet */
/* The panel the account strip opens. A sheet over the page rather than an
   inline block: the same runtime is loaded by the full-viewport game pages, and
   this must not be able to move anything the game draws. */
.jl-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147482500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  background: rgba(6, 9, 12, .72);
  overflow-y: auto;
}
.jl-sheet-box {
  width: 100%;
  max-width: 440px;
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #2c3846;
  background: #121820;
  color: #e9eef5;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.jl-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jl-sheet-title { font-size: 15px; font-weight: 650; }
.jl-sheet-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #2c3846;
  background: #1b232d;
  color: #e9eef5;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.jl-sheet-sec { font-size: 13px; font-weight: 650; opacity: .8; margin-top: 5px; }
.jl-tabs { display: flex; gap: 6px; }
.jl-tab {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid #2c3846;
  background: #141a21;
  color: #e9eef5;
  font: 600 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.jl-tab[aria-pressed="true"] { background: #1d4e7f; border-color: #2a6ba8; }
.jl-field { display: grid; gap: 4px; }
.jl-field-label { font-size: 12px; opacity: .66; }

/* ------------------------------------------------------- partner hand-off */
.jl-embed {
  position: fixed;
  left: 50%;
  top: calc(10px + env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 2147483000;
  width: min(92vw, 440px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid #6b5a2f;
  background: #2a2116;
  color: #f4e7cf;
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.jl-embed-txt { flex: 1 1 auto; }
.jl-embed-x {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #6b5a2f;
  background: transparent;
  color: inherit;
  font: 600 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}

/* ------------------------------------------------------------ scoreboard */
.jl-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.jl-board-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #141a21;
  border: 1px solid #222b35;
  font-size: 14px;
}
.jl-board-mine { border-color: #2a6ba8; background: #16222e; }
.jl-rank {
  flex: 0 0 auto;
  min-width: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: .6;
}
.jl-pname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-pscore { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 650; }
.jl-board-msg { font-size: 12.5px; opacity: .6; margin: 4px 0; }

/* ---------------------------------------------------------------------------
   The floating scoreboard panel lived here.

   REMOVED, NOT DEPRECATED. It was `position: fixed; top: 10px; right: 10px` with no
   knowledge of the bars the game draws at the top of the screen, so the button sat
   across the title bar and the open panel covered the pause button and part of the
   board. The scoreboard is now a control in the game's own bar — a flex child, so it
   cannot land anywhere the game did not leave room for — and it opens as a sheet.

   The styles are deleted rather than left in place because CSS that nothing
   references is worse than absent: the next person to move a button finds these
   rules, assumes they apply, and reintroduces the bug.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The account-completion panel.

   Sits above the rest of the profile sheet and looks like a panel rather than an
   alert: it is a task, not an error. The accent is the same blue the primary button
   already uses, so it reads as part of the sheet instead of a warning bolted on.
   --------------------------------------------------------------------------- */
.jl-complete {
  border: 1px solid #2a4a6b;
  background: #12202c;
  border-radius: 10px;
  padding: 12px 13px;
  margin-bottom: 14px;
}
.jl-complete .jl-sheet-sec { margin-top: 0; opacity: 1; }
.jl-complete .jl-btn { margin-top: 8px; }
.jl-complete-facts { list-style: none; margin: 6px 0; font-size: 12.5px; opacity: .8; }
.jl-complete-facts li { margin-top: 2px; }

/* The consent row. The checkbox is deliberately a normal-sized tap target: a
   pre-ticked box is not consent, and a fiddly one on a cheap phone is a way of
   making consent accidental rather than given. */
.jl-agree {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.5; opacity: .9; margin-top: 10px;
}
.jl-agree input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: #2a6ba8;
}
.jl-agree a { color: #8ab4f8; }

/* ---------------------------------------------------------------------------
   The email-verification result.

   Shown only when the visitor arrives from a verification link, so it is the first
   thing on the page and the reason they came back. Green for confirmed, amber for a
   dead link — amber rather than red because an expired link is not an error the
   reader made, and red would make it feel like one.
   --------------------------------------------------------------------------- */
.jl-verified {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.jl-verified-ok { background: #14261a; border: 1px solid #2f5a3a; color: #7ddc9a; }
.jl-verified-bad { background: #2a1f14; border: 1px solid #7a5a2a; color: #f0b429; }