/* Landing choice hierarchy: random matchmaking remains the primary social path. */
#pepper-app .pepper-start-options {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
  width:100% !important;
  max-width:360px !important;
  margin:0 !important;
  padding:0 !important;
}

#pepper-app .pepper-start-options::before {
  content:'Choose how to play';
  order:0;
  display:block;
  margin:0 0 2px;
  color:#f4f7fa;
  font-size:16px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.01em;
}

/*
 * game-table-layout.css has a highly specific generic .btn rule for the old
 * landing controls. Match that specificity here so its zero vertical padding
 * cannot pull these two-line option labels against the top edge.
 */
#pepper-app > div > .row:first-child > .col-md-6:first-child .pepper-start-options .pepper-random-game-button,
#pepper-app > div > .row:first-child > .col-md-6:first-child .pepper-start-options .pepper-bot-start-button,
#pepper-app > div > .row:first-child > .col-md-6:first-child .pepper-start-options .pepper-private-game-button {
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:64px !important;
  height:auto !important;
  margin:0 !important;
  padding:10px 20px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  border-radius:12px !important;
  text-align:left !important;
  font-size:17px !important;
  line-height:20px !important;
  font-weight:800 !important;
  white-space:normal !important;
}

#pepper-app .pepper-start-options .pepper-random-game-button::after,
#pepper-app .pepper-start-options .pepper-bot-start-button::after,
#pepper-app .pepper-start-options .pepper-private-game-button::after {
  content:attr(data-pepper-subtitle);
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:15px;
  font-weight:550;
  letter-spacing:0;
}

#pepper-app .pepper-start-options .pepper-random-game-button {
  order:1;
  background:linear-gradient(145deg,#3b805f,#2d6a4d) !important;
  border:1px solid #559a77 !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(24,92,63,.24) !important;
}

#pepper-app .pepper-start-options .pepper-random-game-button::after {
  color:#d8eee2 !important;
}

#pepper-app .pepper-start-options .pepper-bot-start-button {
  order:2;
  background:linear-gradient(145deg,#20384b,#182d3d) !important;
  border:1px solid #4d718c !important;
  color:#f3f7fa !important;
  box-shadow:none !important;
}

#pepper-app .pepper-start-options .pepper-bot-start-button::after {
  color:#abc0cf !important;
}

#pepper-app .pepper-start-options .pepper-private-game-button {
  order:3;
  background:linear-gradient(145deg,#162632,#10202a) !important;
  border:1px solid #456175 !important;
  color:#f1f5f7 !important;
  box-shadow:none !important;
}

#pepper-app .pepper-start-options .pepper-private-game-button::after {
  color:#9fb0bd !important;
}

#pepper-app .pepper-start-options .pepper-random-game-button:hover,
#pepper-app .pepper-start-options .pepper-random-game-button:focus-visible {
  filter:brightness(1.08) !important;
  border-color:#6caf8a !important;
}

#pepper-app .pepper-start-options .pepper-bot-start-button:hover,
#pepper-app .pepper-start-options .pepper-bot-start-button:focus-visible {
  background:linear-gradient(145deg,#29475e,#203a4d) !important;
  border-color:#7295ad !important;
}

#pepper-app .pepper-start-options .pepper-private-game-button:hover,
#pepper-app .pepper-start-options .pepper-private-game-button:focus-visible {
  background:linear-gradient(145deg,#1b2f3d,#152733) !important;
  border-color:#638198 !important;
}

html[data-pepper-theme="light"] #pepper-app .pepper-start-options::before {
  color:#203129 !important;
}

html[data-pepper-theme="light"] #pepper-app .pepper-start-options .pepper-bot-start-button,
html[data-pepper-theme="light"] #pepper-app .pepper-start-options .pepper-private-game-button {
  background:#ffffff !important;
  color:#203129 !important;
}

html[data-pepper-theme="light"] #pepper-app .pepper-start-options .pepper-bot-start-button {
  border-color:#9eb5c4 !important;
}

html[data-pepper-theme="light"] #pepper-app .pepper-start-options .pepper-private-game-button {
  border-color:#9eafa5 !important;
}

html[data-pepper-theme="light"] #pepper-app .pepper-start-options .pepper-bot-start-button::after,
html[data-pepper-theme="light"] #pepper-app .pepper-start-options .pepper-private-game-button::after {
  color:#687970 !important;
}

@media (max-width:767px) {
  #pepper-app .pepper-start-options {
    max-width:none !important;
    gap:9px !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:first-child .pepper-start-options .pepper-random-game-button,
  #pepper-app > div > .row:first-child > .col-md-6:first-child .pepper-start-options .pepper-bot-start-button,
  #pepper-app > div > .row:first-child > .col-md-6:first-child .pepper-start-options .pepper-private-game-button {
    min-height:60px !important;
    height:auto !important;
    padding:9px 14px !important;
    font-size:16px !important;
    line-height:18px !important;
  }

  #pepper-app .pepper-start-options .pepper-random-game-button::after,
  #pepper-app .pepper-start-options .pepper-bot-start-button::after,
  #pepper-app .pepper-start-options .pepper-private-game-button::after {
    margin-top:3px;
    line-height:14px;
  }
}