/* brawl.css — the three-region arena layout for the Brawl page.
 *
 * It builds on typing.css (the colour palette + the login screen) and
 * learn.css (the hands-and-keyboard picture). Everything new here is the
 * grid that puts the fight in the centre, the scoreboard on the right, and the
 * miniature keyboard along the bottom — plus the "you fell" card.
 */

/* JetBrains Mono, self-hosted (the .woff2 files sit next to this file) so the
 * very legible digits and clear 1/l/I, 0/O work with no internet at all. The
 * monster word labels in BrawlScene.js ask for this family by name. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
}

/* The arena can be taller than the window (fight + keyboard), so lay the page
 * out from the top and let it scroll, instead of vertically centring (which
 * would tuck the top of a tall page up under the nav bar). */
body {
  justify-content: flex-start;
  padding-bottom: 1.5rem;
}

/* ----- the three-region grid --------------------------------------------- */

/* Same guard as #game-over: the grid below must not override `hidden`, or the
 * arena would show through the login screen before a weaver is picked. */
#brawl-screen[hidden] { display: none; }
#brawl-screen {
  display: grid;
  grid-template-columns: 1fr 250px;
  grid-template-areas:
    "arena  panel"
    "keyboard keyboard";
  gap: 14px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px;
}

#arena { grid-area: arena; display: flex; justify-content: center; }
#score-panel { grid-area: panel; }
#keyboard-strip { grid-area: keyboard; }

/* ----- the fight (centre) ------------------------------------------------- */

#game-container {
  position: relative;
  width: 760px;
  height: 560px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
#game-container canvas { display: block; border-radius: 12px; }

/* The key-capture input is invisible but focusable — the same trick the world's
 * typing overlay uses. It must stay in the layout (not display:none) or the
 * browser won't keep focus on it. */
#brawl-input {
  position: absolute;
  opacity: 0;
  width: 2px;
  height: 2px;
  border: none;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* The start screen and the "you fell!" card both float over the canvas as a
 * dark veil with a card. They're only shown when NOT hidden — without this
 * guard, the `display: flex` below would beat the browser's
 * `[hidden] { display: none }` and the veil would cover the arena mid-fight. */
#game-over[hidden], #start-overlay[hidden] { display: none; }
#game-over, #start-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 19, 42, 0.78);
  cursor: pointer;
  z-index: 5;
}
#game-over .go-card, #start-overlay .go-card {
  text-align: center;
  background: var(--panel);
  border: 1px solid #4a4770;
  border-radius: 14px;
  padding: 1.6rem 2.4rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
#game-over h2 { color: var(--error); margin: 0 0 0.4rem; font-size: 2rem; }
#start-overlay h2 { color: var(--gold); margin: 0 0 0.4rem; font-size: 2.2rem; }
#game-over .go-score { color: var(--gold); font-size: 2.6rem; font-weight: 700; margin: 0.2rem 0; }
.go-card .go-detail { color: var(--pending); margin: 0.2rem 0 0.8rem; line-height: 1.5; }
#game-over .go-best { color: var(--correct); font-weight: 700; margin: 0.3rem 0; }
.go-card .go-again { color: var(--text); margin-top: 0.9rem; }
.go-card kbd {
  background: #14132a; border: 1px solid #4a4770; border-radius: 5px;
  padding: 0.05rem 0.4rem; font-family: "Courier New", monospace;
}

/* ----- the scoreboard (right) -------------------------------------------- */

#score-panel { display: flex; flex-direction: column; gap: 12px; }
.score-block {
  background: var(--panel);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.score-block h2 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pending);
}
.big-score {
  font-family: "Courier New", monospace;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.big-score.gold { color: var(--gold); }
.score-block .sub { color: var(--pending); margin-top: 0.3rem; font-size: 0.9rem; }

#leaderboard { list-style: none; margin: 0; padding: 0; }
#leaderboard li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
}
#leaderboard li:last-child { border-bottom: none; }
#leaderboard .rank { color: var(--pending); width: 1.4rem; }
#leaderboard .who { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
#leaderboard .pts { color: var(--gold); font-family: "Courier New", monospace; font-weight: 700; }
#leaderboard li.me .who { color: var(--correct); font-weight: 700; }
#leaderboard .empty { color: var(--pending); font-style: italic; border-bottom: none; }

/* ----- the mode picker (Easy / Normal / Hard) ---------------------------- */

#mode-picker { display: flex; gap: 6px; }
.mode-btn {
  flex: 1;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.4rem 0;
  border-radius: 7px;
  border: 1px solid #4a4770;
  background: #1c1b2e;
  color: var(--text);
}
.mode-btn:hover { border-color: var(--gold); }
.mode-btn.active {
  background: var(--gold);
  color: #1c1b2e;
  border-color: var(--gold);
  font-weight: 700;
}

/* ----- confetti (a record-breaking run) ---------------------------------- */

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* clicks still reach the game-over card beneath */
  z-index: 10;
}
.confetti i {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-14px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(600px) rotate(540deg); opacity: 0.85; }
}

/* ----- the miniature keyboard (bottom) ----------------------------------- */

#keyboard-strip {
  display: flex;
  justify-content: center;
  background: var(--panel);
  border-radius: 12px;
  padding: 0.6rem;
}
/* The HandKeyboard SVG scales by its viewBox, so a fixed height shrinks the
 * whole picture neatly into a strip. (Overrides learn.css's full-size rule.) */
#keyboard-strip #hand-keyboard { width: auto; }
#keyboard-strip #hand-keyboard svg { height: 215px; width: auto; }

/* On a narrow window, stack the scoreboard under the fight. */
@media (max-width: 880px) {
  #brawl-screen {
    grid-template-columns: 1fr;
    grid-template-areas: "arena" "panel" "keyboard";
  }
}

/* The "N free plays left today" counter under the start prompt. */
.plays-left {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #8a86b8;
  font-style: italic;
}

/* Links inside an overlay card (the paywall's "See the Family plan") — themed to
   match the game rather than the browser's default underlined blue. */
.go-card a {
  color: #e8c45a;
  font-weight: 600;
  text-decoration: none;
}
.go-card a:hover {
  text-decoration: underline;
}

/* Footer links on the login screen (Privacy · Family plan). */
.hint a { color: #e8c45a; text-decoration: none; }
.hint a:hover { text-decoration: underline; }