/* Liga Pontos — the play column only. The frame lives in `_shared/chrome.css`. */

.jl-liga-pontos {
  --jl-bg: #0e1116;
  --jl-fg: #e9eef5;
  --jl-line: #232c36;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--jl-bg);
  color: var(--jl-fg);
  overflow: hidden;
  touch-action: manipulation;
}

.jl-liga-pontos *,
.jl-liga-pontos *::before,
.jl-liga-pontos *::after { box-sizing: border-box; margin: 0; padding: 0; }

.jl-lp-col {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- HUD --------------------------------------------------------------- */
.jl-lp-hud {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.jl-lp-lv {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* M9: "all pipes joined but cells uncovered" is not solved, and this is where the game says
   so — inline, next to the board, not as a modal that stops play. */
.jl-lp-notice {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: #fbbf24;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* THE SCORE AND THE CLOCK. Tabular numerals in both: a proportional font makes a ticking clock
   shift its own width, and on a bar that also holds the level and the hint button that reads as
   the whole row juddering once a second. */
.jl-lp-score,
.jl-lp-clock {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jl-lp-score { color: #ffd54f; }
.jl-lp-clock { color: #cfd6e4; min-width: 34px; text-align: right; }

/* Only the last ten seconds change colour. A clock that recolours every second is unreadable
   and stops meaning anything. */
.jl-lp-clock.urgent { color: #ff6b6b; }

/* The award breakdown on the solved panel. Three parts and a total, so the player can see that
   speed paid and a hint did not. */
.jl-lp-award {
  margin: 0 0 4px;
  font-size: 13px;
  color: #9fb0c9;
  font-variant-numeric: tabular-nums;
}

.jl-lp-total {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 800;
  color: #ffd54f;
  font-variant-numeric: tabular-nums;
}
.jl-lp-hint {
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--jl-line);
  border-radius: 8px;
  background: #1a222c;
  color: var(--jl-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.jl-lp-hint:disabled { opacity: .45; cursor: default; }
.jl-lp-hint:active:not(:disabled) { transform: scale(.96); }
.jl-lp-hint:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the board --------------------------------------------------------- */
.jl-lp-mid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
}

.jl-lp-board {
  position: relative;
  /* I1: WITHOUT THIS the browser scrolls while the player draws and the path is lost. The
     whole point of the game is the drag, so the drag must win every gesture. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* The paths sit UNDER the dot buttons, so a dot's number is never covered by a stroke. */
.jl-lp-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.jl-lp-cell {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  font-size: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  /* Empty cells are a barely-there disc, so the grid is legible without competing with the
     dots for attention. */
  transition: background-color 120ms linear;
}

/* A dot: the numbered endpoint of a pair. The NUMBER is the primary signal (SH-81) — colour
   is a second cue, never the only one. */
.jl-lp-cell.jl-lp-dot {
  font-size: calc(var(--dot-font, 15px));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9);
  /* A dark number on a saturated disc is the most legible pairing at small sizes. */
  color: #0b0e12;
  text-shadow: none;
  z-index: 2;
}

.jl-lp-cell:focus-visible { outline: 2px solid #fff; outline-offset: 2px; z-index: 3; }

/* ---- the veil --------------------------------------------------------- */
.jl-lp-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #0e1116;
  z-index: 4;
}

.jl-lp-veil[hidden] { display: none; }

.jl-lp-box { width: 100%; max-width: 340px; text-align: center; }

.jl-lp-box h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.jl-lp-sub {
  font-size: 15px;
  line-height: 1.5;
  opacity: .88;
  margin-bottom: 18px;
}

.jl-lp-go {
  display: inline-block;
  min-width: 150px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: #2b6cb0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jl-lp-go:active { transform: scale(.97); }
.jl-lp-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the guided first run --------------------------------------------- */
.jl-lp-tut {
  position: absolute;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  /* Fully opaque: a faded tutorial invites a tap on the board behind it, which is not yet
     accepting input. */
  background: #080a0e;
}

.jl-lp-tut[hidden] { display: none; }

.jl-lp-tut-panel {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.jl-lp-tut-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: #1f2937;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .8;
  margin-bottom: 10px;
}

.jl-lp-tut-panel h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}

.jl-lp-tut-body {
  font-size: 14.5px;
  line-height: 1.55;
  opacity: .9;
  margin: 14px 0 18px;
}

/* The demo board: the rule shown, not described. */
.jl-lp-demo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.jl-lp-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  gap: 4px;
}

.jl-lp-demo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  font-size: 17px;
  font-weight: 800;
  color: #0b0e12;
}

.jl-lp-demo-c0 { background: #3b82f6; }
.jl-lp-demo-c1 { background: #22c55e; }
.jl-lp-demo-c2 { background: #a855f7; }

/* The cell that the "cover everything" rule is about. */
.jl-lp-demo-gap {
  background: transparent;
  box-shadow: inset 0 0 0 2px #fbbf24;
  color: #fbbf24;
}

.jl-lp-demo-x {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: 800;
  color: #ef4444;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.jl-lp-demo-note {
  font-size: 12px;
  color: #fbbf24;
  font-weight: 700;
}

.jl-lp-tut-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jl-lp-tut-back,
.jl-lp-tut-skip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--jl-line);
  border-radius: 10px;
  background: transparent;
  color: var(--jl-fg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jl-lp-tut-skip { opacity: .7; }
.jl-lp-tut-back:focus-visible,
.jl-lp-tut-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The replay link on the start screen. */
.jl-lp-tut-link {
  display: block;
  margin: 14px auto 0;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- small screens (SH-21: 320px) ------------------------------------- */
@media (max-width: 359px) {
  .jl-lp-hud { gap: 6px; padding: 0 6px; height: 36px; }
  .jl-lp-lv { font-size: 11px; }
  .jl-lp-notice { font-size: 10px; }
  .jl-lp-score, .jl-lp-clock { font-size: 11px; }
  .jl-lp-hint { min-height: 28px; padding: 0 8px; font-size: 11px; }
  .jl-lp-mid { padding: 5px; }
}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jl-lp-cell { transition: none; }
  .jl-lp-go:active { transform: none; }
  .jl-lp-hint:active:not(:disabled) { transform: none; }
}