/* BreakLobby hybrid table — faithful black, gold and walnut reference layout */
.hybrid-screen {
  --hybrid-gold: #d6a34a;
  --hybrid-gold-light: #f4d38b;
  --hybrid-ink: #100d0a;
  gap: 7px;
  padding: calc(env(safe-area-inset-top, 0px) + 7px) clamp(6px, 1.2vw, 16px) calc(env(safe-area-inset-bottom, 0px) + 7px);
  color: #f4dfb3;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(107, 67, 34, 0.52), transparent 48%),
    linear-gradient(90deg, rgba(5, 4, 3, 0.98), rgba(35, 21, 13, 0.96) 18%, rgba(54, 31, 17, 0.95) 50%, rgba(35, 21, 13, 0.96) 82%, rgba(5, 4, 3, 0.98)),
    repeating-linear-gradient(92deg, #170d08 0 4px, #412313 5px 52px, #211108 54px 58px);
}

.hybrid-match-header,
.hybrid-control-bar,
.hybrid-status-note,
.hybrid-stage {
  width: min(1480px, 100%);
}

.hybrid-match-header {
  min-height: 48px;
  padding: 5px 10px;
  border: 1px solid rgba(225, 179, 87, 0.56);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(39, 25, 16, 0.98), rgba(10, 8, 6, 0.98));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 236, 189, 0.11);
}

.hybrid-match-header > div {
  text-align: center;
}

.hybrid-match-header .modal-kicker {
  color: #d9a952;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
}

.hybrid-match-header h2 {
  margin: 0;
  color: #f3d899;
  font: 800 clamp(0.92rem, 1.5vw, 1.22rem)/1.05 Georgia, serif;
  letter-spacing: 0.05em;
}

.hybrid-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.hybrid-table-middle {
  min-height: 0;
  width: max-content;
  max-width: 100%;
  justify-self: center;
  display: grid;
  grid-template-columns: clamp(78px, 8.2vw, 116px) auto clamp(78px, 8.2vw, 116px);
  gap: clamp(7px, 1vw, 14px);
  align-items: stretch;
  justify-items: stretch;
}

.hybrid-table-middle > .hybrid-bearoff-black {
  grid-column: 1;
  grid-row: 1;
  order: 0;
}

.hybrid-table-middle > .hybrid-arena {
  grid-column: 2;
  grid-row: 1;
  order: 0;
}

.hybrid-table-middle > .hybrid-bearoff-white {
  grid-column: 3;
  grid-row: 1;
  order: 0;
}

