/* BreakLobby hybrid v6 — king capture, captured-checker jail, and spacious board */
.hybrid-stage {
  width: min(1780px, 100%);
}

.hybrid-table-middle {
  grid-template-columns: clamp(82px, 7.1vw, 118px) auto clamp(82px, 7.1vw, 118px);
  gap: clamp(7px, 0.8vw, 13px);
}

.hybrid-board-wrap {
  width: min(74dvh, calc(100vw - 245px), 1040px);
}

.hybrid-player-panel .hybrid-bar-tray.has-checkers {
  position: relative;
  overflow: hidden;
  border-width: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 218, 150, 0.08) 10px 11px),
    linear-gradient(180deg, rgba(92, 30, 14, 0.98), rgba(14, 8, 6, 0.99));
  box-shadow:
    0 0 0 1px rgba(18, 7, 3, 0.92),
    0 0 20px rgba(235, 72, 37, 0.34),
    inset 0 1px rgba(255, 226, 170, 0.16);
}

.hybrid-player-panel .hybrid-bar-tray.requires-entry {
  border-color: #ff9b55;
  box-shadow:
    0 0 0 2px rgba(255, 209, 116, 0.18),
    0 0 25px rgba(255, 92, 40, 0.52),
    inset 0 1px rgba(255, 238, 193, 0.2);
}

.hybrid-player-panel .hybrid-bar-tray > span {
  color: #ffe1a2;
  font-size: clamp(0.48rem, 0.62vw, 0.66rem);
}

.hybrid-player-panel .hybrid-bar-tray.requires-entry > span {
  color: #fff7d2;
  text-shadow: 0 0 9px rgba(255, 166, 74, 0.82);
}

.hybrid-player-panel .hybrid-bar-tray button {
  grid-template-columns: auto minmax(0, 1fr) auto;
  place-content: stretch;
  align-items: center;
  column-gap: 3px;
  min-height: 38px;
}

.hybrid-player-panel .hybrid-bar-tray button small {
  color: inherit;
  font-size: clamp(0.38rem, 0.47vw, 0.5rem);
  font-weight: 1000;
  letter-spacing: 0.04em;
}

.hybrid-captured-row {
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
}

.hybrid-captured-token {
  width: clamp(12px, 1.05vw, 17px);
  aspect-ratio: 1;
  margin-left: -4px;
  border: 1px solid #6f4726;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff2d2, #d4ae77 58%, #76502d 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.66), inset 0 1px rgba(255, 255, 255, 0.72);
}

.hybrid-captured-token.black {
  border-color: #a77b3d;
  background: radial-gradient(circle at 34% 28%, #514e47, #171614 56%, #020202 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.78), inset 0 1px rgba(255, 255, 255, 0.16);
}

.hybrid-milestone-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at center, rgba(104, 62, 19, 0.28), transparent 48%),
    rgba(3, 3, 3, 0.82);
  backdrop-filter: blur(7px);
}

.hybrid-milestone-overlay.is-open {
  display: grid;
}

.hybrid-milestone-card {
  width: min(560px, 96vw);
  padding: clamp(24px, 4vw, 42px);
  border: 2px solid #d8a447;
  border-radius: 18px;
  color: #f8e8bf;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(231, 180, 83, 0.18), transparent 42%),
    linear-gradient(150deg, #25180f, #090806 62%, #1c110b);
  box-shadow:
    0 34px 84px rgba(0, 0, 0, 0.78),
    0 0 0 5px rgba(14, 8, 4, 0.94),
    0 0 42px rgba(222, 164, 63, 0.3),
    inset 0 1px rgba(255, 235, 188, 0.2);
  animation: hybridMilestoneIn6 220ms ease-out both;
}

.hybrid-milestone-emblem {
  width: clamp(72px, 12vw, 104px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border: 2px solid #e1b75c;
  border-radius: 50%;
  color: #090806;
  background: radial-gradient(circle at 34% 28%, #fff0ad, #d6a038 58%, #76501d);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.62), inset 0 2px rgba(255, 255, 255, 0.48);
  font: 900 clamp(2.3rem, 6vw, 4rem)/1 Georgia, serif;
}

.hybrid-milestone-card > p:first-of-type {
  margin: 0 0 7px;
  color: #e2af50;
  font-size: clamp(0.68rem, 1.4vw, 0.82rem);
  font-weight: 1000;
  letter-spacing: 0.18em;
}

.hybrid-milestone-card h2 {
  margin: 0;
  color: #fff0c4;
  font: 900 clamp(1.6rem, 4.2vw, 2.7rem)/1.05 Georgia, serif;
  letter-spacing: 0.035em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72);
}

.hybrid-milestone-card > p:nth-of-type(2) {
  max-width: 460px;
  margin: 14px auto 20px;
  color: rgba(248, 231, 194, 0.8);
  font-size: clamp(0.82rem, 1.7vw, 1rem);
  line-height: 1.55;
}

.hybrid-milestone-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 20px;
}

.hybrid-milestone-progress span {
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(223, 175, 84, 0.45);
  border-radius: 8px;
  color: #ffe5a5;
  background: rgba(255, 255, 255, 0.045);
  font-size: clamp(0.62rem, 1.35vw, 0.78rem);
  font-weight: 1000;
  letter-spacing: 0.05em;
}

.hybrid-milestone-card button {
  min-width: min(300px, 100%);
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid #fff0a7;
  border-radius: 8px;
  color: #171006;
  background: linear-gradient(180deg, #ffe09a, #d69c36 68%, #a66c1e);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.62);
  font-weight: 1000;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.hybrid-library-preview {
  width: min(164px, 67%);
  aspect-ratio: 1;
  transform: none;
}

.hybrid-logo-medallion {
  width: 100%;
  border: 0;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.56), 0 0 0 2px rgba(229, 181, 80, 0.42);
}

.home-social-links {
  grid-column: 1 / -1;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: thin;
}

.home-social-links a,
.home-social-links a:nth-child(n) {
  flex: 1 1 0;
  min-width: 118px;
  max-width: 190px;
}

@keyframes hybridMilestoneIn6 {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 1600px) and (min-height: 880px) {
  .hybrid-board-wrap {
    width: min(76dvh, calc(100vw - 270px), 1080px);
  }
}

@media (max-height: 820px) and (min-width: 761px) {
  .hybrid-board-wrap {
    width: min(70dvh, calc(100vw - 245px), 900px);
  }
}

@media (max-width: 1080px) {
  .hybrid-board-wrap {
    width: min(68dvh, calc(100vw - 195px), 840px);
  }
}

@media (max-width: 760px) {
  .hybrid-board-wrap {
    width: min(100%, 68dvh);
  }

  .home-social-links {
    justify-content: flex-start;
  }

  .home-social-links a,
  .home-social-links a:nth-child(n) {
    flex: 0 0 126px;
  }
}

@media (max-width: 520px) {
  .hybrid-milestone-overlay {
    padding: 10px;
  }

  .hybrid-milestone-card {
    padding: 22px 15px;
  }

  .hybrid-milestone-progress {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hybrid-milestone-card {
    animation: none;
  }
}