@theme-color: #8b5a2b;
@theme-color-highlighted: #a8713d;
@background-color: #222629;
@dark-accent-color: #2e353b;
@table-color: #232a34;
@table-border-color: #3c3333;
@tile-face: #f8f4ec;
@tile-border: #2d2d2d;
@pip-color: #1a1a1a;

@import "core.less";

body {
  color: white;
}

body.dominos-lobby #low-padding {
  min-height: calc(100vh - 72px);
  overflow: hidden;
}

body.dominos-lobby #dominos-play-area {
  overflow: hidden;
}

#board-row {
  max-width: 100%;
}

.dominos-play-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 920px;
  margin: 8px auto 0;
  overflow: hidden;
}

.dominos-slot-top {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.dominos-table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: clamp(6px, 1.5vw, 14px);
}

.dominos-slot-side {
  flex: 0 0 120px;
  width: 120px;
  max-width: 22vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dominos-board-wrap {
  flex: 1 1 640px;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.dominos-slot-bottom {
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding: 4px 4px 6px;
  overflow: visible;
}

#dominos-position-1 .dominos-player-col {
  margin: 0 auto;
}

#dominos-position-2 .other-player,
#dominos-position-5 .other-player {
  width: 100%;
  max-width: 120px;
  margin-left: auto;
  margin-right: auto;
}

// Side players sit in a narrow 120px column, so stack the avatar above the name and
// let the name wrap/center instead of overflowing horizontally and getting clipped.
#dominos-position-2 .other-player-info,
#dominos-position-5 .other-player-info {
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
}

#dominos-position-2 .buddy-avatar,
#dominos-position-5 .buddy-avatar {
  margin-bottom: 0;
  bottom: 0;
}

#dominos-position-2 .other-player-info-text,
#dominos-position-5 .other-player-info-text {
  min-width: 0;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}

// Keep side names compact on wider screens; small-screen sizing is handled by the
// responsive .other-player-info rules below.
@media (min-width: 576px) {
  #dominos-position-2 .other-player-info-text,
  #dominos-position-5 .other-player-info-text {
    font-size: 0.8rem;
  }
}

.dominos-players-1 .dominos-slot-top,
.dominos-players-1 .dominos-slot-side {
  display: none;
}

.dominos-players-2 .dominos-slot-side {
  display: none;
}

.dominos-players-3 .dominos-slot-top {
  display: none;
}

body:not(.dominos-lobby) #low-padding {
  overflow-x: hidden;
  max-width: 100%;
}

#dominos-table {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 320px;
  min-height: 320px;
  max-height: 320px;
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 12px 8px;
  background: linear-gradient(
    165deg,
    lighten(@table-color, 5%) 0%,
    @table-color 42%,
    darken(@table-color, 4%) 100%
  );
  border: 1px solid fade(@table-border-color, 85%);
  border-radius: 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 76px;
  grid-template-areas:
    "chain"
    "footer";
  --dominos-boneyard-reserve: 50px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 fade(white, 7%),
    0 0 0 1px fade(@theme-color-highlighted, 14%),
    0 4px 18px fade(black, 32%);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, fade(white, 5%) 0%, transparent 55%);
  }

  &.dim {
    opacity: 0.65;
  }
}

.other-player,
.dominos-my-player {
  background-color: @dark-accent-color;
  padding: 5px;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
}

.other-player {
  overflow: hidden;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
  }
}

.dominos-my-player {
  overflow: hidden !important;
}

.dominos-turn-highlight() {
  position: relative;
  outline: 3px solid @theme-color !important;
  outline-offset: -3px !important;
  animation: dominos-turn-outline-pulse 2s ease 0s infinite;

  &::after {
    content: none !important;
    display: none !important;
  }
}

.other-player.current-turn {
  .dominos-turn-highlight();
}

.dominos-my-player.current-turn,
.dominos-my-player.my-turn {
  .dominos-turn-highlight();
}

@keyframes dominos-turn-outline-pulse {
  0%,
  100% {
    outline-width: 3px;
  }
  50% {
    outline-width: 4px;
  }
}

.dominos-my-player {
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
}

.dominos-player-col {
  margin-bottom: 8px;
  min-width: 0;
  max-width: 100%;
}

.other-player-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 4px;
}

#me-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 auto;
  padding: 2px 12px 4px;
  border-radius: 6px;
}

.other-player-info-text,
#me-info-main-text {
  display: inline-block;
  min-width: 0;
  text-align: left;
  cursor: default;
  line-height: 1.2;
}

