Lichess Streamer Layout - Puzzle Racer Scroll fix by MordekainAroun

/* ==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; }

/* 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: auto !important;

    /* Remove 2vmin bottom margin */
    margin: 0px;
    padding: 0px;
    --zoom: 95 !important;
  }

  /* 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: 40px !important;
    height: 40px;
    min-width: 9rem;
    justify-content: center;
    padding: 0px 1rem;
  }

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

  /* 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: -.5em;
        }
        .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: 2em !important;
            line-height: 30px;
            background: none;
        }
        .ruser {
            padding: 0 .3em;
            line-height: 30px;
        }
        .ruser a {
            flex: none;
        }


        .material-top {
            grid-area: 1 / 1 / 2 / 2;
            
            transform: translateX(calc(var(--cg-width) / 2));
        }

        .material-bottom {
            grid-area: 1 / 1 / 2 / 2;
        }

        .round__app .material-bottom {
            transform: translate(calc(var(--cg-width) / 2), calc(var(--cg-height) + 30px));
        }


        .material {
            justify-self: start;
        }
    }

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