/* The top of a game played in the member space (template/components/game-top.php): the same bar on every game,
   the arrow back on the left, the name in the middle, the game's own buttons on the right. Loaded only in the space,
   whose pages are those of an app: no scroll bar, no pull that reloads, pages that melt into each other. */

/* No scroll bar anywhere in the space, whichever box scrolls (the page, the body the site makes scroll, a list). */
* {
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

html {
  overscroll-behavior-y: none;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.lc-gtop {
  position: relative;
  z-index: 2;
  view-transition-name: lc-gtop;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lc-gtop *,
.lc-gtop *::before,
.lc-gtop *::after {
  box-sizing: border-box;
}

/* Both sides share the room left, so that the name stays in the middle whatever the buttons. */
.lc-gtop__side {
  display: flex;
  flex: 1 1 0;
  gap: 8px;
  min-width: max-content;
}

.lc-gtop__side--end {
  justify-content: flex-end;
}

.lc-gtop__name {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.lc-gtop .lc-gtop__title {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-gtop .lc-gtop__sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .66);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty until the script writes it, it keeps its room: the name never moves. */
.lc-gtop .lc-gtop__sub:empty {
  visibility: hidden;
}

/* The second first name of the evening, which the couple may change: gold, with its pen. */
.lc-gtop button.lc-gtop__sub:enabled {
  color: #ffd98a;
  cursor: pointer;
}

.lc-gtop button.lc-gtop__sub:enabled::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lc-gtop button.lc-gtop__sub:disabled {
  cursor: default;
}

.lc-gtop .lc-gtop__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}

.lc-gtop .lc-gtop__btn:hover {
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  transform: translateY(-1px);
}

.lc-gtop .lc-gtop__btn:active {
  transform: scale(.94);
}

.lc-gtop .lc-gtop__btn:focus-visible,
.lc-gtop .lc-gtop__sub:focus-visible {
  outline: 3px solid rgba(255, 185, 56, .9);
  outline-offset: 3px;
}

.lc-gtop .lc-gtop__btn[hidden] {
  display: none;
}

/* A button that switches (the sound): one icon or the other. */
.lc-gtop__btn .lc-gtop__on,
.lc-gtop__btn[aria-pressed="true"] .lc-gtop__off {
  display: none;
}

.lc-gtop__btn[aria-pressed="true"] .lc-gtop__on {
  display: block;
}

@media (max-width: 359px) {
  .lc-gtop {
    gap: 6px;
  }

  .lc-gtop__side {
    gap: 6px;
  }

  .lc-gtop .lc-gtop__btn {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .lc-gtop .lc-gtop__title {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-gtop .lc-gtop__btn {
    transition: none;
  }
}

/* The night of the app under every game of the site played in the space, and the two quizzes (template/quiz/quiz.php,
   template/couple-parents/test.php) on one screen, their card under the bar. */
html,
body {
  background-color: #2a0f33;
}

.quiz-page .quiz-hero,
.cp-test-page .cp-hero {
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
}

.quiz-hero .lc-gtop,
.cp-hero .lc-gtop {
  margin-bottom: 18px;
}