#me-info-row,
#dominos-position-me {
  margin-top: 8px;
  padding-top: 4px;
}

.other-player-info .buddy-avatar,
#me-info .buddy-avatar {
  margin-bottom: 0;
  bottom: 0;
  flex-shrink: 0;
}

.other-player-info > div:has(.buddy-avatar),
.other-player-info > div[style*="position: relative"][style*="display: inline-block"],
#me-info > div:has(.buddy-avatar),
#me-info > div[style*="position: relative"][style*="display: inline-block"] {
  position: relative !important;
  display: inline-block !important;
  width: fit-content !important;
  flex-shrink: 0;
  vertical-align: middle !important;
}

@media (min-width: 768px) {
  .other-player-info-text,
  #me-info-main-text {
    min-width: 130px;
  }
}

@media (max-width: 575.98px) {
  .other-player-info,
  #me-info {
    font-size: 0.8rem;
  }
}

@media (max-width: 400.98px) {
  .other-player-info,
  #me-info {
    font-size: 0.6rem;
  }
}

// Room themes: turn ring uses inset outline (see .dominos-turn-highlight) so overflow hidden on the card does not clip it.
body.winter-theme .dominos-my-player.current-turn,
body.winter-theme .dominos-my-player.my-turn,
body.friday-night-lights-theme .dominos-my-player.current-turn,
body.friday-night-lights-theme .dominos-my-player.my-turn,
body.valentine-theme .dominos-my-player.current-turn,
body.valentine-theme .dominos-my-player.my-turn,
body.lucky-shamrock-theme .dominos-my-player.current-turn,
body.lucky-shamrock-theme .dominos-my-player.my-turn,
body.bunny-day-theme .dominos-my-player.current-turn,
body.bunny-day-theme .dominos-my-player.my-turn,
body.spring-theme .dominos-my-player.current-turn,
body.spring-theme .dominos-my-player.my-turn,
body.sunshine-theme .dominos-my-player.current-turn,
body.sunshine-theme .dominos-my-player.my-turn {
  position: relative !important;
}

// Bottom-right theme corners attach to #my-hand / .opponent-hand-preview because
// #me-info only covers the player header, not the domino row below it.
.dominos-player-bottom-corner(@image, @transform: none) {
  content: "\00a0" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 50px !important;
  height: 50px !important;
  background-image: url(@image) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: bottom right !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: @transform !important;
}

.dominos-theme-hand-corners(@image, @transform: none) {
  .dominos-my-player {
    position: relative !important;

    #me-info::after {
      content: none !important;
      display: none !important;
    }

    #my-hand {
      position: static !important;
      overflow: visible !important;
    }

    #my-hand::before {
      .dominos-player-bottom-corner(@image, @transform);
    }
  }

  &.dominos-lobby .dominos-my-player {
    #my-hand::before {
      content: none !important;
      display: none !important;
    }

    &::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      bottom: 0 !important;
      right: 0 !important;
      width: 50px !important;
      height: 50px !important;
      background-image: url(@image) !important;
      background-repeat: no-repeat !important;
      background-size: 100% 100% !important;
      background-position: bottom right !important;
      pointer-events: none !important;
      z-index: 1 !important;
      transform: @transform !important;
    }
  }

  .other-player.current-turn,
  .other-player.my-turn {
    .other-player-info::before {
      content: none !important;
      display: none !important;
    }

    .opponent-hand-preview {
      position: static !important;
      overflow: visible !important;
    }

    .opponent-hand-preview::before {
      .dominos-player-bottom-corner(@image, @transform);
    }
  }
}

body.winter-theme {
  .dominos-theme-hand-corners("/frost-corner.svg", rotate(180deg));
}

body.friday-night-lights-theme {
  .dominos-theme-hand-corners("/football-corner-goalpost-bottom-right.svg");
}

body.valentine-theme {
  .dominos-theme-hand-corners("/valentine-corner-hearts-topLeft.svg", rotate(180deg));
}

body.lucky-shamrock-theme {
  .dominos-theme-hand-corners("/stpatty-corner-pot-gold-bottom-right.svg");
}

body.bunny-day-theme {
  .dominos-theme-hand-corners("/easter-corner-eggs-bottom-right.svg");
}

body.spring-theme {
  .dominos-theme-hand-corners("/spring-corner-bottom-right.svg");
}

body.sunshine-theme {
  .dominos-theme-hand-corners("/sunshine-corner-sun-bottom-right.svg");
}

