/* ═══════════════ Trivia Rumble — mobile nav menu (MobileMenu board) ═══════════════
   Top sheet menu behind a hamburger on the shared page header. Injected by
   nav-menu.js. Desktop keeps the inline nav links; below 900px the links hide
   and the hamburger takes the Sign in spot. */

.mm-burger {
  display: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: transparent; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line);
  place-items: center; align-content: center; gap: 4px;
  padding: 0; -webkit-tap-highlight-color: transparent;
}
.mm-burger span {
  display: block; width: 16px; height: 2.5px; border-radius: 2px;
  background: var(--ink);
}
.mm-burger:active { transform: scale(0.96); }

@media (max-width: 900px) {
  .nav .nav-links { display: none; }
  .mm-burger { display: grid; }
}

/* The brand trims so the burger can stay on its row.
   
   At 320 the header needs 285 pixels of a 280 pixel row, so the burger wraps
   underneath and the header is two rows tall on every page of the site. Five
   pixels. This lives here rather than in the seven stylesheets that each draw
   this header, because this is the file that already owns what the header does
   on a phone: it is what hides the links and shows the burger. */
@media (max-width: 359px) {
  .brand { gap: 6px; }
  .brand-tiles { gap: 3px; }
  .brand-tiles i { width: 16px; height: 16px; border-radius: 5px; }
  .brand-name { font-size: 1.15rem; }
}

/* The desktop row, between the phone layout and the 1440 frame.

   The boards draw this header at 1440, with 72px of padding and 32px between
   links, and it needs 1154 pixels in English and 1233 in Greek. Below that the
   labels folded instead: «Τα στατιστικά μου» went onto three lines, and at 901
   the row was still 87 pixels wider than the window, so every Greek page with
   the full set of links scrolled sideways. The same thing at 19 pixels in
   English.

   So the labels hold their line, and the row gives up space in the order that
   costs least: first the padding and the gaps, then, below 1100, the wordmark,
   leaving the four tiles as the logo. The name stays in the link for a screen
   reader. At 901 the Greek row then needs 868 pixels.

   And if a label ever grows past that, the links drop under the brand rather
   than pushing the page sideways. This lives here for the same reason as the
   320 trim below: six stylesheets draw this header, and this file owns what it
   does as the window narrows. */
@media (min-width: 901px) {
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .nav .nav-links > * { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .nav { padding-left: 32px; padding-right: 32px; }
  .nav .nav-links { gap: 20px; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .nav { padding-left: 24px; padding-right: 24px; }
  .nav .nav-links { gap: 16px; }
  .nav .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

.mm-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: oklch(0.19 0.025 40 / 0.72);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.mm-scrim.is-open { opacity: 1; }

.mm-sheet {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  background: var(--bg-raise);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 18px 20px 24px;
  display: flex; flex-direction: column; gap: 18px;
  transform: translateY(-103%); opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.28s var(--ease);
}
.mm-sheet.is-open { transform: translateY(0); opacity: 1; }
/* The script sets .hidden on both when the menu is shut, and un-sets it a
   frame before it animates open, so it is already written against [hidden]
   meaning display none. A class selector outranks the browser's own
   [hidden] rule, so neither was ever actually hidden: the sheet sat off
   screen at opacity 0 with every one of its links still in the tab order and
   its dialog still in the accessibility tree. Tabbing through any page walked
   into a menu nobody could see. */
.mm-sheet[hidden], .mm-scrim[hidden] { display: none; }

.mm-head { display: flex; align-items: center; justify-content: space-between; }
.mm-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.mm-brand-tiles { display: flex; gap: 4px; }
.mm-brand-tiles i { width: 16px; height: 16px; border-radius: 5px; }
.mm-brand-tiles .t-coral { background: var(--coral); box-shadow: 0 2px 0 var(--coral-edge); }
.mm-brand-tiles .t-amber { background: var(--amber); box-shadow: 0 2px 0 var(--amber-edge); }
.mm-brand-tiles .t-teal  { background: var(--teal);  box-shadow: 0 2px 0 var(--teal-edge); }
.mm-brand-tiles .t-blue  { background: var(--blue);  box-shadow: 0 2px 0 var(--blue-edge); }
.mm-brand-name { font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: -0.02em; }

.mm-close {
  width: 40px; height: 40px; border-radius: 12px;
  background: transparent; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line);
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.mm-close:active { transform: scale(0.96); }

.mm-rows { display: flex; flex-direction: column; }
.mm-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px;
  border-bottom: 2px solid var(--line);
  font-weight: 800; font-size: 20px;
  color: var(--ink-dim); text-decoration: none;
}
.mm-row:last-child { border-bottom: 0; }
.mm-row.is-active { color: var(--ink); }
.mm-dot { width: 14px; height: 14px; border-radius: 5px; flex: none; }
.mm-dot.mm-coral { background: var(--coral); box-shadow: 0 2px 0 var(--coral-edge); }
.mm-dot.mm-amber { background: var(--amber); box-shadow: 0 2px 0 var(--amber-edge); }
.mm-dot.mm-teal  { background: var(--teal);  box-shadow: 0 2px 0 var(--teal-edge); }
.mm-dot.mm-blue  { background: var(--blue);  box-shadow: 0 2px 0 var(--blue-edge); }
.mm-dot.mm-ghost { box-shadow: inset 0 0 0 2px var(--line); }

.mm-cta {
  display: block; text-align: center; text-decoration: none;
  border-radius: var(--r-ctl); padding: 16px;
  background: var(--gold); color: var(--gold-ink);
  font-weight: 800; font-size: 18px;
  box-shadow: 0 4px 0 var(--gold-edge);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.mm-cta:active { transform: translateY(3px) scale(0.99); box-shadow: 0 1px 0 var(--gold-edge); }

.mm-join {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-sink); border: 2px solid var(--line); border-radius: var(--r-ctl);
  padding: 6px 6px 6px 18px;
}
.mm-join:focus-within { border-color: var(--gold); }
.mm-code {
  flex: 1; min-width: 0;
  font: inherit; font-weight: 900; font-size: 16px; letter-spacing: 0.28em;
  background: transparent; border: 0; outline: none; color: var(--ink);
  text-transform: uppercase;
}
.mm-code::placeholder { color: oklch(0.5 0.02 60); }
.mm-joinbtn {
  font: inherit; font-weight: 700; font-size: 14px;
  padding: 10px 20px; border-radius: 11px;
  background: transparent; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line); color: var(--ink-dim);
  -webkit-tap-highlight-color: transparent;
}
.mm-joinbtn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .mm-sheet, .mm-scrim { transition: none; }
}

/* The language row closes the list rather than joining it: it changes the
   whole site rather than navigating within it. Hairline above, and the code
   itself set in its own language so it is recognisable to someone who cannot
   read the current one. */
.mm-row.mm-lang { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }