/* ==UserStyle==
@name           Lichess Streamer Layout
@namespace      github.com/ornicar/userstyles
@homepageURL    https://raw.githubusercontent.com/ornicar/userstyles/master/lichess.streamer.user.css
@version        1.1.2
@description    On lichess.org games, puts usernames and clocks around board for easier screen capture
@author         github.com/ornicar
==/UserStyle== */

@-moz-document domain("lichess.org") {
/* Change background to fixed color to allow blending into custom stream overlays */
body { background: #EDEBE9; }
body.dark { background: #161512; }

@media (prefers-color-scheme: dark) {
    body.system {
        background: #161512;
    }
}

/* Display board above clock drop shadows*/
.round__app__board {
  z-index: 2;
}

/* Adjustments to wide layout */
@media (min-width: 1260px) {
  /* Hide scrollbar and make board larger */
  body.playing {
    /* TODO: Might need to add extra adjustments for small v-heights */
    height: 100vh;
    overflow: hidden !important;

    /* Remove 2vmin bottom margin */
    margin: 0px;
    padding: 0px;
  }

  /* Make clocks bigger */
  .rclock .time {
    /*
     * TODO: needs !important because of setting later on
     * This should be refactored at some point when the narrower
     * layout gets updates
     */
    line-height: 36px !important;
    height: 36px;
    min-width: 8rem;
    justify-content: center;
    padding: 0px 0rem;
  }

  /*
   * Re-align the top "more time" plus button
   * to vertically center on expanded clock
   */
  .rclock-top .time, .rclock-top a.moretime {
    margin-top: 0px;
  }

  /* Layout to re-align board */
  .round {
    --chat-top-margin: calc(30px - 0.5rem);
    grid-template-areas: "side app app" "uchat app app";
    grid-template-rows: calc(var(--chat-top-margin) + var(---cg-height)) 30px;
    grid-row-gap: 0;
  }

  /* Remove underboard scoresheet */
  .round__underboard {
    display: none;
  }

  /* Re-align left sidebar to top of board */
  .round__side {
    margin-top: var(--chat-top-margin);
  }

  /* Vertically center list of spectators underneath chat */
  .round__underchat {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .chat__members {
    height: auto !important;
  }
}

@media (min-width: 800px), (orientation: landscape) {
  .round__app {
    grid-template-columns: minmax(calc(70vmin * var(---board-scale)), calc(100vh * var(---board-scale) - calc(var(---site-header-height) + var(---site-header-margin)) - 3rem)) minmax(240px, 400px);
    grid-template-rows: 30px 1fr auto min-content auto auto min-content auto 1fr 30px;
    grid-template-areas: 'user-top .' 'board .' 'board mat-top'  'board expi-top'  'board moves'  'board controls'  'board expi-bot'  'board mat-bot' 'board .'  'user-bot .'  'kb-move .';
    margin-top: .2em;
  }
  .round__app .rclock-top, .round__app .rclock-bottom {
    grid-area: 1 / 1 / 2 / 2;
  }
  .round__app .rclock-bottom {
    transform: translateY(calc(var(---cg-height) + 30px));
  }
  .round__app .round__app__table {
    grid-area: 4 / 2 / 6 / 3;
  }
  .rclock {
    /* that weird shit is required so the clock goes above the player since they share the same grid cell */
    justify-self: flex-end;
    z-index: 1;
  }
  .rclock .tour-rank,
  .rclock .moretime,
  .rclock .berserked {
    order: -1;
  }
  .rclock .bar {
    display: none;
  }
  .rclock .time {
    font-size: 1.7em !important;
    line-height: 30px;
    background: none;
  }
  .ruser {
    font-size: 1.4em ;
    padding: 0 .3em;
    line-height: 30px;
  }
  .ruser a {
    flex: none;
  }

  /* Move puzzle board down to match main game board (ornicar/userstyles#4) */
  main.puzzle {
    margin-top: calc(30px - 0.5em);
  }

  /* Horizontally align board between different views (game vs puzzle) */
  cg-container {
    right: auto;
    left: 0px;
  }

  .analyse__player_strip, .rclock {
    margin-right: calc(100% - var(--cg-width));
  }
}

#top .site-buttons a[title="Moderation"] {
  display: none;
}

}