// Winter, football, and valentine define an extra avatar-wrapper rule in core.less that
// (via less.js, which lacks :has() support) ends up setting `.other-player-info { position:
// relative }`. That makes core.less's relocated bottom-right corner land at the bottom-right
// of the info row (mid-card) instead of overlapping the real card corner, i.e. a stray
// corner. Dominos supplies the real bottom corner via .opponent-hand-preview::before, so
// suppress only that stray info-row corner. Do NOT suppress the top-left card corner
// (::before) or the #me-info corner: those are wanted and must stay visible while a card is
// highlighted, matching the other seasonal themes (sunshine, spring, etc.). The :not(#me-info)
// keeps specificity in line with the core.less rule it overrides.
body.winter-theme,
body.friday-night-lights-theme,
body.valentine-theme {
  .other-player.current-turn:not(#me-info) .other-player-info::before,
  .other-player.my-turn:not(#me-info) .other-player-info::before {
    content: none !important;
    display: none !important;
  }
}

#dominos-chain-wrap {
  position: relative;
  z-index: 2;
  grid-area: chain;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  // The boneyard lives in the separate footer grid row below, so the chain does not need to
  // reserve a strip on the left for it. Symmetric padding lets the snake center over the full
  // board width: no dead gap on the left, longer straight runs, and room for larger tiles.
  padding: 4px 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dominos-boneyard-wrap {
  position: relative;
  // Sit above #dominos-chain-wrap (z-index: 2) so the boneyard's "can draw" highlight,
  // which extends slightly above the pile (inset: -5px), is not painted over at the top.
  z-index: 3;
  grid-area: footer;
  flex: 0 0 76px;
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 4px;
  width: 100%;
  box-sizing: border-box;
}

#dominos-boneyard {
  display: flex;
  align-items: flex-end;
  flex: 0 0 var(--dominos-boneyard-reserve, 50px);
  width: var(--dominos-boneyard-reserve, 50px);
  max-width: var(--dominos-boneyard-reserve, 50px);
  transform: scale(0.82);
  transform-origin: bottom left;
}

#dominos-chain {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  --chain-half: 38px;
  --chain-pip: 7px;

  // The snake is laid on a grid of half-tile cells: each cell is --chain-half square. A horizontal
  // tile spans 2 columns, the vertical corner tile spans 2 rows, and tiles fill their grid area so
  // the chain reads as evenly spaced dominoes with a clean bridging corner at every turn. The small
  // gap is the seam between tiles.
  &.dominos-chain-snake {
    display: grid;
    justify-content: center;
    align-content: center;
    column-gap: 2px;
    row-gap: var(--chain-row-gap, 2px);
  }

  .domino-tile {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    flex-shrink: 0;

    &.horizontal {
      flex-direction: row;

      .domino-half {
        width: 50%;
        height: 100%;
      }

      .domino-divider {
        width: 2px;
        height: 100%;
      }
    }

    // Vertical corner tile spans two rows plus the gap between them. Keep each pip-half close to a
    // cell so the two halves line up with the runs they join, but let them shrink slightly so the
    // divider always keeps its seam. The tile's border-box borders (4px) eat more than the row-gap
    // (2px), so a non-shrinking layout would leave the divider with negative space and collapse it,
    // hiding the line that separates the two halves on a vertical tile.
    &:not(.horizontal) {
      flex-direction: column;

      .domino-half {
        width: 100%;
        height: var(--chain-half);
        flex: 0 1 var(--chain-half);
      }

      .domino-divider {
        width: 100%;
        height: auto;
        flex: 1 0 auto;
        min-height: 2px;
      }
    }
  }

  .domino-pip {
    width: var(--chain-pip);
    height: var(--chain-pip);
  }
}

.domino-placement-zone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
  align-self: flex-end;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  font: inherit;
  color: inherit;
  vertical-align: bottom;
  appearance: none;
  -webkit-appearance: none;

  .domino-placement-zone-inner {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(6, 214, 160, 0.12);
    box-shadow: none;
    outline: 3px dashed rgba(6, 214, 160, 0.55);
    outline-offset: 0;
    line-height: 0;
    vertical-align: bottom;
    transition: background 0.12s ease, box-shadow 0.12s ease, outline-color 0.12s ease;

    .domino-tile.placement-preview {
      opacity: 0.6;
      pointer-events: none;
      box-shadow: none;
      margin: 0;
      vertical-align: bottom;
    }
  }

  &:hover,
  &:focus-visible {
    outline: none;
  }

  &:hover .domino-placement-zone-inner,
  &:focus-visible .domino-placement-zone-inner {
    outline-color: #06d6a0;
    background: rgba(6, 214, 160, 0.22);
    box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);
    animation: dominos-placement-pulse 1.4s ease-in-out infinite;

    .domino-tile.placement-preview {
      opacity: 0.95;
    }
  }
}

