/* BreakLobby hybrid v8 — true wide board, contained chess identities, full card artwork */

/* The supplied medallion is the artwork of the BreakLobby card, not a small badge. */
.hybrid-library-card {
  background: #050505;
}

.hybrid-library-card::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 3, 3, 0.02) 0 40%, rgba(5, 5, 5, 0.32) 62%, rgba(5, 5, 5, 0.96) 100%),
    linear-gradient(120deg, rgba(230, 183, 79, 0.1), transparent 52%);
}

.hybrid-library-card::after {
  display: none;
}

.hybrid-library-card .hybrid-library-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  transform: none;
}

.hybrid-library-card .hybrid-logo-medallion {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #050505;
  box-shadow: none;
}

.hybrid-library-card .hybrid-logo-medallion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 43%;
}

.hybrid-library-card .game-library-badge,
.hybrid-library-card .game-library-copy,
.hybrid-library-card .game-library-open {
  position: relative;
  z-index: 2;
}

.hybrid-library-card .game-library-badge {
  position: absolute;
}

/* Chess emblems now sit inside the piece body instead of hanging below it. */
.hybrid-chess-piece {
  inset: 3% 3% 5%;
  overflow: hidden;
  font-size: clamp(34px, 6.2vw, 112px);
  transform: none;
}

.hybrid-chess-symbol {
  transform: translateY(-2.5%);
}

.hybrid-chess-identity {
  left: 50%;
  top: 61%;
  bottom: auto;
  z-index: 4;
  width: 18%;
  min-width: 0;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: currentColor;
  font-size: clamp(0.28rem, 0.55vw, 0.55rem);
  opacity: 0.94;
}

.hybrid-chess-identity img,
.hybrid-chess-identity svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.82));
}

.hybrid-chess-identity.is-image {
  background: var(--identity-image) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.82)) saturate(1.08) contrast(1.04);
}

.hybrid-chess-identity.is-flag,
.hybrid-chess-identity.is-text {
  background: transparent;
}

.hybrid-square.has-dual-layer .hybrid-chess-piece {
  inset: 4% auto 5% 1%;
  width: 64%;
  font-size: clamp(28px, 4.65vw, 84px);
  transform: none;
}

/* Desktop is intentionally width-led: use the empty left/right room instead of
   shrinking the board to a percentage of the viewport height. */
@media (min-width: 761px) {
  .hybrid-screen {
    overflow-y: auto;
    padding-inline: clamp(4px, 0.45vw, 8px);
  }

  .hybrid-stage {
    width: 100%;
    max-width: none;
    flex: none;
    gap: 5px;
  }

  .hybrid-table-middle {
    width: max-content;
    max-width: 100%;
    grid-template-columns: clamp(66px, 5.1vw, 88px) auto clamp(66px, 5.1vw, 88px);
    gap: clamp(4px, 0.42vw, 7px);
  }

  .hybrid-board-wrap {
    width: min(74vw, calc(100vw - 164px), 1400px);
    max-width: none;
  }

  .hybrid-player-panel {
    min-height: clamp(76px, 9.2dvh, 94px);
    padding: clamp(4px, 0.45vw, 7px);
    gap: clamp(3px, 0.42vw, 7px);
  }

  .hybrid-match-header {
    min-height: 42px;
    padding-block: 3px;
  }

  .hybrid-control-bar {
    min-height: 46px;
    padding-block: 4px;
  }
}

@media (min-width: 1900px) {
  .hybrid-board-wrap {
    width: min(76vw, calc(100vw - 180px), 1480px);
  }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .hybrid-table-middle {
    grid-template-columns: 58px auto 58px;
    gap: 4px;
  }

  .hybrid-board-wrap {
    width: min(76vw, calc(100vw - 124px));
  }
}

@media (max-width: 760px) {
  .hybrid-chess-piece {
    inset: 4% 4% 6%;
    font-size: clamp(23px, 9.2vw, 50px);
  }

  .hybrid-chess-identity {
    top: 61%;
    width: 17%;
  }

  .hybrid-library-card .hybrid-logo-medallion img {
    object-position: center;
  }
}