/* 034GAME — menu principal com contraste street/creme, desktop e mobile. */
.tabs {
  gap: clamp(6px, .8vw, 10px) !important;
  padding: 6px 2px 14px !important;
  border-bottom: 2px solid #bd9f88 !important;
}
.tabs button {
  position: relative;
  isolation: isolate;
  color: #2c2028 !important;
  background: linear-gradient(155deg,#fff9e9 0%,#f6dec3 100%) !important;
  border: 2px solid #5c3a44 !important;
  border-bottom: 4px solid #6d3b4d !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 0 #c995a0,0 5px 12px #4b273124 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  transition: transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
  cursor: pointer;
}
.tabs button span,.tabs button svg,.tabs button img {
  color: inherit !important;
}
.tabs button:hover:not(.active) {
  background: linear-gradient(145deg,#fffdf4,#ffe1bc) !important;
  border-color: #a62b75 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #b86b92,0 7px 16px #4b273132 !important;
}
.tabs button.active {
  color: #fff8ee !important;
  background: linear-gradient(135deg,#7f1f61 0%,#b72e81 52%,#5c204d 100%) !important;
  border-color: #301826 !important;
  border-bottom-color: #29d6d5 !important;
  box-shadow: 0 3px 0 #15121e,0 0 0 2px #ee78b54d,0 0 14px #e92d8b65 !important;
  text-shadow: 0 1px 2px #24121e !important;
}
.tabs button.active span,.tabs button.active svg {
  color: #fff8ee !important;
}
.tabs button:focus-visible {
  outline: 3px solid #00cecf !important;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .tabs { gap: 7px !important; padding-bottom: 12px !important; }
  .tabs button { min-height: 49px !important; padding: 9px 6px !important; border-radius: 10px !important; font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tabs button { transition: none !important; }
}

/* Botões em mosaico, unidos como na referência enviada. */
.tabs {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin-bottom: 22px !important;
  border: 2px solid #5c3a44 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.tabs button {
  margin: 0 !important;
  border: 1px solid #5c3a44 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 58px !important;
  transform: none !important;
}
.tabs button:hover:not(.active) {
  transform: none !important;
  box-shadow: inset 0 0 0 2px #b72e81 !important;
}
.tabs button.active {
  border: 1px solid #5c3a44 !important;
  box-shadow: inset 0 -4px 0 #29d6d5,inset 0 0 0 2px #ec67ab !important;
}
@media (max-width: 900px) {
  .tabs { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 480px) {
  .tabs { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 0 !important; padding: 0 !important; }
  .tabs button { min-height: 52px !important; border-radius: 0 !important; }
}