// In the snake grid the placement zone is a grid cell itself, so let it (and its preview tile) fill
// the cell exactly like a placed tile.
#dominos-chain.dominos-chain-snake .domino-placement-zone {
  width: 100%;
  height: 100%;
  display: flex;

  .domino-placement-zone-inner {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .domino-tile.placement-preview {
    width: 100%;
    height: 100%;
  }
}

@keyframes dominos-placement-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

.dominos-boneyard-empty {
  font-size: 0.85rem;
  opacity: 0.65;
  padding: 12px 4px;
}

.dominos-boneyard-pile {
  position: relative;
  display: inline-block;
  cursor: default;
  user-select: none;
  border-radius: 8px;
  transition: transform 0.12s ease;

  &.dominos-boneyard-single {
    min-width: 0;
  }

  .dominos-boneyard-tile {
    position: absolute;
    pointer-events: none;
    margin: 0;
  }

  .dominos-boneyard-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    z-index: 200;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  &.can-draw {
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      inset: -5px;
      border: 2px dashed #06d6a0;
      border-radius: 10px;
      pointer-events: none;
      animation: dominos-placement-pulse 1.4s ease-in-out infinite;
    }

    &:hover,
    &:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }
  }
}

.dominos-instruction {
  font-size: 1rem;
  color: @theme-color-highlighted;
  padding: 6px 12px 10px;
}

#dominos-instruction-row {
  margin-top: 0;
}

#dominos-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
  padding-bottom: 4px;
}

.domino-tile {
  display: inline-flex;
  flex-direction: column;
  width: 38px;
  background: @tile-face;
  border: 2px solid @tile-border;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  cursor: default;
  user-select: none;
  flex-shrink: 0;

  &.horizontal {
    flex-direction: row;
    width: auto;
    height: 38px;

    .domino-half {
      width: 38px;
      height: 100%;
    }

    .domino-divider {
      width: 2px;
      height: 100%;
    }
  }

  &.domino-can-play {
    cursor: pointer;

    &:hover,
    &:focus-visible {
      box-shadow: 0 0 0 3px lighten(@theme-color-highlighted, 12%), 0 4px 12px fade(@theme-color-highlighted, 35%);
      transform: translateY(-4px);
      outline: none;
    }
  }

  &.selected {
    box-shadow: 0 0 0 3px #06d6a0, 0 2px 8px rgba(0, 0, 0, 0.45);
    transform: translateY(-4px);
  }

  &.face-down {
    background: linear-gradient(135deg, #5c4033, #3d2a22);
    border-color: #2a1c16;

    .domino-half,
    .domino-divider {
      visibility: hidden;
    }
  }
}

.domino-half {
  width: 100%;
  height: 38px;
  position: relative;
}

.domino-divider {
  height: 2px;
  width: 100%;
  background: @tile-border;
}

.domino-pip {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: @pip-color;
}

#my-hand {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px 10px;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
  overflow-x: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
  }
}

#my-hand .domino-tile {
  flex-shrink: 1;
  width: var(--hand-tile-w, 38px);
  min-width: 0;

  .domino-half {
    height: var(--hand-tile-w, 38px);
  }

  .domino-pip {
    width: var(--hand-pip-size, 7px);
    height: var(--hand-pip-size, 7px);
  }
}

.opponent-hand-preview {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 2px 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 62px;
  overflow: hidden;

  .dominos-opponent-pile {
    flex-shrink: 0;
  }

  .dominos-opponent-pile .domino-tile {
    width: 28px;

    .domino-half {
      height: 27px;
    }
  }

  .dominos-opponent-pile .dominos-boneyard-count {
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    font-size: 0.68rem;
    line-height: 18px;
  }
}

@media (min-width: 768px) {
  .opponent-hand-preview {
    min-height: 76px;
    padding-bottom: 8px;

    .dominos-opponent-pile .domino-tile {
      width: 34px;

      .domino-half {
        height: 33px;
      }
    }
  }
}