.hybrid-arena {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hybrid-board-wrap {
  position: relative;
  width: min(62dvh, calc(100vw - 260px), 780px);
  max-width: 100%;
  margin: 0 auto;
}

.hybrid-board-frame {
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: clamp(17px, 2vw, 25px) minmax(0, 1fr) clamp(17px, 2vw, 25px);
  grid-template-rows: clamp(17px, 2vw, 25px) minmax(0, 1fr) clamp(17px, 2vw, 25px);
  padding: clamp(5px, 0.7vw, 9px);
  border: 2px solid #b47b31;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 220, 150, 0.08), transparent 30%),
    repeating-linear-gradient(90deg, #1d120c 0 2px, #4d2d19 3px 24px, #2c180e 26px 29px);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.56),
    0 0 0 3px #110b07,
    0 0 0 5px rgba(211, 157, 66, 0.68),
    inset 0 0 24px rgba(0, 0, 0, 0.72),
    inset 0 1px rgba(255, 224, 162, 0.2);
}

.hybrid-board {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 1;
  border: 1px solid rgba(236, 198, 129, 0.54);
  border-radius: 1px;
  outline: 1px solid rgba(29, 17, 10, 0.9);
  outline-offset: 2px;
  background: #2b190f;
  box-shadow: inset 0 0 14px rgba(55, 30, 15, 0.3);
}

.hybrid-square.is-light {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 45%),
    linear-gradient(135deg, #dfc08d, #cba773 68%, #ba8e58);
}

.hybrid-square.is-dark {
  background:
    linear-gradient(115deg, rgba(255, 244, 213, 0.04), transparent 46%),
    linear-gradient(135deg, #997750, #7d5c3a 68%, #68462b);
}

.hybrid-square[data-square$="6"],
.hybrid-square[data-square$="4"] {
  box-shadow: inset 0 2px rgba(255, 214, 133, 0.16), inset 0 -2px rgba(71, 34, 12, 0.22);
}

.hybrid-file-axis,
.hybrid-rank-axis {
  display: grid;
  color: #dcb56b;
  font: 700 clamp(8px, 0.8vw, 12px)/1 Georgia, serif;
  text-transform: lowercase;
  text-shadow: 0 1px #000;
  pointer-events: none;
}

.hybrid-file-axis {
  grid-column: 2;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  text-align: center;
}

.hybrid-file-axis-top { grid-row: 1; }
.hybrid-file-axis-bottom { grid-row: 3; }

.hybrid-rank-axis {
  grid-row: 2;
  grid-template-rows: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
}

.hybrid-rank-axis-left { grid-column: 1; }
.hybrid-rank-axis-right { grid-column: 3; }

.hybrid-chess-piece {
  inset: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  font-size: clamp(27px, 5.2vmin, 66px);
  line-height: 1;
  transform: translateY(-1%);
}

.hybrid-chess-piece.white {
  color: #f5dfad;
  -webkit-text-stroke: 1px rgba(78, 46, 21, 0.96);
  text-shadow: 0 2px 0 #8f6535, 0 5px 5px rgba(0, 0, 0, 0.5);
}

.hybrid-chess-piece.black {
  color: #151412;
  -webkit-text-stroke: 1px rgba(213, 170, 91, 0.72);
  text-shadow: 0 2px 0 #000, 0 5px 5px rgba(0, 0, 0, 0.6);
}

.hybrid-checker-stack {
  inset: auto auto 3% 50%;
  width: 64%;
  height: 72%;
  min-width: 0;
  aspect-ratio: auto;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
}

.hybrid-checker-discs {
  position: absolute;
  inset: 0;
}

.hybrid-checker-discs i {
  position: absolute;
  left: 6%;
  bottom: calc(var(--layer, 0) * 11%);
  width: 88%;
  height: 23%;
  border: 1px solid rgba(88, 50, 19, 0.72);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff1c7 0 22%, #e4c58f 28% 61%, #ac7e47 68% 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.68);
}

.hybrid-checker-stack.black .hybrid-checker-discs i {
  border-color: rgba(208, 168, 91, 0.42);
  background: linear-gradient(180deg, #494641 0 20%, #22211f 27% 63%, #050505 70% 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 255, 255, 0.16);
}

.hybrid-checker-count {
  position: absolute;
  top: -7%;
  right: -12%;
  z-index: 8;
  min-width: 1.55em;
  min-height: 1.55em;
  border: 1px solid rgba(247, 220, 156, 0.8);
  color: #2a190e;
  background: #f0d59c;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  font-size: clamp(0.58rem, 1vw, 0.78rem);
}

.hybrid-checker-stack.black .hybrid-checker-count {
  color: #f2d18c;
  background: #171512;
}

.hybrid-board-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  min-width: clamp(175px, 22vw, 270px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hybrid-board-center.is-prompt {
  padding: clamp(10px, 1.4vw, 18px);
  border: 1px solid rgba(231, 191, 111, 0.78);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(25, 18, 12, 0.95), rgba(7, 7, 6, 0.93));
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 235, 191, 0.16);
}

.hybrid-board-center.is-dice {
  min-width: 0;
  pointer-events: none;
}

.hybrid-board-center.is-dice > strong,
.hybrid-board-center.is-dice > span,
.hybrid-board-center.is-dice > button,
.hybrid-board-center.is-hidden {
  display: none;
}

.hybrid-board-center > strong {
  color: #f1cc79;
  font: 900 clamp(0.82rem, 1.2vw, 1.05rem)/1 Georgia, serif;
  letter-spacing: 0.14em;
}

.hybrid-board-center > span {
  color: rgba(255, 238, 205, 0.77);
  font-size: clamp(0.64rem, 0.95vw, 0.78rem);
  font-weight: 800;
}

.hybrid-board-center > button {
  min-width: 138px;
  min-height: 38px;
  margin-top: 2px;
  padding: 8px 17px;
  border: 1px solid #f6db98;
  border-radius: 6px;
  color: #151007;
  background: linear-gradient(180deg, #f1d78f, #c58a34);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.38), inset 0 1px #fff3bf;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.hybrid-board-center > button:disabled {
  opacity: 0.68;
}

.hybrid-dice-display {
  position: static;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.hybrid-dice {
  width: clamp(42px, 5.1vw, 62px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: clamp(6px, 0.7vw, 9px);
  border: 2px solid rgba(217, 255, 196, 0.88);
  border-radius: 11px;
  background: radial-gradient(circle at 31% 20%, #71e987, #1d9e47 58%, #075822 100%);
  box-shadow: 0 8px 13px rgba(0, 0, 0, 0.5), 0 0 17px rgba(79, 232, 108, 0.42), inset 0 2px rgba(255, 255, 255, 0.26);
}

.hybrid-dice i {
  width: 72%;
  aspect-ratio: 1;
  place-self: center;
  visibility: hidden;
  border-radius: 50%;
  background: #f5f5dc;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.48);
}

.hybrid-dice[data-value="1"] i:nth-child(5),
.hybrid-dice[data-value="2"] i:nth-child(1), .hybrid-dice[data-value="2"] i:nth-child(9),
.hybrid-dice[data-value="3"] i:nth-child(1), .hybrid-dice[data-value="3"] i:nth-child(5), .hybrid-dice[data-value="3"] i:nth-child(9),
.hybrid-dice[data-value="4"] i:nth-child(1), .hybrid-dice[data-value="4"] i:nth-child(3), .hybrid-dice[data-value="4"] i:nth-child(7), .hybrid-dice[data-value="4"] i:nth-child(9),
.hybrid-dice[data-value="5"] i:nth-child(1), .hybrid-dice[data-value="5"] i:nth-child(3), .hybrid-dice[data-value="5"] i:nth-child(5), .hybrid-dice[data-value="5"] i:nth-child(7), .hybrid-dice[data-value="5"] i:nth-child(9),
.hybrid-dice[data-value="6"] i:nth-child(1), .hybrid-dice[data-value="6"] i:nth-child(3), .hybrid-dice[data-value="6"] i:nth-child(4), .hybrid-dice[data-value="6"] i:nth-child(6), .hybrid-dice[data-value="6"] i:nth-child(7), .hybrid-dice[data-value="6"] i:nth-child(9) {
  visibility: visible;
}

.hybrid-dice.is-spent {
  opacity: 0.46;
  filter: saturate(0.45);
}

.hybrid-dice.is-live {
  border-color: #efffd4;
  box-shadow: 0 8px 13px rgba(0, 0, 0, 0.5), 0 0 20px rgba(80, 246, 113, 0.65), inset 0 2px rgba(255, 255, 255, 0.3);
}

.hybrid-dice.is-ghost {
  display: grid;
  place-items: center;
  opacity: 0.74;
}

.hybrid-dice.is-ghost b {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  color: #f5f6d9;
  font: 900 clamp(1.1rem, 2vw, 1.6rem)/1 Georgia, serif;
}

.hybrid-player-panel {
  position: relative;
  min-height: clamp(84px, 10.5dvh, 108px);
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(136px, 190px) minmax(235px, 1fr) clamp(55px, 5.2vw, 72px) 24px clamp(50px, 4.8vw, 66px) minmax(105px, 155px);
  gap: clamp(4px, 0.65vw, 9px);
  align-items: stretch;
  padding: clamp(6px, 0.75vw, 10px);
  overflow: visible;
  border: 1px solid rgba(224, 176, 84, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 235, 190, 0.035), transparent 32%),
    repeating-linear-gradient(92deg, rgba(66, 39, 22, 0.88) 0 3px, rgba(24, 17, 12, 0.97) 5px 45px, rgba(47, 27, 16, 0.92) 48px 52px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), inset 0 0 0 2px rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 231, 177, 0.12);
}

.hybrid-player-panel.white {
  background:
    linear-gradient(145deg, rgba(255, 235, 190, 0.055), transparent 32%),
    repeating-linear-gradient(92deg, rgba(83, 51, 29, 0.9) 0 3px, rgba(34, 22, 15, 0.97) 5px 45px, rgba(62, 36, 21, 0.94) 48px 52px);
}

.hybrid-player-panel.is-active {
  border-color: #d9a74c;
  box-shadow: 0 0 0 2px rgba(67, 216, 101, 0.2), 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 238, 195, 0.14);
}

.hybrid-player-identity,
.hybrid-active-suit,
.hybrid-turn-instruction {
  min-width: 0;
  border: 1px solid rgba(215, 166, 77, 0.35);
  border-radius: 6px;
  background: rgba(8, 8, 7, 0.5);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.32);
}

.hybrid-player-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
}

.hybrid-player-token {
  width: clamp(34px, 4vw, 48px);
  color: #11100e;
  border: 1px solid #c59242;
  background: radial-gradient(circle at 35% 26%, #ffedb7, #c28b38 66%, #694015);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.5);
  font: 900 clamp(1.45rem, 2.4vw, 2.2rem)/1 Georgia, serif;
}

.hybrid-player-panel.black .hybrid-player-token {
  color: #e3bd6e;
  background: radial-gradient(circle at 35% 26%, #474541, #11110f 68%, #010101);
}

.hybrid-player-copy strong {
  color: #f2d899;
  font: 800 clamp(0.72rem, 1vw, 0.95rem)/1.05 Georgia, serif;
}

.hybrid-player-copy span {
  margin-top: 5px;
  color: rgba(247, 222, 171, 0.62);
  font-size: clamp(0.48rem, 0.65vw, 0.65rem);
  letter-spacing: 0.04em;
}

.hybrid-active-suit {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 5px 7px;
  text-align: center;
}

.hybrid-active-suit > strong {
  color: #dfbd78;
  font: 800 clamp(0.58rem, 0.77vw, 0.75rem)/1 Georgia, serif;
  letter-spacing: 0.04em;
}

.hybrid-active-suit > strong small {
  color: rgba(230, 202, 146, 0.62);
  font-size: 0.75em;
}

.hybrid-active-suit > span {
  color: rgba(244, 222, 178, 0.56);
  font-size: clamp(0.42rem, 0.56vw, 0.56rem);
}

.hybrid-suit-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.hybrid-suit-row span {
  width: auto;
  min-width: 0;
  aspect-ratio: 1.15;
  border: 1px solid rgba(211, 172, 94, 0.2);
  border-radius: 4px;
  color: #191816;
  background: linear-gradient(180deg, #bbb1a0, #716d66);
  font-size: clamp(0.82rem, 1.25vw, 1.2rem);
  text-shadow: 0 1px rgba(255, 255, 255, 0.18);
}

.hybrid-suit-row span.is-red {
  color: #a63228;
}

.hybrid-suit-row span.is-active {
  color: #f4f0db;
  border-color: #85ff8e;
  background: linear-gradient(180deg, #3cb855, #167331);
  box-shadow: 0 0 10px rgba(64, 241, 95, 0.7), inset 0 1px rgba(255, 255, 255, 0.28);
  transform: none;
}

.hybrid-suit-row span.is-active.is-red {
  color: #fff0d3;
}

.hybrid-card-hand {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: center;
  padding: 4px;
}

.hybrid-hand-card {
  min-width: 0;
  height: clamp(50px, 7.8dvh, 78px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 1px;
  margin-left: -1px;
  border: 1px solid #b98a4f;
  border-radius: 4px;
  color: #171411;
  background: linear-gradient(145deg, #fff8e5, #e4d0aa 70%, #c2a276);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.48);
  font-family: Georgia, serif;
}

.hybrid-hand-card b {
  font-size: clamp(0.7rem, 1.25vw, 1.1rem);
  line-height: 1;
}

.hybrid-hand-card i {
  font: normal clamp(0.65rem, 1vw, 0.95rem)/1 Georgia, serif;
}

.hybrid-hand-card.is-red { color: #aa2f25; }

.hybrid-deck-slot {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.hybrid-card-back {
  min-height: 48px;
  border: 2px solid #c9ad7b;
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg, rgba(241, 209, 158, 0.2) 0 2px, transparent 2px 5px),
    radial-gradient(circle, transparent 25%, rgba(244, 211, 162, 0.34) 27% 30%, transparent 32%),
    #6f2d23;
  background-size: auto, 12px 12px, auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.42), inset 0 0 0 2px #4b1b15, inset 0 0 0 4px rgba(218, 183, 125, 0.5);
}

.hybrid-deck-slot > span {
  color: #d7b36f;
  font-size: clamp(0.42rem, 0.55vw, 0.58rem);
  font-weight: 900;
  white-space: nowrap;
}

.hybrid-card-arrow {
  display: grid;
  place-items: center;
  color: #d2ac66;
  font-size: clamp(0.9rem, 1.5vw, 1.35rem);
  text-shadow: 0 2px #000;
}

.hybrid-drawn-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  padding: 6px;
  border: 2px solid #c4954c;
  border-radius: 5px;
  color: #171411;
  background: linear-gradient(145deg, #fff9e8, #dcc49b);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.64);
  font-family: Georgia, serif;
}

.hybrid-drawn-card b { font-size: clamp(1.1rem, 1.8vw, 1.7rem); line-height: 1; }
.hybrid-drawn-card i { font: normal clamp(1rem, 1.6vw, 1.5rem)/1 Georgia, serif; }
.hybrid-drawn-card.is-red { color: #a82e25; }

.hybrid-turn-instruction {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 7px 8px;
  text-align: center;
}

.hybrid-turn-instruction strong {
  color: #e6be6f;
  font: 800 clamp(0.62rem, 0.8vw, 0.78rem)/1 Georgia, serif;
  letter-spacing: 0.08em;
}

.hybrid-turn-instruction span {
  color: rgba(247, 225, 180, 0.7);
  font: 600 clamp(0.52rem, 0.67vw, 0.66rem)/1.25 Georgia, serif;
}

.hybrid-bar-tray {
  position: absolute;
  right: 8px;
  bottom: -34px;
  z-index: 20;
}

.hybrid-bearoff {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(35px, 1fr) minmax(24px, 0.58fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4px;
  padding: clamp(7px, 0.8vw, 11px) clamp(5px, 0.6vw, 8px);
  overflow: hidden;
  border: 2px solid #8b612d;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 45%),
    repeating-linear-gradient(92deg, #17120f 0 3px, #34261d 4px 28px, #1d1510 30px 34px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.72), inset 0 0 0 2px rgba(210, 162, 74, 0.25);
}

.hybrid-bearoff-white {
  border-color: #c09a64;
  color: #47301d;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 48%),
    repeating-linear-gradient(92deg, #c7b28f 0 3px, #ead9b8 4px 28px, #b49a75 30px 34px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), inset 0 0 18px rgba(88, 52, 23, 0.24), inset 0 0 0 2px rgba(255, 247, 219, 0.55);
}

.hybrid-bearoff-crown {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  place-items: center;
  min-height: 34px;
  color: #c99a47;
  font: 900 clamp(1.45rem, 2.4vw, 2.2rem)/1 Georgia, serif;
  text-shadow: 0 3px 4px #000;
}

.hybrid-bearoff-white .hybrid-bearoff-crown {
  color: #80603b;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.hybrid-bearoff-ruler {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  align-items: center;
  justify-items: center;
  color: #cda759;
  font: 700 clamp(0.55rem, 0.85vw, 0.82rem)/1 Georgia, serif;
}

.hybrid-bearoff-white .hybrid-bearoff-ruler { color: #5a3d22; }

.hybrid-bearoff-track {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-height: 0;
  align-self: stretch;
  padding: 7px 5px;
  border: 1px solid rgba(199, 149, 68, 0.36);
  border-radius: 999px;
  background: linear-gradient(90deg, #0b0a09, #292622 50%, #080706);
  box-shadow: inset 0 0 13px rgba(0, 0, 0, 0.88), inset 0 0 0 3px rgba(255, 255, 255, 0.025);
}

.hybrid-bearoff-white .hybrid-bearoff-track {
  border-color: rgba(95, 61, 30, 0.4);
  background: linear-gradient(90deg, #a9906c, #ddc8a3 50%, #9b815e);
  box-shadow: inset 0 0 13px rgba(74, 40, 15, 0.38), inset 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.hybrid-bearoff-track span {
  width: 90%;
  max-width: 48px;
  background: linear-gradient(180deg, #4c4944, #090807);
  border-color: rgba(213, 170, 91, 0.44);
}

.hybrid-bearoff-white .hybrid-bearoff-track span {
  background: linear-gradient(180deg, #fff4d0, #c89b5e);
  border-color: rgba(98, 61, 26, 0.5);
}

.hybrid-bearoff > strong {
  grid-column: 1 / -1;
  grid-row: 3;
  writing-mode: initial;
  color: #d8ad5e;
  font: 800 clamp(0.48rem, 0.62vw, 0.63rem)/1 Georgia, serif;
  letter-spacing: 0.08em;
  text-align: center;
}

.hybrid-bearoff-white > strong { color: #65451f; }

.hybrid-control-bar {
  min-height: 50px;
  padding: 6px 9px;
  border-radius: 8px;
  border-color: rgba(224, 177, 83, 0.5);
  background: linear-gradient(180deg, rgba(42, 27, 17, 0.97), rgba(9, 8, 7, 0.98));
}

.hybrid-status-copy {
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 12px;
}

.hybrid-status-copy small {
  grid-column: 1 / -1;
  color: rgba(244, 221, 177, 0.64);
  font-size: 0.66rem;
}

.hybrid-actions button {
  min-height: 36px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.hybrid-actions button:not(:disabled) {
  border-color: #f3d792;
  box-shadow: 0 0 15px rgba(216, 162, 67, 0.28), 0 7px 14px rgba(0, 0, 0, 0.35);
}

.hybrid-status-note {
  min-height: 1em;
  margin: 0 auto;
  color: #e7c77f;
  font-size: 0.72rem;
}

@media (max-width: 1080px) {
  .hybrid-player-panel {
    grid-template-columns: minmax(106px, 145px) minmax(125px, 165px) minmax(210px, 1fr) 55px 18px 52px minmax(92px, 125px);
  }

  .hybrid-player-copy span,
  .hybrid-active-suit > span {
    display: none;
  }

  .hybrid-board-wrap {
    width: min(61dvh, calc(100vw - 220px), 720px);
  }
}

@media (max-width: 760px) {
  .hybrid-screen {
    padding-inline: 5px;
  }

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

  .hybrid-table-middle {
    width: 100%;
    grid-template-columns: 45px minmax(0, 1fr) 45px;
    gap: 4px;
  }

  .hybrid-board-wrap {
    width: min(100%, 68dvh);
  }

  .hybrid-player-panel {
    min-height: 76px;
    grid-template-columns: minmax(92px, 1fr) minmax(118px, 1fr) 47px 16px 44px;
    gap: 3px;
    padding: 4px;
  }

  .hybrid-card-hand,
  .hybrid-turn-instruction {
    display: none;
  }

  .hybrid-player-identity,
  .hybrid-active-suit {
    padding: 4px;
  }

  .hybrid-deck-slot > span,
  .hybrid-bearoff-ruler,
  .hybrid-bearoff > strong {
    display: none;
  }

  .hybrid-bearoff {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 4px;
    border-radius: 7px;
  }

  .hybrid-bearoff-crown {
    grid-column: 1;
    grid-row: 1;
    min-height: 25px;
  }

  .hybrid-bearoff-track {
    grid-column: 1;
    grid-row: 2;
    padding-inline: 3px;
  }

  .hybrid-file-axis,
  .hybrid-rank-axis {
    font-size: 7px;
  }

  .hybrid-board-frame {
    grid-template-columns: 14px minmax(0, 1fr) 14px;
    grid-template-rows: 14px minmax(0, 1fr) 14px;
    padding: 4px;
  }

  .hybrid-chess-piece {
    font-size: clamp(21px, 9vw, 45px);
  }

  .hybrid-control-bar {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .hybrid-match-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .hybrid-match-header h2 { font-size: 0.84rem; }
  .hybrid-match-header .modal-kicker { display: none; }

  .hybrid-player-panel {
    min-height: 70px;
    grid-template-columns: minmax(78px, 1fr) 108px 14px 41px;
  }

  .hybrid-player-token { display: none; }
  .hybrid-player-identity { grid-template-columns: 1fr; }
  .hybrid-deck-slot { display: none; }
  .hybrid-active-suit > strong { font-size: 0.48rem; }
  .hybrid-suit-row span { font-size: 0.8rem; }
  .hybrid-drawn-card { padding: 4px; }

  .hybrid-board-center.is-prompt {
    min-width: 160px;
    padding: 9px;
  }

  .hybrid-dice { width: 38px; padding: 5px; }

  .hybrid-status-copy {
    grid-template-columns: 1fr auto;
    width: 100%;
  }

  .hybrid-status-copy small { display: none; }
  .hybrid-actions { width: 100%; }
  .hybrid-actions button { flex: 1; padding-inline: 7px; }
}