@media (min-width: 768px) {
  #dominos-table {
    --dominos-boneyard-reserve: 58px;
  }

  .domino-placement-zone .domino-placement-zone-inner {
    outline-width: 3px;
  }

  #dominos-boneyard .dominos-boneyard-pile .dominos-boneyard-tile {
    width: 48px;

    .domino-half {
      height: 48px;
    }
  }

  #my-hand .domino-tile {
    width: var(--hand-tile-w, 48px);

    &.horizontal {
      height: var(--hand-tile-w, 48px);

      .domino-half {
        width: var(--hand-tile-w, 48px);
      }
    }

    .domino-half {
      height: var(--hand-tile-w, 48px);
    }

    .domino-pip {
      width: var(--hand-pip-size, 9px);
      height: var(--hand-pip-size, 9px);
    }
  }

  #dominos-chain {
    --chain-half: 48px;
    --chain-pip: 9px;
  }
}

@media (min-width: 1280px) {
  body.bbg-side-rails-active #dominos-table {
    max-width: ~"min(640px, calc(100vw - (2 * @{bbg-side-rail-reserved}) - 32px))";
  }
}

// Clip hand tiles only; inset outline turn ring is not clipped by overflow on the same element.
body:not(.dominos-lobby) #my-hand {
  overflow: hidden !important;
}

#room-info-row {
  justify-content: center;
  margin-bottom: 5px !important;

  .btn {
    font-size: 0.9rem;
    padding-top: 0;
    padding-bottom: 0;
  }
}

#room-name {
  color: white;
  background: @theme-color;
  cursor: pointer;
  line-height: 31px;

  &:hover {
    background-color: @theme-color-highlighted;
  }

  &.dim {
    opacity: 0.65;
  }

  &.disabled {
    opacity: 0.65;
  }

  &.disabled:hover {
    background-color: @theme-color;
    cursor: default;
  }
}

#room-info-group.has-score-button #room-name {
  border-right: 2px solid #222629;
}

#room-info-group .btn.info-text {
  max-width: 100%;
}

#dominos-score-button {
  flex-shrink: 0;
  white-space: nowrap;
  background-color: @theme-color;
  color: white;
  line-height: 31px;
  cursor: pointer;

  &:hover {
    background-color: @theme-color-highlighted;
  }

  &.disabled {
    opacity: 0.65;
    cursor: default;

    &:hover {
      background-color: @theme-color;
    }
  }
}

#score-modal .scoreboard-heading {
  margin-top: 8px;
  margin-bottom: 4px;
  padding-right: 2.5rem;
}

body.modal-open #score-modal.show {
  top: 0 !important;
  display: flex !important;
  flex-direction: column;
  padding: 0.5rem 0;
  box-sizing: border-box;
  overflow: hidden !important;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
}

body.modal-open #score-modal.show .modal-dialog {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: calc(100% - 1rem);
  max-width: 920px;
  min-height: 0;
  max-height: 100%;
  margin: 0 auto !important;
  overflow: hidden !important;
}

body.modal-open #score-modal.show .modal-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

body.modal-open #score-modal.show #scoreboard {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

body.modal-open #score-modal.show #scoreboard > #score-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 3;
  float: none;
  margin: 0;
  padding: 0.5rem;
}

body.modal-open #score-modal.show #scoreboard > .scoreboard-heading,
body.modal-open #score-modal.show #scoreboard > #dominos-score-goal {
  flex-shrink: 0;
}

body.modal-open #score-modal.show .gin-scoreboard-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 3rem;
}

body.modal-open #score-modal.show #close-scoreboard-button {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-top: 0.5rem;
}

.gin-scoreboard-details-section {
  margin-top: 0.25rem;
}

.gin-scoreboard-more-details-link a {
  color: @theme-color-highlighted;
  text-decoration: underline;
}

.gin-scoreboard-round-tabs .nav-tabs {
  border-bottom-color: fade(@theme-color-highlighted, 35%);
  flex-wrap: nowrap;
  overflow-x: auto;
}

.gin-scoreboard-round-tabs .nav-link {
  color: fade(white, 75%);
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
}

.gin-scoreboard-round-tabs .nav-link.active {
  color: white;
  background: fade(@theme-color-highlighted, 25%);
  border-color: fade(@theme-color-highlighted, 45%);
}

.gin-hand-result-summary {
  font-size: 0.95rem;
  line-height: 1.35;
}

.gin-hand-result-section-label {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gin-hand-result-table {
  margin-bottom: 0;
}