@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeTextIn {
  0% {
    color: transparent;
  }
  to {
    color: #000;
  }
}
@keyframes fadeTextOut {
  0% {
    color: #000;
  }
  to {
    color: transparent;
  }
}
@keyframes pulse {
  0%,
  to {
    opacity: 0.1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes btnAnm {
  0%,
  to {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 2px);
  }
  60% {
    transform: translate(0, 1px);
  }
}
@keyframes tipSlideInAnim {
  0% {
    left: -400px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes tipSlideOutAnim {
  0% {
    left: 0;
    opacity: 1;
  }
  to {
    left: -400px;
    opacity: 0;
  }
}
@keyframes shake {
  0% {
    transform: translateX(0) rotateZ(0deg) scale(1, 1);
    -webkit-transform: translateX(0) rotateZ(0deg) scale(1, 1);
  }
  25%,
  75% {
    transform: translateX(var(--shake-x)) rotateZ(var(--shake-rot))
      scale(var(--shake-scale-x), var(--shake-scale-y));
    -webkit-transform: translateX(var(--shake-x)) rotateZ(var(--shake-rot))
      scale(var(--shake-scale-x), var(--shake-scale-y));
  }
  50% {
    transform: translateX(calc(0px - var(--shake-x)))
      rotateZ(calc(0deg - var(--shake-rot)))
      scale(var(--shake-scale-x), var(--shake-scale-y));
    -webkit-transform: translateX(calc(0px - var(--shake-x)))
      rotateZ(calc(0deg - var(--shake-rot)))
      scale(var(--shake-scale-x), var(--shake-scale-y));
  }
  to {
    transform: translateX(0) rotateZ(0) scale(1, 1);
    -webkit-transform: translateX(0) rotateZ(0) scale(1, 1);
  }
}
@keyframes recordGlow {
  0% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.4),
      0 0 35px rgba(255, 215, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.3);
  }
  to {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 35px rgba(255, 215, 0, 0.6),
      0 0 50px rgba(255, 215, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.5);
  }
}
@keyframes shine {
  0%,
  to {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}
@keyframes next-game-pulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@keyframes celebrate-glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transform: scale(1);
  }
  to {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    transform: scale(1.02);
  }
}
@keyframes filledBarEmphAnm {
  0%,
  to {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
@keyframes cgBlurScore {
  0% {
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 25px #fff, 0 0 25px #fff,
      0 0 25px #fff, 0 0 25px #fff, 0 0 25px #fff, 0 0 25px #fff, 0 0 50px #fff,
      0 0 50px #fff, 0 0 50px #7b96b8, 0 0 150px #7b96b8, 0 10px 100px #7b96b8,
      0 10px 100px #7b96b8, 0 10px 100px #7b96b8, 0 10px 100px #7b96b8,
      0-10px 100px #7b96b8, 0-10px 100px #7b96b8;
  }
}
@keyframes fadeInScaleUp {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bgDotsAnimation {
  to {
    transform: scale(2);
  }
}
@keyframes splashAnimation {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.9;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 0.7;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 0.7;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes checkersSpinAnimation-0 {
  0% {
    transform: rotateY(0deg);
    background-position: 25% 62.5%;
  }
  24.9999% {
    background-position: 25% 62.5%;
  }
  25% {
    transform: rotateY(90deg);
    background-position: 50% 12.5%;
  }
  74.9999% {
    background-position: 50% 12.5%;
  }
  75% {
    transform: rotateY(270deg);
    background-position: 25% 62.5%;
  }
  to {
    transform: rotateY(360deg);
    background-position: 25% 62.5%;
  }
}
@keyframes checkersSpinAnimation-1 {
  0% {
    transform: rotateY(0deg);
    background-position: 75% 12.5%;
  }
  24.9999% {
    background-position: 75% 12.5%;
  }
  25% {
    transform: rotateY(90deg);
    background-position: 100% 12.5%;
  }
  74.9999% {
    background-position: 100% 12.5%;
  }
  75% {
    transform: rotateY(270deg);
    background-position: 75% 12.5%;
  }
  to {
    transform: rotateY(360deg);
    background-position: 75% 12.5%;
  }
}
@keyframes fallingFlippingCardAnimation {
  0%,
  40%,
  60%,
  to {
    transform: rotateY(180deg);
  }
  45%,
  55% {
    transform: rotateY(0deg);
  }
}
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  image-rendering: -webkit-optimize-contrast;
  touch-action: pan-x pan-y;
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
div[draggable="false"][style*="inset"] {
  display: none !important;
}
:focus {
  outline: 0;
}
img {
  border-style: none;
}
.overscrollBehaviorNone {
  overscroll-behavior: none;
}
.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.noHorizontalScroll {
  overflow-x: hidden;
}
#cookiescript_badge,
.ot-floating-button {
  display: none !important;
  bottom: -150px !important;
}
.solModal,
.solModalNoShadow,
.solModalNotFixed {
  background-color: #fff;
  color: #333;
  height: auto;
  width: auto;
}
.solModal {
  z-index: 10001;
  position: fixed;
  -webkit-box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
  -moz-box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
  box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
}
.solModal.favoriteModal {
  z-index: 140;
}
.solModalNoShadow,
.solModalNotFixed {
  z-index: 101;
}
.solModalNotFixed {
  position: absolute;
  -webkit-box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
  -moz-box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
  box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
}
.solModalNoShadow {
  position: fixed;
}
.solModalOverlay {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.53;
  background-color: #3c3c3c;
}
.solModalInner {
  padding: 22px 1em;
  border: 0;
  overflow: hidden;
}
.solModalInnerWithOverflow {
  padding: 22px 1em;
  border: 0;
  overflow: auto;
  font-size: 1.1em;
}
.solModaInner input[type="text"],
.solModalInnerWithOverflow input[type="text"] {
  font-size: 1.1em;
}
.dlgCloseBtn {
  position: absolute;
  width: 25px;
  top: 12px;
  right: 12px;
  height: 25px;
  background-image: url(/assets/images/close.png);
  background-repeat: no-repeat;
  transition: all 0.1s ease-out;
}
.dlgCloseBtn:hover {
  cursor: pointer;
  scale: 1.05;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
#pwaPromptId .dlgCloseBtn:hover {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
#pwaPromptId .dlgCloseBtn {
  width: 35px;
  height: 35px;
  top: -15px;
  right: -15px;
  background-size: 4720%;
  background-position: 25.65% -0.3%;
  background-color: var(--color-bg);
  border: var(--border-mark);
  border-color: #4f3620;
  border-width: 6px;
  border-radius: 50%;
  opacity: 1;
  transition: var(--ease-transition-quick);
}
.dlgCloseBtn:active {
  cursor: pointer;
  scale: 1.1;
}
.inputLine {
  display: flex;
  margin-bottom: 4px;
  align-items: center;
}
.modalNoScroll {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
}
.solButton,
.solButton:hover {
  color: #fff;
  background-color: #2e9b57;
}
.solButton {
  display: inline-block;
  border-radius: 16px;
  min-width: 100px;
  font-size: 1.1em;
  border: 1px solid #fff;
  font-weight: 400;
  padding: 0.4em 1em;
  position: relative;
  margin-right: 0.1em;
  cursor: pointer;
  user-select: none;
  overflow: visible;
}
.solButton:hover {
  opacity: 0.8;
}
.forgotPassPseudoLink {
  font-size: 19px;
  text-align: center;
}
.forgotPassPseudoLink,
.forgotPassPseudoLinkPhone,
.pseudoLinkBlueUnder {
  color: #0071bc;
  cursor: pointer;
  text-decoration: underline;
}
.forgotPassPseudoLinkPhone {
  text-align: center;
}
.pseudoLinkBlueUnder {
  font-size: 19px;
}
.forgotPassPseudoLinkPhone {
  font-size: 16px;
}
.forgotPassPseudoLink:hover,
.pseudoLinkBlueUnder:hover {
  color: #404042;
}
.pseudoLinkBlueUnder {
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
}
.pseudoLinkUnderline {
  text-decoration: underline;
  cursor: pointer;
  font-size: 24px;
}
.pseudoLink:hover,
.pseudoLinkUnderline:hover {
  color: #0071bc;
}
.pseudoLink {
  color: #404042;
  cursor: pointer;
}
.pseudoLink2,
.pseudoLink3 {
  color: #0071bc;
  cursor: pointer;
}
.pseudoLink2:hover {
  color: #404042;
}
.pseudoLink3 {
  color: #000;
  text-decoration: underline;
}
.pseudoLink3:hover {
  color: #0071bc;
}
.generalDialog {
  font-size: 1.1em;
  border-radius: 20px;
}
.helpDialog {
  font-size: 1.1em;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.noOverflow {
  overflow: hidden;
}
.visibleOverflow {
  overflow: visible;
}
.dialogBtnsPanel {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  line-height: 30px;
}
.dialogBtnsPanel > button {
  margin: 8px;
}
.stateError {
  color: #5f3f3f;
}
.stateHighlight {
  outline: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}
.flashMessageIn {
  animation: fadeIn ease 0.2s;
}
.flashMessageOut {
  animation: fadeOut ease 0.2s;
  opacity: 0;
}
.flashTextIn {
  animation: fadeTextIn ease 0.2s;
}
.flashTextOut {
  animation: fadeTextOut ease 0.2s;
}
.modalButtonWrapper {
  text-align: center;
  margin-top: 12px;
}
.dialogHeaderBackground {
  background-position: 0-410px;
}
.noPadding {
  padding: 0;
}
.overflowAuto {
  overflow: auto;
}
.smoothScroll {
  scroll-behavior: smooth;
}
.padding2 {
  padding: 2px;
}
.alignCenter {
  text-align: center;
}
.marginCenter {
  margin-left: auto;
  margin-right: auto;
}
.displayInlineBlock {
  display: inline-block;
}
.displayNone {
  display: none;
}
.displayInlineFlex {
  display: inline-flex;
}
.line6br {
  line-height: 6px;
}
.line10br {
  line-height: 10px;
}
.line22br {
  line-height: 22px;
}
.font18 {
  font-size: 18px;
}
.font19 {
  font-size: 19px;
}
.font22 {
  font-size: 22px;
}
.direction {
  direction: ltr;
}
.maxWidthFull {
  max-width: 100%;
}
.modalHidden {
  display: none;
  border-radius: 20px;
}
.modalHelpHidden {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.modalTopTitle {
  text-align: center;
}
@media (min-height: 501px) {
  .modalHidden {
    font-size: 20px;
  }
  .modalTopTitle {
    font-size: 30px;
    margin-top: 12px;
    line-height: 24px;
    margin-bottom: 16px;
  }
}
@media (max-height: 500px) {
  .modalHidden {
    font-size: 16px;
  }
  .modalTopTitle {
    font-size: 24px;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .solModalInner {
    padding-bottom: 10px;
  }
  .noPadding {
    padding-bottom: 0;
  }
  .pseudoLinkBlueUnder {
    font-size: 14px;
  }
}
.generalTextBody {
  text-align: left;
  font-size: 16px;
  margin-left: 14px;
  margin-right: 10px;
}
.generalTextBodyRtl {
  text-align: right;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 14px;
}
.generalTextDiv {
  background-image: url(/assets/images/home-games-background.jpg);
  width: 100%;
  overflow-y: scroll;
  text-align: center;
  min-height: 500px;
}
.generalPageFooterDiv {
  height: 140px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 0 12px #3c3c3c;
  background-color: #1b5316;
  z-index: 2;
}
.langSwitchButton {
  display: flex;
  justify-content: center;
  right: 10px;
  flex-basis: 120px;
  flex-shrink: 0;
}
.langSwitchDialog {
  position: absolute;
  background-color: #fff;
  color: #333;
  height: auto;
  width: auto;
  z-index: 101;
}
.langSwitchList > a {
  text-decoration: none;
  color: #000;
}
.langSwitchItem {
  background-color: #fff;
  font-size: 18px;
  line-height: 26px;
  border-radius: 15px;
  padding: 2px 15px;
  margin: 2px 0;
  text-align: center;
}
.langSwitchButton:hover,
.langSwitchItem:hover {
  opacity: 0.7;
  cursor: pointer;
}
@media (max-width: 600px) {
  .langSwitchButton:first-child {
    flex-shrink: 2;
  }
}
.outerCopyrightWrapper {
  background-color: #0f3d0f;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
@media (orientation: portrait) {
  .isMobile.generalPageFooterDiv,
  .isMobile.outerCopyrightWrapper {
    flex-direction: column;
    height: auto;
  }
  .isMobile .langSwitchButton:first-child {
    display: none;
  }
  .isMobile .langSwitchButton {
    flex-basis: 0;
    margin-bottom: 10px;
  }
}
:root {
  --shake-dur: 0.2s;
  --shake-x: 2px;
  --shake-rot: 1deg;
  --shake-scale-x: 1.04;
  --shake-scale-y: 0.96;
  --game-top-bar-height: 73px;
  --game-top-bar-height-shorter: 73px;
  --top-links-bar-height: 0px;
  --top-links-font-size: 16px;
}
.gameAArea {
  position: absolute;
  right: 0;
  text-align: center;
  margin: 0;
  z-index: 84;
  top: 75px;
}
.oneTrustCookieSettings {
  border: 0 !important;
  background-color: #1b5316 !important;
  color: #fff !important;
  font-size: 22px !important;
  margin: 4px 0 !important;
  padding: 3px 0 0 !important;
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif !important;
  cursor: pointer !important;
  text-align: left;
}
@media (min-width: 480px) and (max-width: 766px) {
  .oneTrustCookieSettings {
    margin-bottom: 12px !important;
  }
}
.oneTrustCookieSettings:hover {
  opacity: 0.8;
}
.oneTapPosition {
  position: fixed;
  top: 66px;
  right: 10px;
  z-index: 9999;
}
.isMobile .oneTapPosition {
  top: unset;
  right: unset;
  bottom: 0;
}
.isTablet .oneTapPosition {
  top: 0;
  bottom: unset;
}
.aboutDiv {
  display: flex;
  font-size: 18px;
  text-align: left;
  width: 80%;
  margin-left: 10%;
}
.solAbout {
  width: 270px;
  height: 315px;
}
.foundation {
  display: inline;
  transform-origin: center top 0;
  position: absolute;
}
.canfieldInnerFounImg {
  width: 100%;
  height: 100%;
}
.canfieldFounRankWrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.canfieldFoundationRank {
  opacity: 0.8;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  height: 65%;
  width: 88%;
  background-size: 1860%;
  background-position: 39.8% 28%;
}
.rankId1.canfieldFoundationRank {
  background-position-x: 59.4%;
}
.rankId2.canfieldFoundationRank {
  background-position-x: 3.5%;
}
.rankId3.canfieldFoundationRank {
  background-position-x: 7.8%;
}
.rankId4.canfieldFoundationRank {
  background-position-x: 12.4%;
}
.rankId5.canfieldFoundationRank {
  background-position-x: 16.7%;
}
.rankId6.canfieldFoundationRank {
  background-position-x: 21.1%;
}
.rankId7.canfieldFoundationRank {
  background-position-x: 25.4%;
}
.rankId8.canfieldFoundationRank {
  background-position-x: 29.8%;
}
.rankId9.canfieldFoundationRank {
  background-position-x: 34.2%;
}
.rankId10.canfieldFoundationRank {
  background-position-x: 39.8%;
}
.rankId11.canfieldFoundationRank {
  background-position-x: 45.2%;
}
.rankId12.canfieldFoundationRank {
  background-position-x: 49.7%;
}
.rankId13.canfieldFoundationRank {
  background-position-x: 54.3%;
}
.equalityCardSet .rankId11.canfieldFoundationRank {
  background-position-x: 65.1%;
}
.equalityCardSet .rankId12.canfieldFoundationRank {
  background-position-x: 71.5%;
}
.equalityCardSet .rankId13.canfieldFoundationRank {
  background-position-x: 78%;
}
.card,
.stock {
  display: inline;
  transform-origin: left top 0;
  cursor: pointer;
  position: absolute;
}
.solStockWasteLabel,
.stockRedealsLabel {
  position: absolute;
  color: #fff;
  font-size: var(--font-size-medium);
  height: 1em;
  width: 2ch;
  line-height: 1em;
  text-align: center;
  transition: all 0.05s ease-out;
  z-index: 80;
  text-shadow: 0 0 2px #000;
}
.stockDrawHintOverlay {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.stockDrawHintOverlayBadge {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.8);
}
.stockDrawHintOverlayText {
  position: relative;
  z-index: 1;
}
.stockDrawHintOverlayCount,
.stockDrawHintOverlayVerb {
  display: block;
}
.isMobile:not(.isTablet) .gameTopBar .generalButton span,
.isMobile:not(.isTablet) .stockDrawHintOverlayBadge {
  display: none;
}
.isMobile:not(.isTablet) .stockDrawHintOverlayText {
  text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 2px #000, 0 2px 3px #000;
}
.favoriteBtnText {
  font-size: 22px;
}
.favdiv:hover {
  opacity: 0.7;
}
.solBackgroundGameObject {
  background-size: 300% 600%;
}
.solBackgroundGameObject-cell {
  background-position: 0 0;
}
.darkmodeOn .solBackgroundGameObject-cell {
  background-position: 0 60%;
}
.solBackgroundGameObject-foundation {
  background-position: 50%0;
}
.darkmodeOn .solBackgroundGameObject-foundation {
  background-position: 50% 60%;
}
.solBackgroundGameObject-no-refresh-mobile {
  background-position: 100%0;
}
.darkmodeOn .solBackgroundGameObject-no-refresh-mobile {
  background-position: 100% 60%;
}
.solBackgroundGameObject-no-refresh {
  background-position: 0 20%;
}
.darkmodeOn .solBackgroundGameObject-no-refresh {
  background-position: 0 80%;
}
.solBackgroundGameObject-refresh-mobile {
  background-position: 50% 20%;
}
.darkmodeOn .solBackgroundGameObject-refresh-mobile {
  background-position: 50% 80%;
}
.solBackgroundGameObject-refresh {
  background-position: 100% 20%;
}
.darkmodeOn .solBackgroundGameObject-refresh {
  background-position: 100% 80%;
}
.generalButton * {
  transition: all 40ms ease;
}
.generalButton svg,
.toolTipSpan svg {
  fill: #9e3c06;
}
.generalButtonContent > * {
  margin-right: 3px;
  margin-left: 3px;
}
.generalButtonContent > span:not(:first-child) {
  margin-bottom: 1px;
}
.generalButton {
  box-sizing: border-box;
  height: 50px;
  width: 200px;
  position: relative;
  transition: all 0.07s ease-out;
  color: #9e3c06;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 14px;
  margin: 0 7px;
}
.generalButtonBody,
.generalButtonContent,
.generalButtonFace,
.generalButtonOverlay {
  height: calc(100% - 4px);
  width: 100%;
  position: absolute;
  border-radius: 14px;
}
.generalButtonBody {
  top: 4px;
  background: linear-gradient(
    90deg,
    #e77a06 0,
    #b44400 15%,
    #b44400 85%,
    #e77a06 100%
  );
  box-shadow: inset 0-1px 1px 0 rgba(0, 0, 0, 0.5),
    0 0 3px 3px rgba(0, 0, 0, 0.5);
}
.generalButtonContent {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
}
.generalButtonFace,
.generalButtonOverlay {
  box-shadow: inset 0-1px 2px 0#b44400;
}
.generalButtonFace {
  background: radial-gradient(
    ellipse at -12px 2px,
    #fef88c 0,
    #fef34a 1%,
    #f9dc01 2%,
    #ffba21 50%
  );
}
.generalButtonFace::after,
.generalButtonOverlay::after {
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 42px);
  border-radius: 100%;
  filter: blur(0.5px);
  background-image: linear-gradient(
    to right,
    transparent 0,
    #f8c124 10%,
    #f8c124 90%,
    transparent 100%
  );
}
.generalButtonOverlay {
  opacity: 0;
  background: radial-gradient(
    ellipse at -12px 2px,
    #fef88c 0,
    #fef34a 5%,
    #f9dc01 10%,
    #ffba21 60%
  );
}
.darkmodeOn .darkmodeChange .darkmodeToggle .darkmodeSlider .darkmodeThumb svg,
.generalButton:hover .generalButtonOverlay {
  opacity: 1;
}
.generalButton:hover .generalButtonContent {
  color: #ca500c;
}
.generalButton:hover svg {
  fill: #ca500c;
}
.generalButton:active .generalButtonBody {
  transform: translateY(-2px);
}
.generalButton:active {
  transform: translateY(2px);
}
.newGameHeaderButtonsWrapper > .generalButton {
  margin-bottom: 7px;
}
.gameLogoImg {
  height: 50px;
  margin-top: 7px;
}
.linksTopBar {
  height: var(--top-links-bar-height);
  font-size: var(--top-links-font-size);
  position: relative;
  top: 0;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.withoutTopLinks .linksTopBar {
  display: none;
}
.withoutTopLinks .topBarSpace-after-logo {
  flex: 1 1 0px;
}
.withoutTopLinks .topBarSpace-after-wrap1 {
  flex: 30 30 0px;
}
.withoutTopLinks .topBarSpace-after-new {
  flex: 10 10 0px;
}
.withoutTopLinks .topBarSpace-after-wrap2 {
  flex: 8 8 0px;
}
.withTopLinks .topBarSpace-after-logo {
  flex: 2 2 0px;
}
.withTopLinks .topBarSpace-after-wrap1 {
  flex: 1 1 0px;
}
.withTopLinks .topBarSpace-after-wrap2 {
  flex: 30 30 0px;
}
.topBarSpace-after-links {
  flex: 4 4 0px;
}
.linksTopBar > * {
  margin: 0 8px;
  color: #fff;
  text-decoration: none;
}
.linksTopBar > :hover {
  text-decoration: underline;
  cursor: pointer;
}
.linksTopBar > a,
.linksTopBar > span {
  white-space: nowrap;
}
.resources-dropdown {
  position: relative;
  display: inline-block;
}
.resources-dropdown > span {
  cursor: pointer;
  white-space: nowrap;
}
.resources-dropdown > span::after {
  display: inline-block;
  margin-left: 3px;
  vertical-align: 2px;
  content: "";
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 120px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1000;
  border-radius: 4px;
  top: 100%;
  left: 0;
  margin-top: 4px;
}
.dropdown-content a {
  color: #000;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  border-radius: 4px;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
.resources-dropdown.open .dropdown-content {
  display: block;
}
.gameTopBar {
  display: flex;
  background: url(./images/topbar-narrow.png);
  height: var(--game-top-bar-height);
  z-index: 85;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 16px;
  box-sizing: border-box;
}
.withTopLinks .gameTopBar .generalButton {
  flex-shrink: 0;
}
.gameSideBar .gameOptionsWrapper span,
.withTopLinks .gameFullscreenWrapper span,
.withTopLinks .gameMenuWrapper span,
.withTopLinks .gameOptionsWrapper span {
  display: none !important;
}
.withTopLinks .gameFullscreenWrapper,
.withTopLinks .gameOptionsWrapper {
  width: 42px !important;
}
.gameSideBar .gameOptionsWrapper {
  width: 49px !important;
}
.withTopLinks .gameMenuWrapper {
  width: 42px !important;
}
.isMobile.isMobile:not(.isTablet) .gameMenuWrapper span,
.isMobile.isMobile:not(.isTablet) .gameNewWrapper span {
  display: none !important;
}
.isMobile.isMobile:not(.isTablet) .gameMenuWrapper,
.isMobile.isMobile:not(.isTablet) .gameNewWrapper {
  width: 49px !important;
}
.isMobile.isMobile:not(.isTablet) .gameMenuWrapper svg {
  padding-left: 2px;
}
.gameTopBarBtnsWrap2 svg {
  height: 1em;
}
@media (orientation: portrait) {
  .isMobile.isMobile:not(.isTablet) .gameTopBar .generalButton {
    margin: 0 11px;
  }
}
.gameLoginLinksWrap {
  position: relative;
  display: inline-flex;
  color: #fff;
}
.gameLoginLinksWrap span {
  font-size: 16px;
  line-height: 16px;
}
.gameTopBarLtr .gameLoginLinksWrap {
  text-align: right;
}
.gameTopBarRtl .gameLoginLinksWrap {
  text-align: left;
}
.gameLogoLang,
.gameTopBarBtnsWrap {
  display: flex;
  align-items: center;
}
.gameTopBarBtnsWrap {
  position: relative;
}
.gameTopBarRtl,
.gameTopBarRtl > .gameTopBarBtnsWrap {
  flex-direction: row-reverse;
}
.gameTopBarBtnsWrap1Phone,
.gameTopBarBtnsWrap1Tablet,
.gameTopBarBtnsWrap2Phone,
.gameTopBarBtnsWrap2Tablet {
  position: absolute;
  top: 7px;
}
.gameTopBarLtr .gameTopBarBtnsWrap1Phone {
  left: 26px;
}
.gameTopBarRtl .gameTopBarBtnsWrap1Phone {
  right: 26px;
}
.gameTopBarLtr .gameTopBarBtnsWrap1Tablet {
  left: 26px;
}
.gameTopBarLtr .gameTopBarBtnsWrap2Phone,
.gameTopBarRtl .gameTopBarBtnsWrap1Tablet {
  right: 26px;
}
.gameTopBarRtl .gameTopBarBtnsWrap2Phone {
  left: 26px;
}
.gameTopBarLtr .gameTopBarBtnsWrap2Tablet {
  right: 160px;
}
.gameTopBarRtl .gameTopBarBtnsWrap2Tablet {
  left: 160px;
}
.gameTopBarBtnsWrap2 {
  flex-grow: 3;
}
.homeFavWrapper svg {
  margin-bottom: 3px;
}
@media (min-width: 1081px) {
  .gameTopBar {
    background-image: url(./images/topbar-wide.png);
  }
}
@media (min-width: 1400px) {
  .gameTopBar .generalButton {
    height: 44px;
  }
}
@media (orientation: portrait) and (max-width: 730px) {
  .isMobile .gameOptionsWrapper {
    display: none;
  }
}
.gameMainDiv {
  display: block;
  width: 100%;
  height: 100%;
  transition: background-color 0.1s ease-out;
  background-size: cover;
}
.gameMainBackground {
  background-image:url(/assets/images/rail-background.jpg);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 350px 100%;
}
.fullscreenIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fullscreenIconExit,
.fullscreenLabelExit,
.menuFullscreenLabelExit {
  display: none;
}
.fullscreenLabelEnter,
.fullscreenLabelExit {
  margin-left: 6px;
}
.fullscreenToggleBtn .fullscreenIcon {
  margin-right: 6px;
}
.fullscreen-active .fullscreenIconEnter,
.fullscreen-active .fullscreenLabelEnter,
.fullscreen-active .menuFullscreenLabelEnter,
.selectedGameTypeTitle > span {
  display: none;
}
.fullscreen-active .fullscreenIconExit,
.fullscreen-active .fullscreenLabelExit,
.fullscreen-active .menuFullscreenLabelExit {
  display: inline-flex;
}
.noscriptsDiv {
  background-color: #000;
  color: #fff;
  font-size: 20px;
  text-align: center;
  height: 50px;
  position: relative;
  top: 0;
  z-index: 50;
  width: 80%;
  margin-left: 10%;
}
.regTextTd {
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 8px;
  line-height: 20px;
  text-align: right;
}
.dropPoint0,
.dropPoint1 {
  position: absolute;
  display: inline;
  z-index: 999;
}
.dropPoint1 {
  background-color: rgba(126, 163, 226, 0.4);
}
.hintDiv {
  position: absolute;
  display: inline-block;
  pointer-events: none;
  border-radius: 7%;
}
.hintOnCardColor0 {
  background-color: #4181ec;
}
.hintOnCardColor1 {
  background-color: #00bcd4;
}
.hintOnCardColor2 {
  background-color: #ff5722;
}
.hintOnCardColor3 {
  background-color: #2d2929;
}
.hintOnCardColor4 {
  background-color: #8bc34a;
}
.hintOnCardColor5 {
  background-color: #f9c509;
}
.darkmodeOn .hintDiv,
.hintOnCardColor6,
.hintOnCardColorSpider {
  background-color: #c7b60d;
}
.hintOnCardStyle1 {
  opacity: 0.1;
  animation: pulse linear 1.6s infinite;
}
.hintOnCardStyle2 {
  opacity: 0.1;
  animation: pulse linear 0.6s infinite;
}
.hintOnCardStyle3 {
  opacity: 0.6;
}
.hintMsgColor,
.labelColors {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
.hintMessageDivPhone.hintMsgColor {
  background-color: rgba(0, 0, 0, 0.8);
}
.autoplayButton {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  height: 70px;
  width: 270px;
  min-width: 270px;
  top: 70%;
  border-radius: 10px;
  font-size: 26px;
  z-index: 100;
  cursor: pointer;
  border: 1px solid #fff;
}
.autoplayButton:active {
  background-color: rgba(0, 0, 0, 0.6);
}
.autoplayButton:hover {
  opacity: 0.8;
}
@media (max-width: 900px), (max-height: 700px) {
  .autoplayButton {
    height: 60px;
    width: 250px;
    min-width: 220px;
    line-height: 28px;
  }
}
@media (max-width: 600px), (max-height: 501px) {
  .autoplayButton {
    height: 50px;
    font-size: 22px;
  }
}
@media (max-width: 500px), (max-height: 400px) {
  .autoplayButton {
    height: 46px;
    font-size: 20px;
  }
}
.formFeedbackMsg {
  margin: 4px;
  padding: 4px;
  max-width: 30ch;
  line-height: 1.1;
}
.accountRelatedWindow #loginmsg,
.accountRelatedWindow .forgotPassLinkPhone {
  font-size: 19px;
  text-wrap: balance;
}
.accountRelatedWindow form {
  width: 100%;
}
.accountRelatedWindow #loginmsg {
  color: red;
}
.errorMessageDiv {
  width: 90%;
  height: 370px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 20px;
}
.accountPseudoLink {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.registerLink {
  text-decoration: underline;
  cursor: pointer;
  line-height: 26px;
}
.accountPseudoLink:hover,
.registerLink:hover {
  opacity: 0.7;
}
.registerInSigninDiv {
  font-size: 24px;
  text-align: center;
  margin-top: 10px;
}
.signinLegacyDiv {
  display: flex;
  flex-direction: row;
}
@media (max-width: 600px) {
  .signinLegacyDiv {
    flex-direction: column;
  }
}
.isMobile #g_a11y_announcement {
  position: absolute;
  right: 1px !important;
  top: 1px !important;
}
.oneTapRegisterNameOuterDivPhone {
  line-height: 22px;
}
.oneTapRegisterNameDiv {
  width: 84%;
}
#newGameMenuContentMobile,
.oneTapRegisterNameDivPhone {
  flex-direction: column;
  align-items: center;
}
.oneTapRegisterNameInput {
  width: 80%;
  border-radius: 10px 0 0 10px;
}
.oneTapRegisterNameInputPhone {
  border-radius: 10px;
  width: 100%;
}
.oneTapRegisterNameButton {
  border-radius: 0 10px 10px 0;
}
.oneTapRegisterNameButtonPhone {
  margin-top: 10px;
}
.helpDiv {
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 auto;
  max-width: 940px;
}
.keysTitle {
  font-size: 26px;
  font-weight: 700;
  padding-bottom: 3px;
}
a.homeGameListName:link,
a.homeGameListName:visited {
  color: #000;
  text-decoration: none;
}
a.favItemLink:link,
a.favItemLink:visited {
  color: #000;
}
a.helpLink:link,
a.helpLink:visited {
  color: #3fa9f5;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
a.helpLink:hover {
  color: #0071bc;
}
a.blueUnderlineLink:link,
a.blueUnderlineLink:visited {
  color: #00f;
  font-size: 18px;
}
a.blueUnderlineLink:hover {
  color: #0071bc;
}
a.introLink:hover,
a.introLink:link,
a.introLink:visited {
  color: #9d3e09;
}
.gameMenuGamesTypeWrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
#newGameMenuContentMobile {
  display: flex;
  overflow: auto;
  position: relative;
  z-index: 0;
  overscroll-behavior: contain;
}
.mobileLayout.newGameWindowWrapper {
  margin-bottom: 0;
  z-index: 1;
  position: relative;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}
.mobileLayout .newGameWindowHeader {
  background-color: #fff;
  width: 100%;
  border-radius: 20px 20px 0 0;
  top: 0;
}
.newGameWindowHeader .newGameHeaderButtonsWrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.newGameHeaderButtonsWrapper .generalButton {
  flex-shrink: 0;
}
.newGameWindowWrapper {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  margin-bottom: 32px;
}
.newGameWindowHeader {
  text-align: center;
  padding-top: 54px;
  padding-bottom: 30px;
  z-index: 1;
}
.newGameWindowHeaderButtons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.newGameWindowHeaderButtons .generalButton {
  margin: 2px 14px;
  padding-bottom: 24px;
}
.newGameWindowHeader > .generalButton {
  margin: 0 3px;
}
.gameTypeTitle,
.gameTypeTitleLongText,
.gameTypeTitleLongText2Line,
.gameTypeTitleMediumText,
.gameTypeTitleMediumText2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 3px;
  margin-right: 3px;
  color: #8e8d8d;
  text-align: center;
}
.gameTypeTitlePhone {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8e8d8d;
  text-align: center;
}
.gameTypeTitle {
  font-size: 16px;
  line-height: 16px;
}
#newgame-window [class^="gameTypeTitle"] span {
  cursor: pointer;
}
#newgame-window [class^="gameTypeTitle"]:hover span {
  text-decoration: underline;
}
.gameTypeTitleMediumText {
  font-size: 14px;
  line-height: 16px;
}
.gameTypeTitleMediumText2 {
  font-size: 13px;
  line-height: 16px;
}
.gameTypeTitleLongText {
  font-size: 12px;
  line-height: 16px;
}
.gameTypeTitleLongText2Line {
  font-size: 12px;
  line-height: 12px;
}
.gameTypeTitlePhone {
  font-size: 22px;
  line-height: 22px;
  margin: 22px 3px 14px;
}
.selectedGameTypeTitle > div {
  border: 2px solid #fffb00;
  width: 90px;
  height: 90px;
}
.gameTypeTitleImage {
  width: 66px;
  height: 66px;
  vertical-align: top;
  cursor: pointer;
  border-radius: 10px;
  margin-bottom: 4px;
}
.affordBtn.gameTypeTitleImage:active {
  scale: 1.05;
}
.gamesForGameType,
.gamesForGameTypeMobile {
  display: flex;
  flex-wrap: wrap;
}
.gamesForGameType {
  width: 88%;
  margin-left: 12%;
}
.gamesForGameTypeMobile {
  width: 100%;
}
.newGameLink,
.newGameLinkPhone {
  display: flex;
  align-items: baseline;
  box-sizing: border-box;
  flex-grow: 1;
}
.newGameLink {
  width: 50%;
  max-width: 50%;
  justify-content: left;
  margin-bottom: 4px;
}
.newGameLinkPhone {
  width: 80%;
  max-width: 400px;
  justify-content: center;
  margin-bottom: 6px;
  background-color: #dedede;
  border-radius: 10px;
  font-size: 20px;
}
.gameWinnableLabel {
  font-weight: 700;
  position: relative;
  top: -3px;
  cursor: pointer;
  margin-left: 2px;
  margin-right: 2px;
}
.gameHelpCloseWrap {
  width: 100%;
  text-align: center;
}
@media (min-width: 1400px) {
  .gameWinnableLabel {
    font-size: 22px;
  }
}
@media (max-width: 1399px) {
  .gameWinnableLabel {
    font-size: 20px;
  }
}
@media (max-width: 700px) {
  .gameWinnableLabel {
    font-size: 17px;
    line-height: 20px;
  }
}
a.allGamesLink:link {
  font-size: 20px;
  line-height: 26px;
}
.allGamesLinkWrapper {
  text-wrap: balance;
  position: relative;
}
#newgame-window .allGamesLinkWrapper {
  display: list-item;
}
a.allGamesLink:link,
a.allGamesLinkPhone2:link,
a.allGamesLinkPhone:link {
  display: inline-block;
  text-decoration: none;
}
a.allGamesLinkPhone:link {
  width: 100%;
}
a.allGamesLinkPhone2:link {
  padding-right: 6px;
}
a.allGamesLinkPhone2:link,
a.allGamesLinkPhone:link {
  text-align: center;
  font-size: 20px;
  padding-top: 7px;
  padding-bottom: 7px;
  text-wrap: balance;
}
a.allGamesLink:link {
  margin-left: 26px;
}
#newgame-window .allGamesLink {
  margin-left: 0;
  text-decoration: underline;
}
a.allGamesLinkHighlighted {
  color: #ad470e;
}
a.allGamesLinkNotHighlighted,
a.allGamesLinkNotHighlighted:link,
a.allGamesLinkNotHighlighted:visited {
  color: #404042;
}
a.allGamesLink:hover {
  color: #8c5419;
}
a.statsGameLink:link {
  color: #404042;
  font-size: 22px;
  text-decoration: underline;
}
a.statsGameLink:visited {
  color: #404042;
}
a.statsGameLink:hover {
  color: #0071bc;
}
a.outlink:link {
  color: #404042;
  font-size: 18px;
  text-decoration: underline;
}
a.outlink:visited {
  color: #404042;
}
a.outlink:hover {
  color: #0071bc;
}
.mobileAppLinkImg:hover {
  opacity: 0.9;
}
a.mobileAppLink:link,
a.mobileAppLink:visited {
  color: #404042;
  font-size: 22px;
  text-decoration: none;
}
a.mobileAppLink:hover {
  color: #0071bc;
  text-decoration: underline;
}
.absoluteCentered {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.absoluteLeftCenter,
.absoluteRightCenter {
  position: absolute;
  top: 50%;
  max-width: 60%;
}
.absoluteCentered {
  left: 50%;
}
.absoluteRightCenter {
  right: 40%;
  transform: translate(50%, -50%);
}
.absoluteLeftCenter {
  left: 40%;
  transform: translate(-50%, -50%);
}
.affordBtn.optsTabBtnGeneric:hover {
  scale: 1.03;
}
.affordBtn.optsTabBtnGeneric:active {
  scale: 1.06;
}
.optTabSelected {
  color: #fff;
  background-color: #592902;
}
.optTabNotSelected {
  color: #592902;
  background-color: #fff;
}
.outerCopyrightDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eee;
  font-size: 19px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.accountRelatedWindow {
  box-sizing: border-box;
  background: linear-gradient(90deg, #fafafa 0, #fff 100%);
  max-width: 50ch;
  text-wrap: balance;
  overflow: auto;
}
.accountRelatedWindow .accountRelatedInnerWindow {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.accountRelatedWindow.openPassAccountWindow {
  overflow: hidden;
  padding: 16px;
}
.openPassAccountWindow .accountRelatedInnerWindow {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  min-height: 0;
  width: 100%;
}
.openPassAccountWindow .accountRelatedContent {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.accountRelatedWindow .signinInfoText {
  margin-bottom: 32px;
  text-align: center;
}
.isMobile .accountRelatedWindow {
  padding: 16px 28px;
}
.accountRelatedWindow .modalTopTitle {
  margin-bottom: 32px;
  text-wrap: balance;
}
.openPassAccountWindow .modalTopTitle {
  flex: 0 0 auto;
  margin-bottom: 16px;
}
@media (max-width: 479px) {
  .accountRelatedWindow.openPassAccountWindow {
    padding: 8px;
  }
  .openPassAccountWindow .accountRelatedInnerWindow {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .openPassAccountWindow .modalTopTitle {
    display: none;
  }
}
@media (max-height: 560px) {
  .openPassAccountWindow .modalTopTitle {
    display: none;
  }
}
.signinMenuWrapper {
  overflow: auto;
}
#register-form .modalTopTitle {
  margin-bottom: 18px;
  line-height: 1.2em;
  text-wrap: balance;
  font-size: 24px;
}
#register-form .popupFieldset {
  gap: 6px;
}
#register-form .toolTipSpan {
  font-size: 16px;
  text-wrap: balance;
  margin: 0 8px;
}
#register-form .accountRelatedInput {
  padding-bottom: 8px;
}
#register-form .pseudoLinkBlueUnder {
  font-size: 19px;
  text-wrap: balance;
  max-width: 160px;
}
#register-form .solButton {
  margin: 8px 4px;
}
#registermsg {
  text-align: center;
  color: red;
  font-size: 18px;
}
#registermsg,
#signin-form .forgotPassPseudoLinkPhone,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
.accountRelatedWindow .loginOptionsSeparator {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  width: 100%;
  color: #a2a2a2;
  margin: 12px 0;
}
.openPassAuthLanding,
.openPassLegacyAuthView {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}
#stats-window .statsTabGroups .statsTabGroup input,
.openPassAuthLanding[hidden],
.openPassLegacyAuthView[hidden] {
  display: none;
}
.openPassAuthChoices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
}
.openPassAuthChoices .g_id_signin {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.openPassAuthChoices > :only-child {
  grid-column: 1/-1;
}
.openPassAuthChoiceButton,
.openPassRegistrationChoice {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #0e6ae4;
  border-radius: 4px;
  background: #0e6ae4;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
.openPassRegistrationChoice {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border-color: #c7ddfa;
  background: #e7f1ff;
  color: #0759c3;
}
.openPassAuthChoiceButton:focus-visible,
.openPassAuthChoiceButton:hover {
  background: #0759c3;
}
.openPassRegistrationChoice:focus-visible,
.openPassRegistrationChoice:hover {
  background: #d7e9ff;
}
.openPassLegacyBack {
  margin: -4px 0 12px;
  padding: 6px;
  border: 0;
  background: 0 0;
  color: #0e6ae4;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
}
.openPassLegacyAuthView form {
  min-width: 0;
  width: 100%;
}
.openPassLegacyAuthView .accountRelatedFieldset {
  box-sizing: border-box;
}
@media (max-width: 479px) {
  .openPassAuthChoices {
    grid-template-columns: 1fr;
  }
}
.loginOptionsSeparator hr {
  flex-grow: 1;
  height: 2px;
  background-color: #dadce0;
  border: 0;
}
.accountRelatedWindow .signinOtherOptionNote,
.accountRelatedWindow .solButton {
  display: flex;
  text-align: center;
  text-wrap: balance;
}
.accountRelatedWindow .solButton {
  box-sizing: border-box;
  border-radius: 6px;
  align-items: center;
  padding: 12px 24px;
  justify-content: center;
  background-color: #0e6ae4;
  border: 0;
  font-size: 0.9em;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
  min-width: 12ch;
  gap: 12px;
  margin: 16px;
}
#stats-window #statsWrapper,
.accountRelatedWindow .accountRelatedActionDiv {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row wrap;
}
.accountRelatedWindow .accountRelatedFieldset {
  display: flex;
  justify-content: space-between;
  border: 2px solid #dadce0;
  border-radius: 6px;
  padding: 0;
  margin: 0;
  background-color: #f0f8ff;
  width: 100%;
  max-width: 40ch;
  flex-grow: 1;
}
#changeusername-window.accountRelatedWindow .accountRelatedFieldset {
  width: auto;
}
.accountRelatedWindow .popupFieldset {
  box-sizing: border-box;
  border: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  width: 100%;
}
.accountRelatedWindow .popupFieldset fieldset {
  width: 100%;
  max-width: 40ch;
}
.accountRelatedWindow .accountRelatedInputLegend {
  margin: 0 8px;
  font-size: 20px;
  color: #5f6368;
  white-space: nowrap;
}
.accountRelatedWindow .pseudoLinkBlueUnder {
  margin: 0;
  line-height: 1.2em;
  text-align: start;
  padding: 0 8px;
  text-wrap: balance;
}
.popupFieldset {
  border: 0;
}
.accountRelatedWindow .accountRelatedInput {
  box-sizing: border-box;
  border-radius: 4px;
  padding: 2px 14px 10px;
  border: 0;
  outline: 0;
  font-size: 18px;
  flex-grow: 1;
  background-color: transparent;
  width: 160px;
}
#changeusername-window {
  flex-flow: column nowrap;
  padding: 32px 24px;
}
.accountRelatedWindow .modalTopTitle {
  line-height: 1.1;
}
.accountRelatedWindow .nicknameChangeWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.accountRelatedWindow .nicknameCurrentWrapper,
.accountRelatedWindow .nicknameNewWrapper {
  display: flex;
  flex-direction: column;
  margin: 12px;
  align-self: flex-start;
}
.accountRelatedWindow .accountRelatedInputAndButtonWrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}
.accountRelatedWindow .accountRelatedNote {
  text-align: center;
  line-height: 1.1;
}
#onetapregister-window {
  gap: 8px;
}
#onetapregister-window .accountRelatedInputAndButtonWrapper {
  align-items: flex-end;
}
#onetapregister-window .accountRelatedInputAndButtonWrapper .solButton {
  height: 48px;
}
.accountRelatedWindow
  .accountRelatedInputAndButtonWrapper
  > .accountRelatedFieldset,
.accountRelatedWindow
  .accountRelatedInputAndButtonWrapper
  > .solButton.oneTapRegisterNameButton {
  margin: 4px;
}
.accountRelatedWindow .changeNicknameFieldset {
  flex-grow: 1;
}
.accountRelatedWindow .accountRelatedInput.accountRelatedInputNoLegend {
  padding: 10px 14px;
}
.accountRelatedWindow .nicknameChangeInput {
  padding: 10px 14px;
  max-width: 25ch;
}
.accountRelatedWindow .solButton.solButtonClose {
  background-color: var(--color-primary);
}
.accountRelatedWindow .solButton.oneTapRegisterNameButton {
  padding: 8px 24px;
  margin: 0;
}
@media (min-width: 471px) and (max-width: 720px) {
  .regTextTd {
    width: 100px;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 6px;
  }
  .popupFieldset {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
}
@media (min-width: 371px) and (max-width: 470px) {
  .regTextTd {
    width: 106px;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 6px;
  }
  .popupFieldset {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
}
@media (max-width: 370px) {
  .regTextTd {
    width: 107px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-right: 6px;
  }
  .popupFieldset > table {
    margin: 0 auto;
  }
  .popupFieldset {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
}
.gameBackHomeDiv {
  font-size: 26px;
  margin-top: 10px;
  text-align: center;
}
.klondikeRewindStatus {
  font-size: 20px;
  min-height: 28px;
  margin: 16px 12px 4px;
  text-align: center;
}
.statsH3 {
  font-size: 30px;
  padding-top: 20px;
  margin-top: 0;
  margin-bottom: 14px;
}
.statsH3Phone {
  font-size: 24px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 0;
  margin-bottom: 5px;
}
.statsDetails {
  height: 625px;
  overflow-y: auto;
  padding: 16px 6px 0;
}
.statsResetPseudoLink {
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: underline;
  font-size: 22px;
}
#stats-window * {
  box-sizing: border-box;
  line-height: 1.1;
  text-wrap: balance;
}
#stats-window,
.congrats-wrapper {
  --color-0-A: #804817;
  --color-0-B: #552d0b;
  --color-1: white;
  --color-2-A: #efe9dd;
  --color-2-B: #fff7e9;
  --color-3: #804817;
  --color-4-A: #0051ff;
  --color-4-B: #007fd4;
}
#stats-window.statsWhiteBg {
  background: #fff;
}
#stats-window #statsWrapper {
  height: 100%;
  overflow: auto;
  flex-flow: column nowrap;
  justify-content: space-between;
  padding: 16px;
  color: var(--color-1);
  background-image: url(../../assets/col-header-v133.jpg);
}
#stats-window #statsHeader > :not(:first-child),
#stats-window #statsWrapper > :not(:first-child) {
  margin-top: 16px;
}
#stats-window .statsSection {
  display: flex;
  width: 100%;
}
#stats-window #statsHeader,
#stats-window #statsMain {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#statsHeader .statsTitle {
  display: flex;
  font-size: 40px;
  color: var(--color-3);
}
#statsHeader .statsPickGame {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  width: 100%;
  align-items: center;
}
#statsHeader .statsPickGame .statsChooseLabel {
  display: flex;
  flex-flow: row;
  justify-content: center;
}
#statsHeader .statsPickGame .statsChooseDropdown {
  flex-flow: row;
  justify-content: center;
}
#statsHeader .statsPickGame .statsChooseLabel {
  flex-grow: 3;
  min-width: 10ch;
}
#statsHeader .statsPickGame .statsChooseDropdown {
  border-radius: 8px;
  flex-grow: 5;
  display: flex;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.4));
  cursor: pointer;
  font-size: 20px;
  max-width: 100%;
  max-width: min(40ch, 100%);
  padding: 8px;
  border: 0;
  color: var(--color-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}
#statsHeader .statsChooseDropdown .statsDropdownOption {
  cursor: pointer;
}
#statsHeader
  .statsChooseDropdown
  .statsDropdownOption.statsDropdownOptionTitle {
  font-size: 28px;
}
#stats-window #statsMain {
  border-radius: 18px;
  flex-grow: 1;
  padding: 16px;
  max-height: 80%;
  overflow-y: auto;
  background-color: #fff;
  color: var(--color-3);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.31);
}
#stats-window #statsMain > :not(:first-child) {
  margin-top: 24px;
}
#stats-window .statsTabGroups {
  width: 100%;
  justify-content: space-evenly;
  display: flex;
  flex-flow: row wrap;
  position: sticky;
  top: 0;
  font-size: 22px;
  z-index: 1;
}
#stats-window .statsTabGroups .statsDropdown {
  padding: 4px 12px;
  border-radius: 8px;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  background: #fff;
  color: var(--color-3);
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.5));
  cursor: pointer;
}
#stats-window .statsTabGroups .statsDropdown.statsSelected {
  color: #fff;
  background: linear-gradient(
    to bottom right,
    var(--color-4-A) 0%,
    var(--color-4-B)
  );
}
#stats-window .statsTabGroups .statsDropdown .statsDropdownOption {
  background: #fff;
  color: var(--color-3);
  background: linear-gradient(
    to bottom right,
    var(--color-4-A) 0%,
    var(--color-4-B)
  );
  cursor: pointer;
}
#stats-window .statsTabGroups .statsTabGroup {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
#stats-window .statsTabGroups .statsTabGroup > * {
  margin: 4px;
}
#stats-window .statsTabGroups .statsTabGroup .statsTabGroupName {
  font-size: 20px;
}
#stats-window .statsTabGroups .statsTabGroup .statsTabButton {
  background: #fff;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.5));
  display: flex;
  flex-flow: row nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s ease;
}
#stats-window .statsTabGroups .statsTabGroup input:checked + label {
  background: linear-gradient(
    to bottom right,
    var(--color-4-A) 0%,
    var(--color-4-B)
  );
  color: #fff;
}
#stats-window .statsTabWrapper {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}
#stats-window .statsTabWrapper > :not(:first-child) {
  margin-top: 24px;
}
#stats-window .statsTabButtons {
  display: flex;
  flex-flow: row nowrap;
  z-index: 1;
  border-radius: 24px;
  position: sticky;
  top: 0;
  color: var(--color-3);
  flex-shrink: 0;
}
#stats-window .statsTabButtons > * {
  margin-left: 6px;
  margin-right: 6px;
}
#stats-window .statsTabButtons .statsTabButton {
  background: #fff;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.5));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  padding: 12px 16px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.1s ease;
}
#stats-window .statsTabButtons .statsTabButton.statsActive {
  background: linear-gradient(
    to bottom right,
    var(--color-4-A) 0%,
    var(--color-4-B)
  );
  color: #fff;
}
#statsMain .statsContainer,
#statsMain .statsContainerWrapper {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
  flex-shrink: 0;
}
#statsMain .statsContainerWrapper {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #646464;
  font-size: 26px;
}
#statsMain .statsContainer {
  font-size: 20px;
  flex-grow: 1;
  align-items: stretch;
}
#statsMain .statsContainer.statsMahjongContainer {
  flex-flow: row wrap;
  align-items: center;
}
#statsMain .statsContainer.statsMahjongContainer > :not(:first-child) {
  margin-top: 8px;
}
#statsMain .statsContainer.statsMahjongContainer .statsItem {
  align-items: center;
}
#statsMain .statsContainer.statsMahjongContainer .statsItemMahjong {
  background: 0 0;
  margin: 4px;
  flex-grow: 0;
}
#statsMain .statsContainer.statsMahjongContainer .statsItem .statsImgElem {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
#statsMain .statsContainer .multiStatWrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex-grow: 1;
  align-items: stretch;
  flex-basis: 40%;
}
#statsMain .statsContainer .multiStatWrapper .statsItemOuter,
#statsMain.statsCenteredMain .statsContainer {
  flex-grow: 0;
}
#statsMain.statsCenteredMain {
  justify-content: center;
}
#statsMain .statsContainer .statsEmptyStats {
  display: flex;
  align-items: center;
  justify-content: center;
}
#statsMain.statsTrophiesMain {
  padding: 16px 12px 32px;
  box-sizing: border-box;
  width: 100%;
  align-items: stretch;
}
#statsMain.statsTrophiesMain .statsTrophiesWrapper {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#statsMain.statsTrophiesMain .statsTrophiesCards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
#statsMain.statsTrophiesMain .statsTrophiesCard {
  flex: 1 1 240px;
  min-width: 0;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(44, 34, 24, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
#statsMain.statsTrophiesMain .statsTrophiesCardTitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7a6b5d;
}
#statsMain.statsTrophiesMain .statsTrophiesCardBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#statsMain.statsTrophiesMain .statsTrophiesCardIconWrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
#statsMain.statsTrophiesMain .statsTrophiesCardIcon {
  width: 72px;
  height: 72px;
}
#statsMain.statsTrophiesMain .statsTrophiesCardStar {
  font-size: 32px;
  line-height: 1;
}
#statsMain.statsTrophiesMain .statsTrophiesCardName {
  font-size: 18px;
  font-weight: 600;
  color: #362d24;
}
#statsMain.statsTrophiesMain .statsTrophiesCardMeta {
  font-size: 14px;
  color: #7a6b5d;
}
#statsMain.statsTrophiesMain .statsTrophiesCardMetaOuter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
#statsMain.statsTrophiesMain
  .statsTrophiesCardMetaOuter
  .statsTrophiesCardMeta {
  font-size: 14px;
  text-align: center;
  color: #7a6b5d;
}
#statsMain.statsTrophiesMain .statsTrophiesCardComplete {
  background: linear-gradient(
    135deg,
    rgba(255, 228, 150, 0.95),
    rgba(255, 186, 120, 0.95)
  );
  color: #3f2d1a;
}
#statsMain.statsTrophiesMain .statsTrophiesCardComplete .statsTrophiesCardMeta,
#statsMain.statsTrophiesMain
  .statsTrophiesCardComplete
  .statsTrophiesCardTitle {
  color: inherit;
}
#statsMain.statsTrophiesMain .statsTrophySummary .statsValue {
  font-size: 42px !important;
}
#statsMain.statsTrophiesMain .statsTrophiesEarned {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#statsMain.statsTrophiesMain .statsTrophiesSubheading {
  font-size: 18px;
  font-weight: 600;
  color: #3f382f;
}
#statsMain.statsTrophiesMain .statsTrophiesGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
#statsMain.statsTrophiesMain .statsTrophyTile {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(59, 46, 34, 0.08);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
#statsMain.statsTrophiesMain .statsTrophyTileIcon {
  width: 48px;
  height: 48px;
}
#statsMain.statsTrophiesMain .statsTrophyTileName {
  font-size: 14px;
  font-weight: 600;
  color: #362d24;
  text-align: center;
}
#statsMain.statsTrophiesMain .statsTrophyTileWins {
  font-size: 12px;
  color: #7a6b5d;
}
#statsMain.statsTrophiesMain .statsTrophiesEmpty {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: #7a6b5d;
  box-shadow: inset 0 0 0 1px rgba(59, 46, 34, 0.08);
}
@media (max-width: 720px) {
  #statsMain.statsTrophiesMain {
    padding: 12px 10px 24px;
  }
  #statsMain.statsTrophiesMain .statsTrophiesCardIcon {
    width: 60px;
    height: 60px;
  }
  #statsMain.statsTrophiesMain .statsTrophiesCardStar {
    font-size: 24px;
  }
  #statsMain.statsTrophiesMain .statsTrophiesGrid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  #statsMain.statsTrophiesMain .statsTrophiesCards {
    flex-direction: column;
  }
  #statsMain.statsTrophiesMain .statsTrophiesCard {
    flex: 1 1 auto;
  }
}
#statsMain .statsItemOuter {
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  margin: 8px;
  color: var(--color-3);
}
#statsMain .statsItemOuter > :not(:first-child) {
  margin-top: 4px;
}
#statsMain .statsItemOuter .statsItemBottomValueOuter {
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  margin-right: 16px;
}
@media (max-width: 800px) {
  #statsMain .statsItemOuter .statsItemBottomValueOuter {
    font-size: 16px;
  }
}
#statsMain .statsItem {
  display: flex;
  flex-flow: column nowrap;
  border-radius: 24px;
  justify-content: space-between;
  flex-grow: 1;
  background: linear-gradient(
    to bottom right,
    var(--color-2-A),
    var(--color-2-B)
  );
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
#statsMain .statsBoxItem.statsSmallBox .statsItem {
  border-radius: 16px;
}
#statsMain .statsBoxItem {
  flex-basis: 40%;
}
#statsMain .statsSmallBox.statsBoxItem {
  flex-basis: 20%;
}
#statsMain .statsBoxItem.statsWideBox {
  flex-basis: 0;
  flex-shrink: 0;
  width: 100%;
}
#statsMain .statsBoxItem.statsWideBox .statsItem .statsValue {
  font-size: 64px;
  white-space: nowrap;
}
#statsMain .statsSmallBox.statsBoxItem .statsItem .statsValueOuter {
  margin: 8px 12px;
}
#statsMain .statsSmallBox.statsBoxItem .statsItem .statsValue {
  font-size: 32px;
}
#statsMain .statsItem .statsName {
  display: flex;
  margin: 12px;
  text-align: start;
  text-wrap: balance;
  min-width: 6ch;
  font-size: 22px;
  flex-flow: column;
}
#statsMain .statsItem .statsName > :not(:first-child) {
  margin-top: 4px;
}
#statsMain .statsItem .statsName .statsExplanation {
  font-size: 18px;
  opacity: 0.7;
}
#statsMain .statsBoxItem .statsItem .statsName {
  margin-bottom: 0;
}
#statsMain .statsBoxItem.statsBigBox .statsItem .statsName {
  font-size: 24px;
}
#statsMain .statsItem .statsValueOuter {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 8px;
}
#statsMain .statsItem .statsValue {
  display: flex;
  justify-content: flex-end;
  line-height: 1;
  letter-spacing: -0.05em;
  align-items: center;
  min-width: 3ch;
  flex-grow: 1;
}
#statsMain .statsBoxItem .statsItem .statsValueOuter {
  margin: 4px 16px;
}
#statsMain .statsItem .statsValueInner {
  display: flex;
  align-items: flex-end;
  font-size: 32px;
  margin: 4px;
}
#statsMain .statsSmallBox .statsItem .statsValueInner {
  margin: 0;
}
#statsMain .statsBoxItem .statsItem .statsValue {
  font-size: 86px;
}
#statsMain .statsLongItem {
  width: 100%;
}
#statsMain .statsLongItem .statsItem {
  flex-flow: row nowrap;
  flex-grow: 1;
  border-radius: 16px;
}
#statsMain .statsLongItem .statsItem .statsValueOuter {
  margin: 8px 12px 8px 0;
}
#statsMain .statsLongItem .statsItem .statsValue {
  font-size: 32px;
}
#stats-window #statsFooter {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
#statsFooter .statsMainActionButtons,
#statsFooter .statsOtherActionButtons {
  display: flex;
  flex-flow: row wrap;
  text-transform: uppercase;
  color: var(--color-3);
}
#statsFooter .statsMainActionButtons {
  justify-content: space-evenly;
}
#statsFooter .statsOtherActionButtons {
  flex-grow: 1;
}
#statsFooter .statsMainActionButtons {
  flex-grow: 1;
}
#openStatsSettingsDlg,
#statsFooter .statsOtherActionButtons {
  justify-content: center;
}
#statsFooter .statsButton {
  margin-left: 12px;
  margin-right: 12px;
}
#statsFooter .statsOtherActionButtons .statsButton {
  flex-basis: 25%;
  padding: 8px;
  border-radius: 12px;
}
#statsFooter .statsOtherActionButtons .statsButton.statsManageStats {
  flex-grow: 0;
  flex-basis: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#statsFooter .statsManageStats .statsManageCogIcon {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-size: 750px;
  background-position: -294px -2px;
  width: 32px;
  height: 32px;
}
#statsMain .statsButton.statsMainActionButton {
  flex-grow: 0;
}
#statsFooter .statsMainActionButtons .statsButton,
#statsMain .statsButton.statsMainActionButton {
  background: linear-gradient(0deg, var(--color-4-A) 0%, var(--color-4-B) 100%);
  color: #fff;
  text-decoration: none;
}
#statsFooter .statsButton,
.statsButton.statsMainActionButton {
  display: flex;
  flex-flow: row nowrap;
  padding: 16px 12px;
  background: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  border-radius: 8px;
  align-items: center;
  max-width: 18ch;
  flex-grow: 1;
  justify-content: center;
}
#stats-window .statsButton {
  transition: all 0.1s ease;
  cursor: pointer;
}
#stats-window .statsButton:hover {
  scale: 1.05;
}
#stats-window .statsButton:active {
  scale: 1.1;
}
#openStatsSettingsDlg {
  display: flex;
  align-items: center;
  height: 100%;
  flex-flow: column;
}
#openStatsSettingsDlg > :not(:first-child) {
  margin-top: 16px;
}
#openStatsSettingsDlg .statsButton {
  display: flex;
  padding: 8px 16px;
  background-color: #804817;
  color: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  transition: all 0.1s ease;
  cursor: pointer;
  max-width: 40ch;
}
#openStatsSettingsDlg .statsButton.statsDeleteAccount {
  background-color: #b3261e;
}
#openStatsSettingsDlg .statsButton:hover {
  scale: 1.05;
}
#openStatsSettingsDlg .statsButton:active {
  scale: 1.1;
}
@media (max-width: 600px), (max-height: 700px) {
  #stats-window #statsWrapper {
    padding: 12px;
  }
  #stats-window #statsMain > :not(:first-child),
  #stats-window #statsWrapper > :not(:first-child) {
    margin-top: 12px;
  }
  #stats-window #statsMain {
    padding: 8px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.31);
    border-radius: 8px;
  }
  #stats-window #statsHeader > :not(:first-child) {
    margin-top: 6px;
  }
  #statsHeader .statsTitle {
    font-size: 32px;
  }
  #statsMain .statsSmallBox.statsBoxItem .statsItem .statsValue {
    font-size: 38px;
  }
  #statsMain .statsLongItem .statsItem .statsValue {
    font-size: 28px;
  }
  #statsMain .statsItemOuter {
    margin: 6px;
  }
  #statsMain .statsBoxItem.statsSmallBox .statsItem {
    border-radius: 8px;
  }
  #statsMain .statsLongItem .statsItem {
    border-radius: 12px;
  }
  #statsFooter .statsButton {
    padding: 8px;
  }
  #statsHeader .statsPickGame .statsChooseDropdown {
    padding: 4px;
  }
  #statsMain .statsBoxItem .statsItem .statsValue {
    font-size: 48px;
  }
  #statsMain .statsBoxItem.statsWideBox .statsItem .statsValue {
    font-size: 32px;
  }
  #statsMain .statsItem .statsName {
    margin: 6px;
  }
  #statsMain .statsItem {
    border-radius: 12px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
  }
  #stats-window .statsTabButtons .statsTabButton {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    padding: 6px;
    border-radius: 12px;
    font-size: 16px;
  }
  #statsMain .statsItem .statsName {
    font-size: 18px;
    line-height: 1;
  }
  #stats-window .statsTabGroups > * {
    margin: 4px;
  }
  #stats-window .statsTabGroups .statsTabGroup {
    font-size: 16px;
  }
}
.androidBadge,
.androidBadgeSmaller {
  height: 110px;
  position: relative;
  top: -2px;
}
.androidBadgeSmaller {
  height: 100px;
}
.iosBadge {
  width: 225px;
  height: 75px;
}
.toolTipSpan,
.toolTipSpan .tooltipContent {
  line-height: 1.1;
  text-wrap: balance;
}
.toolTipSpan .tooltipContent {
  visibility: hidden;
  position: fixed;
  background-color: #000;
  color: #fff;
  padding: 16px;
  margin: -16px 4px 0;
  width: 160px;
  border-radius: 10px;
  z-index: 102;
  font-size: 20px;
}
@media (max-width: 770px) {
  .toolTipSpan .tooltipContent {
    padding: 6px;
    margin: -6px 2px 0;
    width: 130px;
    font-size: 16px;
    line-height: 18px;
  }
}
@media (max-width: 570px) {
  .toolTipSpan .tooltipContent {
    left: 50px;
  }
}
.toolTipSpan:hover .tooltipContent {
  visibility: visible;
}
#confirmResetAllStats-window,
#confirmResetSpecificStats-window {
  padding-top: 28px;
}
@media (min-height: 501px) {
  .pauseWindow {
    font-size: 24px;
  }
}
@media (max-width: 680px) {
  .smallPadding {
    padding-left: 4px;
    padding-right: 4px;
  }
}
@media (max-height: 500px) {
  .pauseWindow {
    font-size: 24px;
  }
  .colBtnsWrap {
    padding-bottom: 0;
  }
  .statsH3 {
    font-size: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 0;
    margin-bottom: 5px;
  }
  .popupFieldset {
    padding: 10px 0 0;
  }
  .registerInSigninDiv {
    padding-top: 6px;
    font-size: 22px;
  }
}
.gameMenuSeperator {
  height: 1px;
  width: 100%;
  background-color: #f5f5f5;
}
.gameInfoMainDiv {
  background-color: #fff;
}
.gameInfoMainHeaderWrapper {
  text-align: center;
  background-color: #f3f3f3;
}
.gameInfoMainHeaderMobile {
  font-size: 54px;
  line-height: 54px;
  padding-top: 38px;
  margin-top: 0;
  margin-bottom: 24px;
}
.gameInfoGameDetailsWrapper,
.gameInfoGameDetailsWrapperMobile {
  display: flex;
  justify-content: center;
}
.gameInfoGameDetailsWrapperMobile {
  font-size: 26px;
  flex-direction: column;
  padding-bottom: 20px;
}
.gameInfoHeaderSeperator {
  text-align: center;
  width: 7%;
}
.gameInfoDetailsWrapper,
.gameInfoDetailsWrapperMobile {
  display: flex;
}
.gameInfoDetailsWrapper:first-child {
  width: 47%;
  justify-content: flex-end;
}
.gameInfoDetailsWrapper:last-child {
  width: 47%;
  justify-content: flex-start;
}
.gameInfoDetailsWrapper > span:first-child {
  color: #966100;
  margin-right: 6px;
}
.gameInfoDetailsWrapper > span:last-child {
  color: #000;
}
.gameInfoDetailsWrapperMobile > span:first-child {
  width: 49%;
  color: #966100;
  text-align: right;
  margin-right: 6px;
}
.gameInfoDetailsWrapperMobile > span:last-child {
  width: 49%;
  color: #000;
  text-align: left;
  margin-left: 6px;
}
@media (max-width: 580px) {
  .gameInfoMainHeaderMobile {
    font-size: 40px;
    line-height: 40px;
    padding-top: 20px;
    margin-bottom: 12px;
  }
  .gameInfoGameDetailsWrapperMobile {
    padding-bottom: 16px;
  }
  .gameInfoDetailsWrapperMobile {
    justify-content: center;
    margin-left: 8px;
    font-size: 22px;
  }
  .gameInfoDetailsWrapperMobile > span:first-child {
    width: auto;
    margin-right: 6px;
  }
  .gameInfoDetailsWrapperMobile > span:last-child {
    width: auto;
  }
}
.gameIntroBodyWrapMobile {
  display: flex;
  margin: 0 20px 20px;
  flex-direction: column;
  font-weight: 400;
}
.gameIntroBodyWrap li,
.gameIntroBodyWrap p,
.gameIntroBodyWrapMobile li,
.gameIntroBodyWrapMobile p {
  margin: 0;
  font-size: 20px;
  font-family: Arial;
}
.gameIntroBodyWrap p + p,
.gameIntroBodyWrapMobile p + p {
  margin-top: 16px;
}
li,
p {
  text-wrap: pretty;
}
.gameIntroBodyWrap h2,
.gameIntroBodyWrap h3,
.gameIntroBodyWrapMobile h2,
.gameIntroBodyWrapMobile h3 {
  display: inline-block;
  margin-top: 58px;
  margin-bottom: 16px;
  font-size: 34px;
  border-bottom: 4px solid #f8a713;
  padding-bottom: 4px;
  text-transform: uppercase;
}
.gameIntroBodyWrap h4,
.gameIntroBodyWrapMobile h4 {
  font-size: 28px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.gameIntroBodyWrap li,
.gameIntroBodyWrapMobile li,
.helpDiv ul {
  margin-top: 5px;
}
.gameIntroBodyWrap > .introPart1,
.gameIntroBodyWrap > .introPart2 {
  max-width: calc(50% - 35px);
}
.gameIntroBodyWrap > .introPart0 > p:first-child {
  margin-top: 30px;
}
.gameIntroBodyWrap img {
  max-width: 1000px;
  display: block;
  margin: auto;
}
.gameInfoMainDiv span.cgPlayerAvatar {
  width: 24px;
  height: 22px;
  min-width: unset;
  min-height: unset;
  margin-bottom: -4px;
  display: inline-block;
}
.gameInfoMainDiv table {
  width: 50%;
  border-collapse: collapse;
  margin: auto auto 14px;
}
.gameInfoMainDiv td,
.gameInfoMainDiv th {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.gameInfoMainDiv th {
  background-color: #966100;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
.gameInfoMainDiv tr:nth-child(even) {
  background-color: #f2f2f2;
}
.gameInfoMainDiv tr:last-child td {
  border-bottom: none;
}
.gameTabsBackgrounds,
.gameTabsBackgroundsPhone {
  display: flex;
  padding: 8px 2px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 498px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.gameTabsBackgrounds {
  margin-top: 0;
  padding: 0 2px 8px;
  align-content: stretch;
}
.gameTabsCardsBack,
.gameTabsCardsSet {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  height: 520px;
}
.gameTabsCardsBack {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 4px;
}
.gameTabsCardsSet {
  flex-direction: column;
  align-items: center;
}
.gameTabsCardsClassic {
  display: flex;
  padding-top: 8px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.gameTabsCardsCollectibles,
.gameTabsCardsCollectiblesPhone {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.gameTabsOptions {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  height: 482px;
  padding: 10px 18px;
  font-size: 20px;
}
.colLocked {
  color: #fff;
  line-height: 140px;
  text-align: center;
}
.solvableGamesWrapper {
  position: relative;
  margin-top: 18px;
  line-height: 14px;
  padding-left: 2px;
  padding-right: 2px;
}
.NoSolvableGamesMsg,
.NoSolvableGamesMsgPhone {
  width: 100%;
  top: 26px;
  font-size: 18px;
}
.NoSolvableGamesMsg {
  position: absolute;
}
.pauseTextWrapper {
  margin-bottom: 20px;
  margin-top: 4px;
}
.gamePauseFigureImg {
  width: 150px;
  height: 185px;
  margin: 12px;
}
.gameNumberedDealInput {
  width: 150px;
  font-size: 1.1em;
}
.gameShowMoreBacks {
  cursor: pointer;
  font-size: 24px;
  text-align: center;
  border-radius: 7px;
  color: #f5f5f5;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 18px;
  margin-top: 4px;
  margin-bottom: 16px;
}
.hintMessageDiv,
.hintMessageDivPhone,
.hintMessageDivTablet {
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 300;
  color: #fff;
  padding-top: 2px;
  padding-bottom: 5px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
  text-wrap: balance;
}
.hintMessageDivPhone {
  bottom: 0;
  width: 92%;
}
.gameMessageText {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  font-size: 26px;
}
@media (max-height: 680px) {
  .hintMessageDiv {
    bottom: 0;
    width: 100%;
  }
  .hintMsgColor {
    background-color: rgba(0, 0, 0, 0.8);
  }
}
@media (min-height: 681px) and (max-height: 720px) {
  .hintMessageDiv,
  .hintMessageDivTablet {
    bottom: 80px;
    border: 1px solid #000;
    border-radius: 15px;
  }
  .hintMessageDiv {
    width: 90%;
  }
  .hintMessageDivTablet {
    width: 76%;
  }
}
@media (min-height: 721px) {
  .hintMessageDiv,
  .hintMessageDivTablet {
    bottom: 116px;
    border: 1px solid #000;
    border-radius: 15px;
  }
  .hintMessageDiv {
    width: 62%;
  }
  .hintMessageDivTablet {
    width: 76%;
  }
}
#bsbAppearanceControls,
#bsbLogicControls {
  display: flex;
  height: 100%;
  align-items: center;
}
#bsbLogicControls {
  justify-content: space-evenly;
}
.affordBtn {
  cursor: pointer;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
  transition: all 0.07s ease-in;
  transition-property: filter, scale, opacity;
}
.affordBtn:hover {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
  scale: 1.05;
}
.affordBtn:active {
  scale: 1.1;
  transition-duration: 0.05s;
}
.optionMenuBackgroundsDiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.optionMenuBackgroundsDiv.optionMenuBgVisibleSprites {
  padding-top: 6px;
}
#options-window {
  --color-yellow: rgb(247, 199, 2);
}
#options-window .optsTabWrapLang {
  position: relative;
  z-index: 16;
}
#options-window .darkmodeChange {
  position: relative;
  display: none;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  z-index: 16;
  background-color: #fff;
  border-radius: 16px;
  width: max-content;
  padding: 6px 12px;
  padding-inline-end: 6px;
  margin: 8px 30px 8px auto;
}
.darkmodeOn .darkmodeChange {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}
#options-window .darkmodeChange .darkmodeLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
}
.darkmodeChange .darkmodeLabel .darkmodeText {
  text-transform: uppercase;
  font-size: 18px;
  color: #000;
}
.darkmodeChange .darkmodeToggle {
  position: relative;
  display: inline-block;
  width: 48px;
  margin-inline-start: 16px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
  --thumb-size: 20px;
  height: calc(var(--thumb-size) + 7px);
}
.darkmodeChange .darkmodeToggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.darkmodeChange .darkmodeToggle .darkmodeSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: gray;
  transition: all 0.1s ease;
  border-radius: 34px;
}
.darkmodeChange .darkmodeToggle .darkmodeSlider .darkmodeThumb {
  position: absolute;
  content: "";
  height: var(--thumb-size);
  width: var(--thumb-size);
  left: 4px;
  background-color: #fff;
  transition: all 0.15s ease;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  margin: auto;
}
.darkmodeChange .darkmodeToggle .darkmodeSlider .darkmodeThumb svg {
  opacity: 0;
  height: 80%;
  width: 80%;
  transition: 0.1s all ease;
}
.darkmodeOn .darkmodeChange .darkmodeToggle .darkmodeSlider {
  background-color: var(--color-yellow);
}
.darkmodeOn .darkmodeChange .darkmodeToggle .darkmodeSlider .darkmodeThumb {
  transform: translateX(var(--thumb-size));
}
#options-window.shouldShowDarkmode .darkmodeChange,
#options-window.shouldShowDarkmode .darkmodeOverlay {
  display: flex;
}
#options-window .darkmodeOverlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 15;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: 0.2s all ease;
  display: none;
  top: 0;
}
.darkmodeOn #options-window .darkmodeOverlay {
  opacity: 1;
  pointer-events: all;
}
.darkmodeOverlay .darkmodeNightIconWrapper {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  transform: translateY(-80px);
  transition: 0.2s all ease;
}
.darkmodeOn .darkmodeOverlay .darkmodeNightIconWrapper {
  transform: translateY(0);
}
.darkmodeNightIconWrapper .darkmodeNightIcon {
  width: 60px;
  height: 60px;
}
.darkmodeNightIconWrapper .darkmodeNightIcon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px #000);
}
.darkmodeNightIconWrapper .darkmodeNightText {
  color: var(--color-yellow);
  font-size: 28px;
  text-shadow: 0 0 8px #000;
}
.optionMenuSolidsWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.optBgSolid,
.optionMenuColorPickerWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.optionMenuColorPickerWrapper {
  flex-shrink: 0;
  position: relative;
}
.isNotMobile .optionMenuColorPickerWrapper {
  width: 80px;
  height: 80px;
  padding-right: 18px;
}
#optionMenuColorPickerInput {
  visibility: hidden;
  width: 0;
  height: 0;
  position: absolute;
}
#bgsolidColorPicker.optBgSolid {
  transition: all 0.07s ease-in;
  transition-property: background-color, filter, scale, opacity;
}
.isNotMobile #bgsolidColorPicker.optBgSolid {
  width: 52px;
  height: 52px;
}
.optBgSolid {
  width: 40px;
  height: 40px;
  margin: 4px;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: gray;
}
#bgsolidColorPicker.colorpickerReset {
  background: linear-gradient(
    90deg,
    #4b3ab4 0,
    #8343ac 25%,
    #f45272 58%,
    #e8fc45 100%
  );
}
#bgsolidColorPicker #bgsolidColorPickerIcon {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-size: 2680%;
  background-position: 35.9% 12.9%;
  height: 80%;
  width: 80%;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}
.optBgGeneric.optMenuSelected {
  outline: 4px solid #592902;
}
.optBgImg {
  border-radius: 3px;
  margin: 4px;
}
.affordBtn.cardBackDiv,
.affordBtn.optBgImg,
.affordBtn.optBgSolid {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
.cardBackDiv {
  display: inline-block;
  box-sizing: border-box;
  height: 120px;
  cursor: pointer;
  background-position: center;
}
.optCardback {
  margin: 8px;
  outline-offset: 4px;
}
.optCardback.optMenuSelected {
  outline: 3px solid #592902;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
  z-index: 10;
  border-radius: 4px;
  scale: 1.05;
}
.tipOfTheDayBox {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 15%;
  min-width: 450px;
  max-width: 650px;
  z-index: 100;
  padding: 10px 20px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.44);
  line-height: 25px;
  left: 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.hiddenBox {
  display: none !important;
}
@media (max-height: 716px) {
  .tipOfTheDayTitle {
    font-size: 22px;
    padding-bottom: 8px;
  }
  .tipOfTheDayBox {
    font-size: 19px;
  }
  @media (orientation: portrait), (max-width: 850px) {
    .newGameWindowHeader {
      padding-top: 40px;
      padding-bottom: 28px;
    }
    .gameDealNewWrapper {
      margin-bottom: 10px;
    }
  }
}
@media (min-height: 716px) {
  .tipOfTheDayTitle {
    font-size: 26px;
    padding-bottom: 10px;
  }
  .tipOfTheDayBox {
    font-size: 22px;
  }
  .gameShareText {
    color: #fff;
    vertical-align: middle;
  }
}
.helph3 {
  display: block;
  font-weight: 700;
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.helph4 {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
}
.helpTermSpan {
  text-decoration: underline;
  color: #00f;
  cursor: pointer;
}
.helpCell,
.helpFoundation,
.helpPile,
.helpPyramid,
.helpReserve,
.helpStock,
.helpWaste {
  border: 6px solid #ff0;
}
.gameLogoDiv {
  cursor: pointer;
  height: 50px;
}
.tipSlideIn {
  animation: tipSlideInAnim ease-out 0.7s;
}
.tipSlideOut {
  animation: tipSlideOutAnim ease-out 0.7s;
}
.gameTipX {
  position: absolute;
  top: 5px;
  cursor: pointer;
  right: 14px;
}
.gameLogoDiv:hover,
.gameTipX:hover,
.gameTopUndo:hover {
  opacity: 0.7;
}
.gameMenuDialog {
  display: none;
  padding: 0;
  background: 0 0;
  filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.3));
}
.gameMenuBody {
  vertical-align: top;
  padding: 8px 16px;
}
.gameMenuBody,
.saveMenuBody {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  box-sizing: border-box;
  text-align: left;
  background-color: rgba(55, 40, 40, 0.95);
  border-radius: 6px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.gameMenuBody {
  max-width: 350px;
  min-width: 220px;
  overflow-x: hidden;
}
.gameMenuBody .gameMenuItem,
.saveMenuBody .saveMenuItem {
  text-transform: uppercase;
  transition: all 0.1s ease-out;
  color: #f5f5f5;
  cursor: pointer;
  padding: 8px 24px;
  border-radius: 6px;
}
.gameMenuBody .gameMenuItem {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding-left: 2px;
}
.gameMenuBody .gameMenuItem:hover,
.saveMenuBody .saveMenuItem:hover {
  background-color: rgba(255, 255, 255, 0.1);
  scale: 1.1;
}
.gameMenuBody .gameMenuItem:active {
  scale: 1.12;
}
.gameMenuItem .menuitemIcon {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
  background-size: 806px;
  background-position: 6px -54px;
  margin-right: 12px;
  flex-shrink: 0;
}
#menuitemNewGame .menuitemIcon {
  background-position: 3px -54px;
}
#menuitemDailyChallenges .menuitemIcon {
  background-position: -58px -54px;
}
#menuitemNumberedGames .menuitemIcon {
  background-position: -28px -54px;
}
#menuitemOptions .menuitemIcon {
  background-position: -88px -54px;
}
#menuitemStatistics .menuitemIcon {
  background-position: -118px -54px;
}
#menuitemShareGame .menuitemIcon {
  background-position: -151px -54px;
}
#menuitemRules .menuitemIcon,
a.gameMenuItem .menuitemIcon {
  background-position: -183px -54px;
}
#menuitemHomepage .menuitemIcon {
  background-position: -215px -54px;
}
#userLoginButtonPhone .menuitemIcon {
  background-position: -247px -54px;
}
#menuitemFullscreen .menuitemIcon {
  background-image: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menuitemFullscreenIcon svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}
.saveMenuBody {
  vertical-align: top;
  font-size: 24px;
  padding: 8px 18px;
}
.userLoginButtonPhone {
  cursor: pointer;
  display: inline-block;
  width: 235px;
}
.saveMenuBody .saveMenuItem.saveMenuItemDisabled,
.saveMenuBody .saveMenuItem.saveMenuItemDisabled:hover {
  cursor: not-allowed;
  color: gray;
  scale: 1;
  background-color: transparent;
}
.loadGameSep {
  border-top: 2px solid #bdbdbd;
}
.saveMenuBody .saveMenuItem.loadGameSlot {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
.loadGameDesc {
  text-align: right;
  color: #bdbdbd;
  font-size: 16px;
  line-height: 16px;
  padding: 0 12px;
}
.userLoginButtonPhoneText {
  margin-left: 8px;
}
.gameMenuItem,
.userLoginButtonPhone {
  font-size: 24px;
  text-decoration: none;
}
@media (max-height: 500px) {
  .gameMenuBody {
    line-height: 29px;
  }
  .gameMenuBody .gameMenuItem {
    font-size: 19px;
    padding: 4px 8px;
  }
  .userLoginButtonPhone {
    font-size: 19px;
  }
  .gameTopBar {
    height: 60px;
    padding: 0 10px 3px;
  }
}
@media (orientation: landscape) {
  .isMobile:not(.isTablet):not(.isBoardGame) #playarea {
    margin: 0;
    padding: 0;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) .gameSideBar .generalButton {
    margin: 12px 4px;
    width: 49px;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) .gameBottomMsg,
  .isMobile:not(.isTablet):not(.isBoardGame) .gameSideBar .generalButton span {
    display: none;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) #bottomStatusBar {
    z-index: 100;
  }
}
.gameMenuTriangle,
.gameMenuTrianglePhoneLeftHanded,
.gameMenuTrianglePhoneRightHanded {
  display: block;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent rgba(55, 40, 40, 0.95);
  border-width: 0 10px 16px;
}
@media (max-width: 730px) {
  .gameMenuTrianglePhoneLeftHanded,
  .gameMenuTrianglePhoneRightHanded {
    margin: 0;
    position: relative;
  }
  .gameMenuTrianglePhoneLeftHanded {
    left: 250px;
  }
  .gameMenuTrianglePhoneRightHanded {
    right: -35px;
  }
}
.gameSideBar {
  display: none;
  width: 65px;
  height: calc(100% - 50px);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: unset;
  position: absolute;
  margin-top: 5px;
}
.isMobile.leftHanded #gameSideBar-controls {
  left: 0;
}
.isMobile:not(.leftHanded) #gameSideBar-controls {
  right: 0;
}
.isMobile.leftHanded #gameSideBar-nav {
  right: 0;
}
.isMobile:not(.leftHanded) #gameSideBar-nav {
  left: 0;
}
@media (orientation: landscape) {
  .isMobile:not(.isTablet):not(.isBoardGame) .gameSideBar {
    display: flex;
    flex-flow: column nowrap;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) .gameTopBar {
    display: none;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) .gameMenuTrianglePhoneRightHanded {
    border-width: 10px 16px 10px 0;
    border-color: transparent rgba(55, 40, 40, 0.95) transparent transparent;
    position: relative;
    left: -16px;
    top: 32px;
    margin: 0;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) .gameMenuTrianglePhoneLeftHanded {
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent rgba(55, 40, 40, 0.95);
    position: relative;
    left: 100%;
    top: 32px;
    margin: 0;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) .gameMenuBody {
    max-height: calc(100% - 30px);
  }
  .isMobile:not(.isTablet):not(.isBoardGame)
    .gameMenuTrianglePhoneRightHanded
    + .gameMenuBody {
    direction: ltr;
  }
  .isMobile:not(.isTablet):not(.isBoardGame)
    .gameMenuTrianglePhoneLeftHanded
    + .gameMenuBody {
    direction: rtl;
  }
  .isMobile:not(.isTablet):not(.isBoardGame) .gameMenuDialog {
    position: absolute;
  }
}
.gameMenuBody > * {
  direction: ltr;
}
.saveMenuTriangle {
  display: block;
  margin: 0 8px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid rgba(55, 40, 40, 0.95);
}
.gameOptionsCheckbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  -moz-transform: scale(1.2, 1.2);
}
.accountRelatedWindow .gameOptionsCheckbox {
  margin: 8px;
}
.optToolTip {
  color: #000;
}
.optToolTip,
.toolTipSpan {
  cursor: pointer;
}
.optInlineTooltip {
  display: flex;
  padding-top: 6px;
  padding-bottom: 0;
  padding-left: 12px;
}
.contactTextbox {
  width: 630px;
  height: 200px;
}
@media (max-width: 630px) {
  .contactTextbox {
    width: 95%;
  }
}
.hintColorOption {
  width: 30px;
}
.optRow {
  display: flex;
  padding: 6px;
}
@media (min-width: 630px) {
  .optRowInner {
    padding-left: 50px;
  }
  .optRowInnerRtl {
    padding-right: 50px;
  }
}
.optExplain {
  font-size: 18px;
  line-height: 19px;
  color: #0a56b1;
  max-width: 560px;
}
.optSelected {
  cursor: pointer;
  display: inline-block;
  padding: 4px;
  background-color: #646e79;
  border-radius: 10px;
  color: #fff;
}
.optNotSelected,
.optNotSelectedDashed,
.optSelectedDashed {
  cursor: pointer;
  display: inline-block;
  border: 3px dashed #404040;
  padding: 2px;
}
.optNotSelected,
.optNotSelectedDashed {
  border: 3px solid #fff;
}
.cardSetSelected {
  border: 4px solid #592902;
}
.cardSetNotSelected {
  border: 4px solid #fff;
}
.cardSet2Instructions {
  width: 96%;
  text-align: center;
  font-size: 20px;
  padding-bottom: 10px;
}
.optResetWrapper {
  text-align: center;
  margin-top: 16px;
}
.optResetPseudoLink {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-decoration: underline;
  font-size: 22px;
}
.gameBottomMsg {
  position: absolute;
  overflow: hidden;
  color: #fff;
  text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000,
    2px 2px 2px #000;
  z-index: 84;
}
.cardInfoLeftSlot,
.cardInfoRightSlot {
  pointer-events: none;
}
.cardInfoLeftSlot {
  left: 12px;
}
.cardInfoRightSlot {
  right: 12px;
}
@media (min-width: 911px) {
  .cardInfoLeftSlot,
  .cardInfoRightSlot {
    font-size: 24px;
    padding-left: 2px;
    padding-right: 2px;
  }
}
@media (max-width: 910px) {
  .cardInfoLeftSlot,
  .cardInfoRightSlot {
    font-size: 18px;
    padding-left: 2px;
    padding-right: 2px;
  }
}
@media (max-width: 500px) {
  .cardInfoLeftSlot,
  .cardInfoRightSlot {
    font-size: 16px;
  }
}
.statusBarLabels {
  color: #f5f5f5;
  text-shadow: -2px -2px 5px rgba(0, 0, 0, 0.5), 2px -2px 5px rgba(0, 0, 0, 0.5),
    -2px 2px 5px rgba(0, 0, 0, 0.5), 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.logoffButton {
  cursor: pointer;
  text-decoration: underline;
}
.gameBottomUndo:hover,
.logoffButton:hover {
  opacity: 0.7;
}
.gameBottomUndo {
  display: none;
  position: absolute;
  bottom: 50px;
  vertical-align: middle;
  text-align: center;
  color: #000;
  cursor: pointer;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 2440%;
  background-position: 11.1% 41.4%;
}
.gameBottomUndoLeftHanded {
  left: 12px;
}
.gameBottomUndoRightHanded {
  right: 12px;
}
@media (min-width: 870px) {
  .gameBottomUndo {
    width: 76px;
    height: 118px;
  }
}
@media (min-width: 680px) and (max-width: 870px) {
  .gameBottomUndo {
    width: 46px;
    height: 71px;
  }
}
@media (max-width: 680px) {
  .gameBottomUndo {
    width: 38px;
    height: 59px;
  }
}
.blockDoubleTap {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pwaPrompt {
  background: linear-gradient(90deg, #4f3620 30%, rgba(79, 54, 32, 0.6) 100%);
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.6));
  text-shadow: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  width: 310px;
  cursor: default;
  padding: 16px 16px 16px 48px;
  z-index: 200;
}
.pwaPrompt .sliderTopIcon {
  margin: 0 12px 0 0;
  width: 45px;
  height: 45px;
}
.pwaDesktopIcon {
  background-image: url(/assets/images/desktop.png);
  background-repeat: no-repeat;
}
.pwaPrompt .tipOfTheDayTitle {
  font-size: 30px;
  color: #ffeede;
  padding-bottom: 0;
}
.pwaShowPromptButton {
  width: 152px;
  margin-top: 8px;
}
.pwaPromptTitleContainer {
  display: flex;
  align-items: center;
}
.overlayDim,
.overlayDimContainer {
  box-sizing: border-box;
  top: 0;
  right: 0;
  transition: opacity 0.2s ease-out;
}
.overlayDimContainer {
  position: fixed;
  min-width: 590px;
  width: 85vw;
  max-width: 1500px;
  min-height: 500px;
  height: 70vh;
  max-height: 600px;
  z-index: 150;
  padding-top: 180px;
  opacity: 0;
}
.overlayDim {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0 0 0 850px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(0);
}
.overlayDimContainer.overlayExpand {
  opacity: 1;
}
.overlayExpand .overlayDim {
  backdrop-filter: blur(10px);
}
.overlayDimMessages {
  position: absolute;
  right: calc(35vw - 100px);
  max-width: 230px;
  margin-top: 90px;
  line-height: 1.1;
  color: #000;
  z-index: 160;
}
.overlayDimMessageMain {
  font-size: 28px;
  margin-bottom: 20px;
}
.overlayDimArrow {
  flex-shrink: 0;
  position: absolute;
  top: 260px;
  right: calc(35vw + 150px);
  min-height: 100px;
  height: 16vh;
  box-sizing: border-box;
  z-index: 0;
}
@media (max-height: 750px) {
  .overlayDimMessageSub {
    margin-bottom: -5px;
    bottom: 0;
    top: auto;
    margin-top: auto;
  }
}
.pwaTextPromptWrapper {
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-flow: row nowrap;
  color: #2e9b57;
  cursor: pointer;
  transition: all 0.1s ease;
  background-color: var(--color-bg);
  text-align: start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}
.pwaTextPromptWrapper.pwaDisabledButton {
  outline: gray 1px solid;
  opacity: 0.4;
  filter: grayscale(1) !important;
  cursor: default;
  pointer-events: none;
}
.pwaTextPromptWrapper.pwaTextPromptMini {
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.pwaTextPromptWrapper:hover {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.38));
}
.pwaTextPromptWrapper:active {
  scale: 1.02;
}
.pwaTextPromptWrapper .pwaTextPromptTitle {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
}
.pwaTextPromptWrapper .pwaTextPromptIcon {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.pwaTextPromptWrapper.pwaTextPromptMini .pwaTextPromptIcon {
  width: 45px;
  height: 45px;
}
.pwaTextPromptWrapper .pwaTextPromptText {
  font-size: 24px;
}
.pwaTextPromptWrapper .pwaTextPromptLongText {
  color: #000;
  line-height: 1.1;
}
.pwaTextPromptWrapper.pwaTextPromptMini .pwaTextPromptLongText {
  display: none;
}
.pwaTextPromptLongText {
  text-wrap: balance;
}
.pwaLeaderboardSeparator {
  border-block-end: 2px solid #804817;
  width: 100%;
  opacity: 0.2;
  margin-top: 20px;
}
.crescentArrowUpDown {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 15px;
  text-align: center;
  font-size: 18px;
}
#crescentShufflesLeft {
  margin: 0 3px 1px 1px;
}
.crescentButton svg {
  margin: 0 0 1px 3px;
}
#bottomStatusBar {
  width: 100%;
}
#bsbInner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.12);
  padding: 4px 16px;
  box-sizing: border-box;
}
.bsbNameCursor {
  cursor: pointer;
}
#bsbAppearanceControls > *,
#bsbLogicControls > * {
  margin: 0 16px;
}
@media (max-width: 766px) {
  #bsbLogicControls > * {
    margin: 0 10px;
  }
}
#bsbMoves > *,
#bsbTimeAndPause > * {
  margin: 0 2px;
}
#bsbReportBug {
  margin-left: auto;
}
.bsbReportBugButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 18px;
  padding: 2px 5px;
  margin-bottom: 5px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 500px) {
  .bsbReportBugButton {
    font-size: 12px;
    white-space: wrap;
  }
}
.bsbReportBugButton .bsbReportBugIcon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bsbReportBugButton .bsbReportBugIcon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
}
.bsbReportBugButton .bsbReportBugLabel {
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
}
@media (max-width: 600px) {
  .bsbReportBugButton .bsbReportBugLabel {
    display: none;
  }
}
.bsbReportBugButton:focus,
.bsbReportBugButton:hover {
  background-color: rgba(255, 255, 255, 0.12);
  outline: 0;
}
.bsbReportBugButton:active {
  background-color: rgba(255, 255, 255, 0.2);
}
#bsbSave,
#bsbZoom {
  display: flex;
  align-items: center;
}
#bsbSave {
  height: 24px;
  width: 24px;
  cursor: pointer;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
  transition: all 0.04s ease-in;
  z-index: 6;
  margin-left: 0;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 1350px;
  background-position: -65px -30px;
}
#bsbSave:hover {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
  scale: 1.05;
}
#bsbSave:active {
  scale: 1.1;
}
#bsbZoom {
  justify-content: center;
  direction: ltr;
  z-index: 5;
  height: 100%;
}
#bsbZoom .bsbZoomIcon {
  height: 26px;
  width: 26px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
  margin-top: 3px;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 1297px;
}
#bsbZoom .bsbZoomIcon:active,
#bsbZoom .bsbZoomIcon:hover {
  scale: 1.06;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
#bsbZoom .bsbZoomIcon:active {
  scale: 1.12;
}
#bsbZoomOutIcon {
  background-position: -2px -28px;
}
#bsbZoomInIcon {
  background-position: -32px -28px;
}
#bsbBg,
.zoomSliderWrapper {
  display: flex;
  position: relative;
}
.zoomSliderWrapper {
  width: 160px;
  height: 28px;
  align-items: center;
  margin-left: 2px;
  margin-right: 6px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}
.zoomSliderBar,
.zoomSliderThumb {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
}
.zoomSliderBar {
  width: 100%;
  height: 8px;
  border-radius: 10px;
  cursor: pointer;
}
.bsbZoomIcon.zoomButtonDisabled {
  opacity: 0.5;
}
#bsbZoom .bsbZoomIcon.zoomButtonDisabled:active,
#bsbZoom .bsbZoomIcon.zoomButtonDisabled:hover {
  scale: unset;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
.zoomSliderThumb {
  position: absolute;
  width: 34px;
  height: 24px;
  justify-content: center;
  border-radius: 4px;
  z-index: 6;
  color: #000;
  text-align: center;
  line-height: 24px;
  font-size: 20px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
  transition: all 0.1s ease-out;
}
.zoomSliderThumb:hover {
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.5));
  scale: 1.05;
}
.zoomSliderThumb:active {
  scale: 1.1;
}
#bsbBg {
  height: 22px;
  gap: 8px;
}
#bsbBg .bsbBgItem,
#bsbPause:hover,
.bsbBgItem:hover {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
#bsbBg .bsbBgItem {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s ease-out;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 1350px;
  background-position: -4px -4px;
}
#bsbBg .bsbBgItem.bsbBgItem5 {
  background-position: -49px -4px;
}
#bsbPause:hover,
.bsbBgItem:hover {
  scale: 1.05;
}
#bsbPause:active,
.bsbBgItem:active {
  scale: 1.1;
}
.bsbBgItem.bgSelected {
  outline: 2px solid #f5f5f5;
}
#bsbBg .bsbBgItem.bsbBgItemCustom {
  color: #fff;
  background: 0 0;
  background-color: rgba(245, 245, 245, 0.38);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px #000);
}
.bsbBgItemCustom .bsbBgItemCustomPlus {
  height: 11px;
  width: 12px;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 525px;
  background-position: -54px -12px;
}
#bsbName {
  display: inline;
  white-space: nowrap;
}
#bsbBg .bsbBgItem.bsbBgItemCustom,
#bsbPause {
  display: flex;
  justify-content: center;
  align-items: center;
}
#bsbPause {
  transition: all 0.04s ease-in;
  margin: 0 8px;
}
#bsbPauseImg {
  width: 15px;
  height: 15px;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 1038px;
  background-position: -91px -48px;
}
#bsbTimeAndPause {
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
#reportBugModal {
  max-height: 100vh;
  box-sizing: border-box;
  overflow: auto;
}
.reportBugModalInner {
  max-width: 540px;
  width: 100%;
  box-sizing: border-box;
}
.reportBugField,
.reportBugForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reportBugField {
  gap: 6px;
}
.reportBugLabel {
  font-weight: 600;
  font-size: 16px;
}
.reportBugInput,
.reportBugTextarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background-color: rgba(255, 255, 255, 0.95);
  color: #212121;
  font-size: 16px;
  box-sizing: border-box;
}
.reportBugTextarea {
  min-height: 120px;
  resize: vertical;
}
.darkmodeOn .reportBugInput,
.darkmodeOn .reportBugTextarea {
  background-color: rgba(33, 33, 33, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
  color: #f5f5f5;
}
.reportBugHelpText {
  font-size: 13px;
  opacity: 0.7;
}
.reportBugStatus {
  min-height: 20px;
  font-size: 14px;
}
.reportBugStatusError {
  color: #c62828;
}
.reportBugStatusSuccess {
  color: #2e7d32;
}
.reportBugStatusPending {
  color: #1565c0;
}
.darkmodeOn .reportBugStatusError {
  color: #ef5350;
}
.darkmodeOn .reportBugStatusSuccess {
  color: #81c784;
}
.darkmodeOn .reportBugStatusPending {
  color: #64b5f6;
}
.reportBugActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.reportBugCancel {
  background-color: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.darkmodeOn .reportBugCancel {
  background-color: rgba(255, 255, 255, 0.08);
}
#bsbMovesIconImg {
  height: 22px;
  width: 20px;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-position: -76px -24px;
  background-size: 1102px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
#bsbMoreInfo,
#bsbMoves {
  flex-flow: row nowrap;
  margin-right: 0;
  white-space: nowrap;
}
#bsbMoreInfo,
#bsbMoreMovesLabel,
#bsbMoves,
#bsbMovesIcon {
  display: flex;
  align-items: center;
  height: 100%;
}
#bsbMovesIcon {
  margin: 0 6px;
}
#bsbMovesCount {
  min-width: 3ch;
  text-align: left;
}
#bsbMoreInfoCount {
  width: 2ch;
  margin: 0 4px;
}
.bsbH1 {
  font-size: 26px;
}
#bsbSolMobilePseudoAligner {
  display: none;
}
.bsbButton {
  border-radius: 4px;
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  background-color: #f5f5f5;
}
#bsbDarkmode.bsbButton {
  background-color: transparent;
  border-radius: 50%;
}
#bsbDarkmode {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: hidden;
}
@media (max-width: 600px) {
  #bsbDarkmode {
    display: none;
  }
}
#bsbDarkmode .bsbDarkmodeIconsWrapper {
  transform: translateX(0);
  display: flex;
  flex-flow: row nowrap;
  transition: all 0.15s ease;
  white-space: nowrap;
  height: 100%;
  align-items: center;
}
#bsbDarkmode .bsbDarkmodeIconsWrapper .bsbDarkmodeIconWrapper {
  height: 100%;
  display: flex;
}
#bsbDarkmode .bsbDarkmodeIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  flex-shrink: 0;
}
#bsbDarkmode .bsbDarkmodeIcon svg {
  height: 100%;
  width: 100%;
}
.darkmodeOn #bsbDarkmode .bsbDarkmodeIconsWrapper {
  transform: translateX(-100%);
}
#bsbDarkmode:hover {
  scale: 1.1;
}
#bsbDarkmode:active {
  scale: 1.15;
}
#bsbBg.showDialog #bsbDarkmodeDialog {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: all;
}
#bsbDarkmodeDialog {
  position: absolute;
  background-color: #fff;
  color: #000;
  bottom: 150%;
  display: flex;
  flex-flow: column nowrap;
  padding: 16px 20px;
  border-radius: 12px;
  align-items: center;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 125%);
  line-height: 1.1;
  text-wrap: balance;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
  opacity: 0;
  transition: all 0.15s ease;
  pointer-events: none;
}
#bsbDarkmodeDialog .buttonsWrapper {
  display: flex;
  flex-flow: row nowrap;
  padding-top: 16px;
}
#bsbDarkmodeDialog .darkmodeDialogButton {
  margin: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  min-width: 8ch;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
  transition: all 0.1s ease;
}
#bsbDarkmodeDialog .darkmodeDialogButton:hover {
  scale: 1.04;
}
#bsbDarkmodeDialog .darkmodeDialogButton:active {
  scale: 1.1;
}
#bsbDarkmodeDialog .darkmodeDialogButton.okButton {
  background-color: var(--color-primary);
  color: #fff;
}
#bsbDarkmodeDialog .darkmodeDialogButton.cancelButton {
  background-color: #fff;
}
@media (max-width: 1450px) {
  .isNotMobile #bsbName {
    display: none;
  }
}
@media (max-width: 1200px) {
  #bsbInner {
    height: 30px;
    font-size: 20px;
  }
  #bsbSave {
    height: 22px;
    width: 22px;
    background-size: 1230px;
    background-position: -59px -28px;
  }
  #zoomSliderWrapper {
    width: 100px;
  }
  #bsbBg .bsbBgItem {
    width: 30px;
    background-size: 1192px;
    background-position: -5px -4px;
  }
  #bsbBg .bsbBgItem.bsbBgItem5 {
    background-position: -44px -4px;
  }
  #bsbBg {
    height: 20px;
  }
  #bsbZoom .bsbZoomIcon {
    height: 22px;
    width: 24px;
    background-size: 1102px;
  }
  #bsbZoomOutIcon {
    background-position: -2px -24px;
  }
  #bsbZoomInIcon {
    background-position: -27px -24px;
  }
  .zoomSliderThumb {
    height: 20px;
    width: 26px;
    font-size: 16px;
  }
  .bsbButton {
    height: 22px;
    width: 20px;
  }
  #bsbDarkmode.bsbButton {
    width: 22px;
  }
  #bsbPauseImg {
    height: 14px;
    width: 14px;
    background-size: 915px;
    background-position: -80px -42px;
  }
  #bsbMovesIconImg {
    height: 20px;
    background-position: -67px -21px;
    background-size: 997px;
  }
  #bsbPseudoAligner {
    display: none;
  }
}
@media (max-width: 800px) {
  #zoomSliderWrapper {
    display: none;
  }
  #bsbInner {
    padding: 4px 8px;
  }
  .bsbH1 {
    font-size: 23px;
  }
}
@media (max-width: 700px) {
  #bsbBg {
    display: none;
  }
}
@media (max-width: 600px) {
  .isNotMobile #bsbMoreInfo {
    display: none;
  }
  .isNotMobile #bsbMoreInfo.bgKeepMoreInfo {
    display: flex;
  }
}
@media (max-width: 500px) {
  .isNotMobile #bsbMoves,
  .isNotMobile #bsbZoom {
    display: none;
  }
  #bsbLogicControls {
    flex-grow: 1;
  }
  #bsbAppearanceControls #bsbSave {
    margin-right: 0;
  }
  #bsbLogicControls.bsbSolitaire {
    justify-content: space-between;
  }
  .bsbSolitaire #bsbSolMobilePseudoAligner {
    display: flex;
  }
}
@media (max-width: 350px) {
  .isNotMobile #bsbTimeAndPause {
    display: none;
  }
}
@media (max-width: 250px) {
  .isNotMobile #bsbSave {
    display: none;
  }
}
@media (max-height: 600px) {
  .newGameWindowHeader {
    padding-top: 20px;
    padding-bottom: 8px;
  }
  .isNotMobile .newGameWindowHeader.cgNewGameWindowHeader {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .solvableGamesWrapper {
    margin-top: 4px;
  }
}
.shake::after {
  animation-duration: var(--shake-dur);
  animation-name: shake;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.isSafari #bgsolidColorPicker #bgsolidColorPickerIcon,
.isSafari #bsbBg .bsbBgItem,
.isSafari #bsbInner *,
.isSafari #openStatsSettingsDlg .statsButton,
.isSafari #stats-window .statsTabButtons .statsTabButton,
.isSafari #stats-window .statsTabGroups .statsDropdown,
.isSafari #stats-window .statsTabGroups .statsTabGroup .statsTabButton,
.isSafari #statsFooter .statsButton,
.isSafari #statsHeader .statsPickGame .statsChooseDropdown,
.isSafari .affordBtn,
.isSafari .dlgCloseBtn,
.isSafari .gameMenuDialog,
.isSafari .pwaPrompt,
.isSafari .pwaTextPromptWrapper,
.isSafari .statsButton.statsMainActionButton {
  will-change: filter;
}
svg circle:not(.noFill),
svg path:not(.noFill),
svg rect:not(.noFill) {
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.7));
}
.dailyChallengeLabel {
  position: absolute;
  bottom: 10%;
  background-color: green;
  text-align: center;
  font-size: var(--font-size-medium);
  padding: 0 12px;
  text-transform: uppercase;
  overflow: visible;
  height: 40px;
  filter: drop-shadow(0 3px 2px #000);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  left: -3px;
  opacity: 0.8;
}
.dailyChallengeLabel::after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 0;
  border-color: green transparent;
  border-width: 20px 10px 20px 0;
  right: -10px;
}
.dailyChallengeLabel-icon {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
  background-size: 806px;
  background-position: -58px -54px;
  margin: 0 var(--padding-medium) 1px 0;
  opacity: 0.8;
}
@media (orientation: portrait) {
  .bottomAdPhoneWrapper50 ~ .dailyChallengeLabel {
    bottom: calc(50px + (100% - 50px) / 10);
  }
  .bottomAdPhoneWrapper90 ~ .dailyChallengeLabel {
    bottom: calc(90px + (100% - 90px) / 10);
  }
  .bottomAdPhoneWrapper120 ~ .dailyChallengeLabel {
    bottom: calc(120px + (100% - 120px) / 10);
  }
  .bottomAdPhoneWrapper170 ~ .dailyChallengeLabel {
    bottom: calc(170px + (100% - 170px) / 10);
  }
}
#migratedDomainMessage {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  color: #333;
  font-size: 16px;
  width: 400px;
  background: #fffdf8;
  z-index: 10000;
}
@media (max-width: 650px) {
  #migratedDomainMessage {
    width: 90%;
  }
}
#xMigratedDomainMessage {
  position: absolute;
  top: 4px;
  right: 6px;
  border: 0;
  background: 0 0;
  font-size: 24px;
  cursor: pointer;
}
#dismissMigratedDomainMessage {
  cursor: pointer;
  text-decoration: underline;
  background: 0 0;
  border: 0;
  font-size: 16px;
  font-family: inherit;
}
.congrats-wrapper,
.congrats-wrapper-inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.congrats-wrapper-inner {
  align-items: center;
  margin: 0 auto 10px;
  border-radius: 12px;
  color: var(--color-3);
  box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
  overflow: hidden;
  min-width: 350px;
}
.congrats-wrapper,
.congrats-wrapper * {
  box-sizing: border-box;
}
#congrats-leaderboard .endGameLdbHead,
.congrats-hide {
  display: none;
}
.congrats-header {
  position: relative;
  width: 100%;
  background-image: url(../../assets/col-header-v133.jpg);
}
.congrats-title {
  font-size: 40px;
  margin: 6px 0 10px;
  text-align: center;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.congrats-tabs {
  display: flex;
  justify-content: center;
  column-gap: 10px;
  margin-bottom: 10px;
}
.congrats-tab {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
  transition: all 0.07s ease-in;
  background: #fff;
  color: var(--color-3);
  cursor: pointer;
  border: 0;
  text-transform: uppercase;
}
.congrats-tab-active {
  background: var(--color-3);
  color: #fff;
  font-weight: 700;
}
.congrats-tab:hover {
  transform: scale(1.05);
}
.congrats-main {
  max-height: 100%;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  text-transform: uppercase;
  padding: 16px;
  background: #fff;
  box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.5) inset;
}
.congrats-stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.congrats-stats-card {
  background: linear-gradient(
    to bottom right,
    var(--color-2-A),
    var(--color-2-B)
  );
  border-radius: 8px;
  padding: 6px 8px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  text-align: center;
}
.congrats-stats-card.congrats-stats-card-record {
  background: linear-gradient(135deg, #fff650, #fa0);
  animation: recordGlow 2s ease-in-out infinite alternate;
  border: 3px solid #fff;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.4),
    0 0 35px rgba(255, 215, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  position: relative;
  overflow: hidden;
}
.congrats-stats-card.congrats-stats-card-record::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shine 3s ease-in-out infinite;
  z-index: 1;
}
.congrats-stats-card-title {
  color: #7a6b5d;
  font-size: 14px;
  text-align: left;
}
.congrats-trophy-section .congrats-stats-card-title {
  text-align: center;
}
.congrats-stats-card-metric {
  font-size: 32px;
}
.congrats-stats-card-metric span {
  font-size: 18px;
  position: relative;
  bottom: 2px;
}
.congrats-spacer {
  margin: 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.congrats-records-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.congrats-records-metric {
  font-size: 20px;
}
.congrats-records-date {
  font-size: 12px;
}
#congrats-leaderboard {
  padding-bottom: 0;
}
#congrats-leaderboard .ldbPersonalStats {
  position: sticky;
  bottom: 0;
  background: #fff;
  margin: 0-16px;
  padding: 0 16px;
}
#congrats-stats .endGameColWrap {
  margin: auto;
  position: static !important;
}
.endGameButtonsWrapper.withCongratsModal {
  flex: 1;
}
.endGameButtonsWrapper.withCongratsModal .generalButton {
  width: auto !important;
}
.endGameButtonsWrapper.withCongratsModal .generalButtonContent {
  position: relative;
  padding: 0 12px;
}
.congrats-outer {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 0;
  justify-content: end;
}
.congrats-disable {
  margin-top: 10px;
  display: flex;
  column-gap: 8px;
  justify-content: space-between;
}
.congrats-disable-button {
  font-size: 12px;
  background: 0 0;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  color: inherit;
  padding: 0;
}
.congrats-disable-text {
  font-size: 12px;
  text-transform: none;
  font-weight: 400;
}
@media (orientation: landscape) and (max-height: 600px) {
  .congrats-outer {
    flex-direction: row;
  }
  .endGameButtonsWrapper.withCongratsModal {
    align-self: center;
  }
  #endGameWrapper {
    top: 0;
  }
  .endGameButtonsWrapper.withCongratsModal .generalButtonContent {
    font-size: 16px;
  }
  .endGameButtonsWrapper.withCongratsModal
    .endGameAnotherGameButtonLang
    .generalButtonContent {
    font-size: 14px;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .endGameButtonsWrapper.withCongratsModal .generalButtonContent {
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  .congrats-wrapper {
    margin-bottom: 10px;
  }
  .congrats-title {
    font-size: 28px;
    margin: 4px 0 6px;
  }
  .congrats-stats-card-metric {
    font-size: 24px;
  }
  .congrats-stats-card {
    padding: 4px 8px;
  }
  .congrats-spacer {
    margin: 10px 0;
  }
  .endGameButtonsWrapper.withCongratsModal {
    flex-direction: row !important;
  }
  .endGameButtonsWrapper.withCongratsModal .generalButton {
    margin-bottom: 0 !important;
  }
  .endGameButtonsWrapper.withCongratsModal .generalButtonContent {
    font-size: 16px;
  }
  html[lang="pt"]
    .endGameButtonsWrapper.withCongratsModal
    .endGameDealAgainButtonLang {
    font-size: 14px;
  }
}
.endGameButtonsWrapper.withCongratsModal .endGameDealAgainButtonLang {
  animation: next-game-pulse 2.5s ease-in-out infinite;
}
.congrats-trophy-container {
  margin: 16px 0;
}
.congrats-trophy-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
.congrats-trophy-section.congrats-trophy-single {
  grid-template-columns: 1fr;
}
.congrats-trophy-celebration {
  grid-template-columns: 1fr;
  justify-items: center;
}
.congrats-trophy-section.congrats-trophy-registration {
  grid-template-columns: 1fr 175px;
}
.congrats-trophy-celebration .congrats-trophy-current {
  max-width: 300px;
}
.congrats-trophy-celebration .congrats-stats-card {
  background: linear-gradient(135deg, #fff650, #fa0);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.2);
  min-width: 140px;
}
.trophy-icon-wrapper {
  display: inline-flex;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.25));
  align-items: center;
  justify-content: center;
}
.congrats-trophy-section .trophy-icon-wrapper {
  margin-top: 8px;
}
.trophy-icon {
  width: 64px;
  height: 64px;
  background-color: currentColor;
  mask-image: url(../../assets/trophy.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.trophy-icon-small {
  width: 36px;
  height: 36px;
}
.congrats-trophy-prestige {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(0, 0, 0, 0.55);
}
.congrats-trophy-preview {
  opacity: 0.7;
  transform: scale(0.9);
}
.congrats-trophy-name {
  font-size: 18px;
  font-weight: 700;
  color: #7a6b5d;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
.congrats-trophy-wins {
  font-size: 14px;
  color: #7a6b5d;
  margin-top: 4px;
}
.congrats-trophy-progress {
  font-size: 12px;
  color: #8b7355;
  font-style: italic;
  margin-top: 4px;
}
.congrats-trophy-next .congrats-stats-card-title:only-child {
  font-size: 16px;
  color: #6b5b00;
  padding: 20px;
  background: linear-gradient(135deg, #fff650, #fa0);
  border-radius: 12px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  animation: celebrate-glow 2s ease-in-out infinite alternate;
}
@media (max-width: 480px) {
  .congrats-trophy-section {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .congrats-stats-card {
    padding: 12px;
  }
  .congrats-trophy-name {
    font-size: 16px;
  }
}
.hide {
  display: none !important;
}
#loadingcards-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
}
#loadingcards-window {
  width: min(500px, calc(100vw - 50px));
  height: auto;
}
.openPassInlineContainer {
  flex: 0 0 370px;
  height: 370px;
  width: 100%;
}
.openPassInlineContainer iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}
.homeMainDiv {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.homeSocialImg {
  padding-left: 20px;
}
.homeSocialImgFirst {
  padding-top: 10px;
}
.indexResponsiveAd {
  width: 300px;
  height: 250px;
}
.homeLoginLineWrap {
  display: flex;
  align-items: center;
  height: 88px;
}
.homeGameTypeBoxesWrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.homeBigLinkGameNameLang,
.homeBigLinkGameNameLang3,
.homeLatestLabel {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}
.homeBigLinkGameNameLang {
  position: relative;
}
.homeSubText {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.homeGameListWrap > .homeGameTitleDiv {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}
.homeSecondaryContentSecondWrap,
.homeSecondaryContentWrap {
  position: relative;
  display: flex;
  justify-content: left;
}
.homeSecondaryContentWrap {
  flex-wrap: wrap;
}
.homeBigBoxLink {
  display: block;
  height: 100%;
  width: 100%;
}
a.homeBigBoxLink:hover,
a.homeBigBoxLink:link {
  text-decoration: none;
}
.homeBigLinkBoxHoverEffect:hover {
  opacity: 0.9;
  color: #fff;
  transition: 0.1s ease-out;
}
.homeArrowSprite1,
.homeArrowSprite2 {
  background-image: url(../../assets/home-spritesheet-v374.png);
  width: 24px;
  height: 40px;
}
.homeArrowSprite1 {
  background-position: -388px -123px;
}
.homeArrowSprite2 {
  background-position: -456px -123px;
}
.homeWelcomeWrapper {
  border-top: solid 1px rgba(0, 55, 123, 0.1);
  background-color: rgba(109, 91, 79, 0.29);
  box-shadow: 0 0 12px #634b34;
}
.unwind.homeWelcomeWrapper {
  border-top: none;
  background-color: #f3f3f3;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}
.homeWelcomeWrapper > h1 {
  color: #492d14;
  font-style: italic;
  text-shadow: 1px 1px 0 rgba(212, 214, 220, 0.8);
  padding-top: 10px;
  text-align: center;
  font-size: 36px;
  margin: 0;
}
.homeWelcomeWrapper > h1.indexH1 {
  color: #000;
  font-style: normal;
  text-shadow: none;
}
.homeWelcomeText {
  font-size: 22px;
  line-height: 28px;
  margin: 10px auto 0;
  padding-bottom: 40px;
  text-align: center;
}
.homeSubs {
  position: absolute;
  display: flex;
  justify-content: center;
  height: 44px;
}
a.homeBigBoxLinkLang:link {
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
a.homeBigBoxLinkLang:hover,
a.homeBigBoxLinkLang:link,
a.homeBigBoxLinkLang:visited {
  color: #fff;
  transition: 0.1s ease-out;
}
a.spiderSub:hover {
  background-color: #fff;
  color: #ffa800;
}
a.freecellSub:hover,
a.solitaireSub:hover {
  background-color: #fff;
  color: #5bbc07;
}
a.freecellSub:hover {
  color: #f75c4e;
}
.homeUnwindText {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: left;
  color: #383838;
  font-weight: 400;
}
.unwind.homeGameListWrap {
  margin-top: 0;
}
.endGameLdbWrap,
.endGameWrapper {
  display: flex;
  flex-direction: column;
}
.endGameWrapper {
  justify-content: end;
  width: 100%;
  z-index: 86;
  position: absolute;
  top: calc(var(--game-top-bar-height) - 13px);
  bottom: 0;
}
.endGameLdbWrap {
  width: 96%;
  max-width: 665px;
  flex-grow: 1;
  max-height: 460px;
  margin: 6px auto 40px;
  background-color: #fff;
  box-shadow: 0 0 6px 4px rgba(50, 50, 50, 0.59);
  border-radius: 20px;
  overflow: hidden;
  direction: ltr;
}
.endGameLdbHead {
  position: relative;
  height: 60px;
  font-size: 38px;
  line-height: 56px;
  color: #54361b;
  text-shadow: 0 0 4px #eee6dd;
  text-align: center;
  text-transform: uppercase;
}
.endGameLdbTimeMovesHead {
  display: flex;
  overflow-y: auto;
  background-color: #fff;
  flex-grow: 1;
}
.endGameLdbRegisterLang {
  text-align: center;
  margin: 10px 4px 12px;
  font-size: 22px;
  line-height: 22px;
}
.endGameLdbRegisterLink {
  color: #0071bc;
  cursor: pointer;
  text-decoration: underline;
}
.endGameColWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 226px;
  margin-bottom: 20px;
  line-height: 0;
}
@media (max-height: 750px) {
  .endGameLdbHead {
    height: 40px;
    font-size: 31px;
    line-height: 37px;
  }
  .endGameLdbHead > .dlgCloseBtn {
    top: 10px;
  }
}
@media (min-height: 651px) and (max-height: 750px) {
  .endGameLdbWrap {
    height: 412px;
    margin-bottom: 10px;
  }
}
@media (min-height: 551px) and (max-height: 650px) {
  .endGameLdbWrap {
    height: 318px;
    margin-bottom: 10px;
  }
}
@media (min-height: 471px) and (max-height: 550px) {
  .endGameLdbWrap {
    height: 234px;
    margin-bottom: 10px;
  }
}
@media (max-height: 470px) {
  .endGameLdbWrap {
    display: none;
  }
}
@media (min-width: 1770px) {
  .endGameColWrapLeftHand {
    margin-left: 200px;
  }
  .endGameColWrapRightHand {
    align-self: flex-end;
    margin-right: 200px;
  }
}
@media (min-width: 1200px) and (max-width: 1770px) {
  .endGameColWrapLeftHand {
    margin-left: 75px;
  }
  .endGameColWrapRightHand {
    align-self: flex-end;
    margin-right: 75px;
  }
}
@media (min-width: 1031px) and (max-width: 1200px) {
  .endGameColWrapLeftHand {
    margin-left: 4px;
  }
  .endGameColWrapRightHand {
    align-self: flex-end;
    margin-right: 4px;
  }
}
.endGameColHead {
  display: flex;
  width: 226px;
}
.endGameColHeadLang {
  display: flex;
  align-items: center;
  background-color: #d12d22;
  width: 150px;
  font-size: 17px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 8px #3c3c3c;
  z-index: 2;
  line-height: 17px;
  box-sizing: border-box;
  padding: 4px;
}
.endGameColHeadTxt {
  text-align: center;
  width: 100%;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
#col-img-blink {
  position: absolute;
  background-color: rgba(255, 215, 0, 0.4);
  width: 100%;
  height: 100%;
  border: 5px solid gold;
  box-sizing: border-box;
}
#col-img-blink,
.endGameColHeadBlink {
  animation: pulse cubic-bezier(0.1, -0.6, 0.2, 0) 2s infinite;
}
.collHeaderLeft,
.collHeaderRight {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 5320%;
  background-position-y: 4%;
  display: inline-block;
}
.collHeaderLeft {
  width: 38px;
  height: 43px;
  background-position-x: 33.6%;
}
.collHeaderRight {
  width: 37px;
  height: 43px;
  background-position-x: 36.5%;
}
.endGameColImgWrap {
  position: relative;
  border-width: 0 3px 3px;
  border-style: solid;
  border-color: transparent;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.endGameColLoginMsg {
  width: 90%;
  color: #000;
  left: 5%;
  text-align: center;
  position: relative;
  padding: 10px 0;
  font-size: 24px;
  line-height: 28px;
}
.endGameColLoginMsg-fadeIn {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.endGameColLoginMsg:hover {
  cursor: pointer;
  text-shadow: 0 0 5px pink;
}
.endGameColLoginMsg-small {
  font-size: 18px;
  line-height: 22px;
}
.endGameColHelpIconGotCard,
.endGameColHelpIconNoCard {
  width: 37px;
  height: 37px;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-size: 6310%;
  background-position: 29.7% 0.3%;
  z-index: 3;
  cursor: pointer;
}
.endGameColHelpIconGotCard {
  position: absolute;
  right: -12px;
  top: -10px;
}
.endGameColHelpIconNoCard {
  position: relative;
  right: -70px;
  top: -10px;
}
.endGameColHelpIconGotCard:hover,
.endGameColHelpIconNoCard:hover {
  opacity: 0.9;
}
.endGameNumOfCollCards {
  pointer-events: none;
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 8px red;
}
.endGameColBtnLang,
.endGameColImg {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.endGameColBtnLang {
  width: 120px;
  text-align: center;
  border-right: 3px solid #d12d22;
  border-left: 3px solid #d12d22;
  border-bottom: 3px solid #d12d22;
  color: #d12d22;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  background-color: #fff;
  cursor: pointer;
}
.endGameColBtnLang:hover {
  cursor: pointer;
  background-color: #e8e8e8;
}
.endGameColImg {
  width: 150px;
  background-color: rgba(246, 246, 246, 0.5);
}
.endGameColBarWrap {
  width: 80%;
  height: 20px;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
  border: 3px solid #d12d22;
  transform-origin: center;
}
.endGameColBarFill,
.endGameColBarGlow {
  position: absolute;
  height: 100%;
  right: 100%;
}
.endGameColBarFill {
  width: 100%;
  background: linear-gradient(to right, #38b538, #04eb04);
  transition: right 1s linear;
}
.endGameColBarGlow {
  width: 50%;
  transition: right 0.5s ease-in;
  background: linear-gradient(
    to right,
    transparent 0,
    #65ee65 50%,
    transparent 100%
  );
}
.endGameColBarLabel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d12d22;
  font-size: 17px;
}
@media (max-width: 1030px) {
  @media (min-height: 471px) {
    .endGameColWrap {
      align-self: center;
      margin-bottom: 10px;
    }
  }
  @media (min-height: 700px) {
    .endGameColWrap {
      margin-bottom: 30px;
    }
  }
  @media (max-height: 560px) and (max-width: 614px) {
    .endGameColWrap {
      align-self: center;
      margin-bottom: 14px;
    }
    .endGameColImg {
      display: none;
    }
    .endGameColHelpIconGotCard {
      position: absolute;
      right: -88px;
      top: -12px;
    }
  }
  @media (min-height: 341px) and (max-height: 470px) and (min-width: 614px) {
    .endGameColWrap {
      position: absolute;
      bottom: 80px;
      left: 16px;
    }
    .endGameButtonsWrapper {
      align-self: flex-end;
      margin-right: 16px;
    }
  }
  @media (max-height: 340px) and (min-width: 614px) {
    .endGameColWrap {
      position: absolute;
      bottom: 60px;
      left: 10px;
    }
    .endGameButtonsWrapper {
      align-self: flex-end;
      margin-right: 10px;
    }
  }
}
@media (max-width: 1300px), (min-height: 540px) and (max-height: 600px) {
  .endGameColImg {
    width: 120px;
  }
  .endGameColBtnLang {
    width: 106px;
  }
}
@media (max-height: 540px) {
  .endGameColImg {
    width: 100px;
  }
  .endGameColBtnLang {
    width: 78px;
    height: 18px;
  }
  .endGameNumOfCollCards {
    font-size: 22px;
    bottom: 14px;
  }
}
.ldbUserRecord {
  color: red;
}
.endGameButtonsWrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.endGameAnotherGameButtonLang,
.endGameDealAgainButtonLang,
.endGameNewGameButtonLang {
  display: flex;
  justify-content: center;
  margin: 0 8px;
  text-decoration: none;
}
.endGameFlashMessagesWrapper,
.endGameStatsWrapper,
.endGameStreakWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  font-size: 30px;
}
.endGameWrappedMessage {
  flex-wrap: wrap;
  height: auto !important;
}
.endGameFlashMessagesWrapper {
  background-color: rgba(240, 248, 255, 0.44);
}
.endGameStatsWrapper {
  background-color: rgba(0, 0, 0, 0.44);
}
@media (min-width: 800px) {
  .endGameStatsWrapper > span:not(:last-child) {
    margin-right: 20px;
  }
}
@media (max-width: 800px) {
  .endGameStatsWrapper > span:not(:last-child) {
    margin-right: 10px;
  }
}
.endGameFlashMessage {
  display: flex;
  align-items: center;
}
.endGameNotificationsFont {
  text-shadow: -2px 0#d3d3d3, 0 2px #d3d3d3, 2px 0#d3d3d3, 0-2px #d3d3d3;
  color: #000;
  line-height: 50px;
  font-size: 30px;
  text-align: center;
}
@media (max-width: 1330px), (max-height: 740px) {
  .endGameFlashMessagesWrapper,
  .endGameStatsWrapper,
  .endGameStreakWrapper {
    height: 44px;
  }
  .endGameStatsWrapper {
    font-size: 27px;
  }
  .endGameNotificationsFont {
    line-height: 46px;
    font-size: 25px;
  }
}
@media (max-width: 1106px), (max-height: 640px) {
  .endGameFlashMessagesWrapper,
  .endGameStatsWrapper,
  .endGameStreakWrapper {
    height: 38px;
  }
  .endGameStatsWrapper {
    font-size: 23px;
  }
  .endGameNotificationsFont {
    line-height: 24px;
    font-size: 24px;
  }
}
@media (max-width: 800px), (max-height: 440px) {
  .endGameFlashMessagesWrapper,
  .endGameStatsWrapper,
  .endGameStreakWrapper {
    height: 38px;
  }
}
.colWinHead {
  height: 66px;
  background-image: url(../../assets/col-header-v133.jpg);
}
.colWinHead > span {
  color: #4b2f16;
  font-size: 34px;
  padding-left: 50px;
  text-transform: uppercase;
  line-height: 66px;
}
.colSetDesc {
  display: flex;
  flex-direction: column;
  color: #363636;
  margin: 12px 48px 18px;
  min-height: 84px;
  direction: ltr;
}
.colSetDesc > span:first-child {
  font-size: 36px;
  line-height: 34px;
  margin-bottom: 8px;
}
.colSetDesc > span:last-child {
  font-size: 19px;
  line-height: 21px;
}
.colSourceTxt {
  font-size: 16px;
  line-height: 16px;
  text-align: right;
  padding-right: 24px;
  padding-bottom: 6px;
}
.colCardNameWrap {
  position: absolute;
  width: 100%;
  color: #7e7575;
  bottom: 5%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.colAllCardsWrap {
  position: relative;
  margin: 0 auto 10px;
  border-radius: 20px;
  -moz-box-shadow: 0 0 1px 2px #c1c1c1;
  -webkit-box-shadow: 0 0 1px 2px #c1c1c1;
  box-shadow: 0 0 1px 2px #c1c1c1;
}
.colAllCardsInner {
  overflow-x: scroll;
  margin: 15px;
  border-radius: 10px;
  height: 100%;
}
.colNextPage,
.colPrevPage {
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.colPrevPage {
  box-shadow: 5px 0 5px 0#fff;
}
.colNextPage {
  right: 0;
  box-shadow: -5px 0 5px 0#fff;
}
.colNextPage svg {
  scale: -1;
}
.colPageArrow {
  height: 40px;
  width: 40px;
  margin: 0;
}
.colPageArrow > * {
  border-radius: 50%;
}
.colAllCardsList {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
}
.colCardImg {
  position: relative;
  text-align: center;
  margin: 10px;
  flex-shrink: 0;
  border: 3px solid #94886e;
  border-radius: 6px;
  -moz-box-shadow: 11px -8px 3px -5px #d8d6d2;
  -webkit-box-shadow: 11px -8px 3px -5px #d8d6d2;
  box-shadow: 11px -8px 3px -5px #d8d6d2;
  overflow: hidden;
}
.colCardImg:not(.colCardLocked) {
  cursor: zoom-in;
}
.colCardLocked {
  background-color: #f6f6f6;
}
.colCardSetHeight {
  height: 185px;
}
.colBtnsWrap {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 10px;
  align-items: center;
}
.colNextPrevBtn {
  display: flex;
  cursor: pointer;
  text-align: center;
  color: #2b2928;
  font-size: 21px;
  line-height: 28px;
}
.colNextPrevBtn:hover {
  cursor: pointer;
  opacity: 0.7;
}
#col-prev-set svg {
  margin-right: 4px;
}
#col-next-set svg {
  scale: -1;
  margin-left: 4px;
}
.colAllCardsList .colCardSuit {
  width: unset;
  height: 100%;
}
@media (min-width: 720px) and (max-width: 850px) {
  .colWinHead > span {
    padding-left: 40px;
  }
  .colSetDesc {
    margin-left: 40px;
    margin-right: 40px;
  }
}
@media (min-width: 620px) and (max-width: 720px) {
  .colWinHead > span {
    padding-left: 30px;
  }
  .colSetDesc {
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media (min-width: 520px) and (max-width: 620px) {
  .colWinHead > span {
    padding-left: 20px;
  }
  .colSetDesc {
    margin-left: 20px;
    margin-right: 20px;
  }
}
@media (min-width: 420px) and (max-width: 520px) {
  .colWinHead > span {
    padding-left: 20px;
    font-size: 24px;
  }
  .colSetDesc {
    margin-left: 20px;
    margin-right: 20px;
  }
}
@media (max-width: 420px) {
  .colWinHead > span {
    padding-left: 20px;
    font-size: 22px;
  }
  .colSetDesc {
    margin-left: 20px;
    margin-right: 20px;
  }
  .colNextPrevBtn > span {
    display: none;
  }
}
@media (min-height: 401px) and (max-height: 620px) {
  .colWinHead {
    height: 50px;
  }
  .colWinHead > span {
    font-size: 26px;
    line-height: 50px;
  }
  .colSetDesc > span:first-child {
    font-size: 26px;
    line-height: 26px;
    margin-bottom: 6px;
  }
  .colSetDesc > span:last-child {
    font-size: 16px;
    line-height: 16px;
  }
  .colCardSetHeight {
    height: 140px;
  }
}
@media (max-height: 400px) {
  .colWinHead {
    height: 30px;
  }
  .colWinHead > span {
    font-size: 20px;
    line-height: 30px;
  }
  .colSetDesc > span:first-child {
    line-height: 21px;
    font-size: 20px;
  }
  .colSetDesc > span:last-child {
    font-size: 14px;
    line-height: 14px;
  }
}
.bgSprite {
  background-image: url(../../assets/gamepage-options-thumbs-solids-v374.jpg);
}
.bgSprite,
.bgSprite2 {
  width: 104px;
  height: 75px;
  background-repeat: no-repeat;
  display: block;
  cursor: pointer;
}
.sp-bg1-thumb {
  background-position: -8px -652px;
}
.sp-bg0-thumb {
  background-position: -926px -280px;
}
.sp-bg78-thumb {
  background-position: -1048px -280px;
}
.sp-bg10-thumb {
  background-position: -1170px -280px;
}
.sp-bg11-thumb {
  background-position: -926px -373px;
}
.sp-bg12-thumb {
  background-position: -1048px -373px;
}
.sp-bg13-thumb {
  background-position: -1170px -373px;
}
.sp-bg16-thumb {
  background-position: -8px -466px;
}
.sp-bg15-thumb {
  background-position: -130px -466px;
}
.sp-bg14-thumb {
  background-position: -252px -466px;
}
.sp-bg17-thumb {
  background-position: -374px -466px;
}
.sp-bg18-thumb {
  background-position: -496px -466px;
}
.sp-bg19-thumb {
  background-position: -618px -466px;
}
.sp-bg2-thumb {
  background-position: -740px -466px;
}
.sp-bg20-thumb {
  background-position: -862px -466px;
}
.sp-bg21-thumb {
  background-position: -984px -466px;
}
.sp-bg22-thumb {
  background-position: -1106px -466px;
}
.sp-bg23-thumb {
  background-position: -8px -559px;
}
.sp-bg3-thumb {
  background-position: -130px -559px;
}
.sp-bg4-thumb {
  background-position: -252px -559px;
}
.sp-bg5-thumb {
  background-position: -374px -559px;
}
.sp-bg6-thumb {
  background-position: -496px -559px;
}
.sp-bg7-thumb {
  background-position: -618px -559px;
}
.sp-bg8-thumb {
  background-position: -740px -559px;
}
.sp-bg9-thumb {
  background-position: -862px -559px;
}
.sp-bg79-thumb {
  background-position: -8px -645px;
}
.cardBackThumbSprite {
  width: 86px;
  height: 120px;
  background-image: url(../../assets/gamepage-options-thumbs-v374.png);
  background-repeat: no-repeat;
  display: inline-block;
}
html[lang="en"] .cardBackThumbSprite,
html[lang="en"] .setPreviewSprite {
  background-image: url(../../assets/gamepage-options-thumbs-v375.png);
}
.sp-back0-thumb {
  background-position: -1292px -280px;
}
.sp-back33-thumb {
  background-position: -8px -8px;
}
.sp-back1-thumb {
  background-position: -110px -8px;
}
.sp-back10-thumb {
  background-position: -212px -8px;
}
.sp-back11-thumb {
  background-position: -314px -8px;
}
.sp-back12-thumb {
  background-position: -416px -8px;
}
.sp-back13-thumb {
  background-position: -518px -8px;
}
.sp-back14-thumb {
  background-position: -620px -8px;
}
.sp-back15-thumb {
  background-position: -722px -8px;
}
.sp-back16-thumb {
  background-position: -824px -8px;
}
.sp-back17-thumb {
  background-position: -926px -8px;
}
.sp-back18-thumb {
  background-position: -1028px -8px;
}
.sp-back19-thumb {
  background-position: -1130px -8px;
}
.sp-back2-thumb {
  background-position: -8px -144px;
}
.sp-back20-thumb {
  background-position: -110px -144px;
}
.sp-back21-thumb {
  background-position: -212px -144px;
}
.sp-back22-thumb {
  background-position: -314px -144px;
}
.sp-back23-thumb {
  background-position: -416px -144px;
}
.sp-back24-thumb {
  background-position: -518px -144px;
}
.sp-back25-thumb {
  background-position: -620px -144px;
}
.sp-back26-thumb {
  background-position: -722px -144px;
}
.sp-back27-thumb {
  background-position: -824px -144px;
}
.sp-back28-thumb {
  background-position: -926px -144px;
}
.sp-back29-thumb {
  background-position: -1028px -144px;
}
.sp-back3-thumb {
  background-position: -1130px -144px;
}
.sp-back30-thumb {
  background-position: -8px -280px;
}
.sp-back31-thumb {
  background-position: -110px -280px;
}
.sp-back32-thumb {
  background-position: -212px -280px;
}
.sp-back4-thumb {
  background-position: -314px -280px;
}
.sp-back5-thumb {
  background-position: -416px -280px;
}
.sp-back6-thumb {
  background-position: -518px -280px;
}
.sp-back7-thumb {
  background-position: -620px -280px;
}
.sp-back8-thumb {
  background-position: -722px -280px;
}
.sp-back9-thumb {
  background-position: -824px -280px;
}
.colPreviewSprite,
.setPreviewSprite {
  border-radius: 10px;
  background-color: #cecece;
  width: 260px;
  height: 170px;
  padding: 10px;
  background-image: url(../../assets/gamepage-options-thumbs-v374.png);
  background-repeat: no-repeat;
  display: block;
  cursor: pointer;
}
.colPreviewSprite {
  background-image: url(../../assets/gamepage-options-coll-v166.png);
}
.sp-set0preview {
  background-position: -2px -739px;
}
.sp-set1preview {
  background-position: -281px -739px;
}
.sp-set2preview {
  background-position: -560px -739px;
}
.sp-set3preview {
  background-position: -839px -739px;
}
.sp-set4preview {
  background-position: -2px -925px;
}
.sp-set5preview {
  background-position: -281px -925px;
}
.sp-set6preview {
  background-position: -560px -925px;
}
.sp-set7preview {
  background-position: -839px -925px;
}
.sp-set8preview {
  background-position: -1226px -2px;
}
.sp-set9preview {
  background-position: -978px -553px;
}
.sp-set10preview {
  background-position: -5px -5px;
}
.sp-set11preview {
  background-position: -278px -5px;
}
.sp-set12preview {
  background-position: -5px -185px;
}
.sp-set13preview {
  background-position: -278px -185px;
}
.sp-set14preview {
  background-position: -5px -365px;
}
.sp-set15preview {
  background-position: -278px -365px;
}
.sp-set16preview {
  background-position: -551px -5px;
}
.sp-set17preview {
  background-position: -551px -185px;
}
.sp-set18preview {
  background-position: -1130px -735px;
}
.sp-set19preview {
  background-position: -1133px -918px;
}
.gameSmallSprite,
.sp-app-barcode {
  background-image: url(../../assets/solitaire-icons-spritesheet-v239.png);
  background-repeat: no-repeat;
  display: inline-block;
}
.sp-app-barcode {
  width: 175px;
  height: 175px;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-size: 1080%;
  background-position: 0.8% 43.7%;
}
.sp-game-share {
  width: 18px;
  height: 22px;
  margin-right: 6px;
  background-position: -165px -68px;
}
.sp-icon-account,
.spriteHome {
  background-repeat: no-repeat;
  display: inline-block;
}
.sp-icon-account {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  width: 16px;
  height: 20px;
  background-size: 7060%;
  background-position: 27.7% -0.1%;
}
.spriteHome {
  background-image: url(/assets/images/topbar-tall.png);
}
.spriteHomeNotTransparent {
  background-image: url(../../assets/home-spritesheet-solids-v374.jpg);
}
.sprite-TopBarTall {
  width: 100%;
  height: 99px;
  background-repeat: repeat-x;
}
.sprite-icon-solitaire-everywhere-ltr {
  width: 103px;
  height: 82px;
  background-position: -1779px -123px;
}
.sprite-icon-solitaire-everywhere-rtl {
  width: 103px;
  height: 82px;
  background-position: -388px -215px;
}
.indexGameSprite {
  width: 70px;
  height: 70px;
  background-image: url(./images/home-games-icon.png);
  background-repeat: no-repeat;
  display: inline-block;
}
.sp-klondikeIcon {
  background-position: -501px -215px;
}
.sp-freecellIcon,
.sp-spiderIcon {
  width: 70px;
  height: 70px;
  background-position: -741px -215px;
}
.sp-freecellIcon {
  background-position: -604px -123px;
}
.sp-forthyThievesIcon,
.sp-yukonIcon {
  width: 70px;
  height: 70px;
  background-position: -901px -215px;
}
.sp-forthyThievesIcon {
  background-position: -524px -123px;
}
.sp-pyramidIcon,
.sp-tripeaksIcon {
  width: 70px;
  height: 70px;
  background-position: -661px -215px;
}
.sp-tripeaksIcon {
  background-position: -821px -215px;
}
.sp-cardgamesIcon,
.sp-classicsIcon {
  width: 70px;
  height: 70px;
  background-position: -581px -215px;
}
.sp-classicsIcon {
  background-position: -980px -215px;
}
.sp-suit-diamond,
.sp-suit-heart {
  width: 20px;
  height: 20px;
  background-position: -335px -6px;
}
.sp-suit-heart {
  background-position: -371px -6px;
}
.sp-suit-club,
.sp-suit-spade {
  width: 20px;
  height: 20px;
  background-position: -407px -6px;
}
.sp-suit-club {
  background-position: -299px -6px;
}
.sp-suit-club-options,
.sp-suit-diamond-options,
.sp-suit-heart-options,
.sp-suit-spade-options {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 5270%;
}
.sp-suit-heart-options {
  background-position: 7.1% 0.1%;
}
.sp-suit-club-options {
  background-position: 10.95% 0.2%;
}
.sp-suit-diamond-options {
  background-position: 12.8% 0.2%;
}
.sp-suit-spade-options {
  background-position: 9.05% 0.2%;
}
.gameIconsSprite {
  display: inline-block;
}
.gameIconsSprite,
.gameIconsSpriteBlock {
  background-image: url(../../assets/game-icons-spritesheet-v374.jpg);
}
.size90 {
  width: 90px;
  height: 90px;
}
.sp-gforthyThievesIcon {
  background-position: -8px -8px;
}
.sp-gfreecellIcon {
  background-position: -90px -8px;
}
.sp-ggolfIcon {
  background-position: -172px -8px;
}
.sp-gklondikeIcon {
  background-position: -254px -8px;
}
.sp-gcardgamesIcon {
  background-position: -8px -90px;
}
.sp-gpyramidIcon {
  background-position: -90px -90px;
}
.sp-gspiderIcon {
  background-position: -172px -90px;
}
.sp-gtripeaksIcon {
  background-position: -254px -90px;
}
.sp-gyukonIcon {
  background-position: -8px -172px;
}
.sp-gclassicsIcon {
  background-position: -331px -8px;
}
.selectedGameTypeTitle > .sp-gforthyThievesIcon {
  background-position: -90px -172px;
}
.selectedGameTypeTitle > .sp-ggolfIcon {
  background-position: -196px -172px;
}
.selectedGameTypeTitle > .sp-gklondikeIcon {
  background-position: -302px -172px;
}
.selectedGameTypeTitle > .sp-gcardgamesIcon {
  background-position: -8px -278px;
}
.selectedGameTypeTitle > .sp-gpyramidIcon {
  background-position: -114px -278px;
}
.selectedGameTypeTitle > .sp-gspiderIcon {
  background-position: -220px -278px;
}
.selectedGameTypeTitle > .sp-gtripeaksIcon {
  background-position: -408px -8px;
}
.selectedGameTypeTitle > .sp-gyukonIcon {
  background-position: -408px -114px;
}
.selectedGameTypeTitle > .sp-gfreecellIcon {
  background-position: -408px -220px;
}
.selectedGameTypeTitle > .sp-gclassicsIcon {
  background-position: -507px -8px;
}
.challengesSprite {
  background-image: url(../../assets/challenges-spritesheet-v133.png);
  background-repeat: no-repeat;
}
.sp-leftArrow,
.sp-rightArrow {
  width: 24px;
  height: 40px;
  background-position: -8px -8px;
}
.sp-rightArrow {
  background-position: -48px -8px;
}
@media (min-width: 766px) {
  .sp-wood-texture-1 {
    background-position: -88px -8px;
  }
}
@media (max-width: 766px) {
  .sp-wood-texture-1 {
    background-position: -403px -310px;
  }
}
.sp-wood-texture-2 {
  background-position: -404px -8px;
}
.sp-wood-texture-4 {
  background-position: -404px -174px;
}
.gi-klondike {
  background-image: url(../../assets/gi-klondike.png);
}
.gi-spider {
  background-image: url(../../assets/gi-spider.png);
}
.gi-freecell {
  background-image: url(../../assets/gi-freecell.png);
}
.gi-yukon {
  background-image: url(../../assets/gi-yukon.png);
}
.cgScopaMenuSprites {
  background-image: url(../../assets/scopa-cards-nobg-spritesheet-v347.png);
  display: inline-block;
  height: 84px;
  width: 56px;
  border-radius: 4px;
}
.cgScopaCard1 {
  background-position: 0 0;
}
.cgScopaCard2 {
  background-position: -56px 0;
}
.cgScopaCard3 {
  background-position: -112px 0;
}
.cgScopaCard4 {
  background-position: -170px 0;
}
.sp-card-front-0::after {
  background-image: url(../../assets/cards/cards0.png);
}
.sp-card-front-1::after {
  background-image: url(../../assets/cards/cards1.png);
}
.sp-card-front-2::after {
  background-image: url(../../assets/cards/cards2.png);
}
.sp-card-front-3::after {
  background-image: url(../../assets/cards/cards3.png);
}
.sp-card-front-4::after {
  background-image: url(../../assets/cards/cards4.png);
}
.sp-card-front-5::after {
  background-image: url(../../assets/cards/cards5.png);
}
.sp-card-front-6::after {
  background-image: url(../../assets/cards/cards6.png);
}
.sp-card-front-7::after {
  background-image: url(../../assets/cards/cards7.png);
}
.sp-card-front-8::after {
  background-image: url(../../assets/cards/cards8.png);
}
.sp-card-front-9::after {
  background-image: url(../../assets/cards/cards9.png);
}
.sp-card-front-10::after {
  background-image: url(../../assets/cards/cards10.jpg);
}
.sp-card-front-11::after {
  background-image: url(../../assets/cards/cards11.jpg);
}
.sp-card-front-12::after {
  background-image: url(../../assets/cards/cards12.jpg);
}
.sp-card-front-13::after {
  background-image: url(../../assets/cards/cards13.jpg);
}
.sp-card-front-14::after {
  background-image: url(../../assets/cards/cards14.jpg);
}
.sp-card-front-15::after {
  background-image: url(../../assets/cards/cards15.jpg);
}
.sp-card-front-16::after {
  background-image: url(../../assets/cards/cards16.jpg);
}
.sp-card-front-17::after {
  background-image: url(../../assets/cards/cards17.jpg);
}
.sp-card-front-18::after {
  background-image: url(../../assets/cards/cards18.png);
}
.sp-card-front-19::after {
  background-image: url(../../assets/cards/cards19.png);
}
.sp-card-front-31::after {
  background-image: url(../../assets/cards/cards31.png);
}
.sp-card-front-32::after {
  background-image: url(../../assets/cards/cards32.png);
}
.sp-card-front-33::after {
  background-image: url(../../assets/cards/cards33.png);
}
.sp-card-front-34::after {
  background-image: url(../../assets/cards/cards34.png);
}
.sp-card-front-35::after {
  background-image: url(../../assets/cards/cards35.png);
}
body.highQualityCardArt .sp-card-front-0::after {
  background-image: url(../../assets/cards-hq/cards0.svg);
}
.card-back {
  background-size: 100% 100%;
}
.card-front::after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  background-size: 1100% 500%;
}
.card-front-AC::after {
  background-position: 0 0;
}
.card-front-AS::after {
  background-position: 10%0;
}
.card-front-AH::after {
  background-position: 20%0;
}
.card-front-AD::after {
  background-position: 30%0;
}
.card-front-KC::after {
  background-position: 40%0;
}
.card-front-KS::after {
  background-position: 50%0;
}
.card-front-KH::after {
  background-position: 60%0;
}
.card-front-KD::after {
  background-position: 70%0;
}
.card-front-QC::after {
  background-position: 80%0;
}
.card-front-QS::after {
  background-position: 90%0;
}
.card-front-QH::after {
  background-position: 100%0;
}
.card-front-QD::after {
  background-position: 0 25%;
}
.card-front-JC::after {
  background-position: 10% 25%;
}
.card-front-JS::after {
  background-position: 20% 25%;
}
.card-front-JH::after {
  background-position: 30% 25%;
}
.card-front-JD::after {
  background-position: 40% 25%;
}
.card-front-XC::after {
  background-position: 50% 25%;
}
.card-front-XS::after {
  background-position: 60% 25%;
}
.card-front-XH::after {
  background-position: 70% 25%;
}
.card-front-XD::after {
  background-position: 80% 25%;
}
.card-front-9C::after {
  background-position: 90% 25%;
}
.card-front-9S::after {
  background-position: 100% 25%;
}
.card-front-9H::after {
  background-position: 0 50%;
}
.card-front-9D::after {
  background-position: 10% 50%;
}
.card-front-8C::after {
  background-position: 20% 50%;
}
.card-front-8S::after {
  background-position: 30% 50%;
}
.card-front-8H::after {
  background-position: 40% 50%;
}
.card-front-8D::after {
  background-position: 50% 50%;
}
.card-front-7C::after {
  background-position: 60% 50%;
}
.card-front-7S::after {
  background-position: 70% 50%;
}
.card-front-7H::after {
  background-position: 80% 50%;
}
.card-front-7D::after {
  background-position: 90% 50%;
}
.card-front-6C::after {
  background-position: 100% 50%;
}
.card-front-6S::after {
  background-position: 0 75%;
}
.card-front-6H::after {
  background-position: 10% 75%;
}
.card-front-6D::after {
  background-position: 20% 75%;
}
.card-front-5C::after {
  background-position: 30% 75%;
}
.card-front-5S::after {
  background-position: 40% 75%;
}
.card-front-5H::after {
  background-position: 50% 75%;
}
.card-front-5D::after {
  background-position: 60% 75%;
}
.card-front-4C::after {
  background-position: 70% 75%;
}
.card-front-4S::after {
  background-position: 80% 75%;
}
.card-front-4H::after {
  background-position: 90% 75%;
}
.card-front-4D::after {
  background-position: 100% 75%;
}
.card-front-3C::after {
  background-position: 0 100%;
}
.card-front-3S::after {
  background-position: 10% 100%;
}
.card-front-3H::after {
  background-position: 20% 100%;
}
.card-front-3D::after {
  background-position: 30% 100%;
}
.card-front-2C::after {
  background-position: 40% 100%;
}
.card-front-2S::after {
  background-position: 50% 100%;
}
.card-front-2H::after {
  background-position: 60% 100%;
}
.card-front-2D::after {
  background-position: 70% 100%;
}
:root {
  --color-primary: #804817;
  --color-primary-hover: #f1f0e3;
  --color-secondary: #000000;
  --color-bg: #fff7e9;
  --color-bg-dimmed: #d9d9d9;
  --color-bg-dark-grey: #c9c9c9;
  --color-bg-bright: #eeeeee;
  --color-bg-transparent: rgba(2, 2, 2, 0.5);
  --color-first-team: #593e25;
  --color-first-team-border: #ca986b;
  --color-second-team: #9e7b0f;
  --color-second-team-border: #facc3d;
  --color-stock: #593e25;
  --color-stock-border: #ca986b;
  --color-drop-shadow: rgba(0, 0, 0, 0.5);
  --color-drop-shadow-secondary: rgba(255, 225, 151, 1);
  --font-size-smallest: 12px;
  --font-size-small: 16px;
  --font-size-medium: 20px;
  --font-size-big: 26px;
  --font-size-biggest: 32px;
  --gap-smallest: 3px;
  --gap-small: 6px;
  --gap-medium: 14px;
  --gap-big: 22px;
  --padding-small: 4px;
  --padding-medium: 8px;
  --padding-big: 16px;
  --border-radius-small: 8px;
  --border-radius-medium: 16px;
  --border-radius-big: 20px;
  --border-mark: solid 2px var(--color-primary);
  --border-mark-mobile: solid 1px var(--color-primary);
  --ease-transition-normal: all 0.2s ease-in-out;
  --ease-transition-quick: all 0.1s ease-in-out;
  --ease-transition-toggle: all 0.2s ease-out;
  --avatar-bg-pos-brown: -262px -322px;
  --avatar-bg-pos-blue: -40px -322px;
  --avatar-bg-pos-yellow: -217px -322px;
  --avatar-bg-pos-red: -305px -322px;
  --small-avatar-bg-pos-brown: -505px -342px;
  --small-avatar-bg-pos-blue: -403px -342px;
  --small-avatar-bg-pos-yellow: -485px -342px;
  --small-avatar-bg-pos-red: -525px -342px;
  --broken-suit-bg-pos-hearts: -456px -633px;
  --broken-suit-bg-pos-spades: -412px -683px;
  --player-long-edge-min: 56px;
  --player-long-edge-wanted: 9vw;
  --player-long-edge-max: 90px;
  --player-short-edge-min: 32px;
  --player-short-edge-wanted: 5.3vw;
  --player-short-edge-max: 42px;
  --player-text-size: 4vw;
  --player-text-size-spades: 3vw;
  --drop-shadow-mark: none;
  --drop-shadow-hand-card: none;
  --drop-shadow-stock-card: none;
  --drop-shadow-button: none;
  --drop-shadow-hard: none;
}
body.isNotMobile.isNotSafari {
  --drop-shadow-mark: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
  --drop-shadow-hand-card: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2));
  --drop-shadow-stock-card: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2));
  --drop-shadow-button: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
  --drop-shadow-hard: drop-shadow(0 0 8px black);
}
.cgMiniScoreboardTeam {
  font-size: var(--font-size-smallest);
}
.cgLoadCardsDialog {
  z-index: 100;
}
.cgNewMenuBigButton {
  min-width: 90px;
  height: 40px;
}
.cgNewMenuSmallButton {
  max-width: 90px;
  flex-basis: 50px;
  height: 40px;
}
.cgNewMenuImgButton {
  min-width: 70px;
  height: 104px;
}
.cgNewMenuOptions {
  display: flex;
  overflow: hidden;
}
.cgNewMenuOptions input {
  position: absolute !important;
  height: 0;
  width: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  top: 0;
}
.cgNewMenuOptions label {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--font-size-medium);
}
.cgNewMenuOptions label:hover {
  cursor: pointer;
  background-color: var(--color-primary-hover);
}
.cgNewMenuOptions input:checked + label {
  color: var(--color-bg);
  background-color: var(--color-primary);
  box-shadow: none;
}
.cgNewMenuOptions input:checked + label:hover {
  background-color: var(--color-first-team);
  border-color: var(--color-first-team);
}
.card.cgHandCard {
  filter: var(--drop-shadow-hand-card);
}
.card.cgStockCard {
  filter: var(--drop-shadow-stock-card);
}
#playarea.cgCardGame {
  position: absolute;
  padding-top: 30px;
  margin-top: -30px;
  z-index: 0;
}
#cgBoardArea {
  position: absolute;
  width: 100%;
  padding-top: var(--padding-small);
}
.centerArea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  text-align: center;
}
.cgPlayerContainer {
  position: absolute;
  z-index: 30;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  border-radius: 50px;
  border-width: 2px;
  padding: 2px;
  border-style: solid;
  min-width: var(--player-long-edge-min);
  width: var(--player-long-edge-wanted);
  max-width: var(--player-long-edge-max);
  min-height: var(--player-short-edge-min);
  height: var(--player-short-edge-wanted);
  max-height: var(--player-short-edge-max);
  flex-direction: row;
}
.cgPlayerContainer.cgBoardBottom,
.cgPlayerContainer.cgBoardTop {
  margin: 0 auto;
  left: 0;
  right: 0;
}
.cgPlayerContainer.cgBoardTop {
  top: var(--padding-small);
}
.cgPlayerContainer.cgBoardBottom {
  bottom: var(--padding-small);
}
.cgPlayerContainer.cgBoardLeft,
.cgPlayerContainer.cgBoardRight {
  transform: translateY(100%);
  margin: auto 0;
  top: 0;
  bottom: 0;
}
.cgPlayerContainer.cgBoardRight {
  right: var(--padding-medium);
}
.cgPlayerContainer.cgBoardLeft {
  left: var(--padding-medium);
}
.cgTeamImages .cgPlayerAvatar {
  width: 29px !important;
  height: 29px !important;
}
.cgTeamColor0,
.cgTeamColorX {
  background-color: var(--color-first-team);
  border-color: var(--color-first-team-border);
}
.cgTeamColor1 {
  background-color: var(--color-second-team);
  border-color: var(--color-second-team-border);
}
.cgPlayerScoreSpan {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  font-size: var(--player-text-size);
  display: flex;
  color: var(--color-bg);
  flex-wrap: wrap;
  padding-left: 2px;
  padding-right: 2px;
  align-content: center;
  padding-bottom: 1px;
}
.cgPlayerScoreSpan > .cgVerticalScore {
  line-height: 1;
}
.cgImgContainer {
  display: flex;
  justify-content: center;
  position: absolute;
  flex-direction: row;
  height: 100%;
}
#cgDealer.cgBoardLeft,
#cgDealer.cgBoardRight,
#cgTaker.cgBoardLeft,
#cgTaker.cgBoardRight,
.cgImgContainer.cgBoardLeft,
.cgImgContainer.cgBoardRight {
  left: 50%;
  transform: translateX(-50%);
}
.cgImgContainer.cgBoardBottom,
.cgImgContainer.cgBoardTop {
  left: 100%;
  margin-left: var(--padding-small);
}
.cgImgContainer.cgBoardLeft,
.cgImgContainer.cgBoardRight {
  bottom: 100%;
  margin-bottom: var(--padding-small);
}
.cgPlayerContainer .cgPlayerAvatar {
  height: 100%;
}
.cgPlayerAvatar.cgBoardBottom,
.cgPlayerAvatar.cgBoardLeft,
.cgPlayerAvatar.cgBoardRight,
.cgPlayerAvatar.cgBoardTop {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-size: 3877%;
  background-position: 21.45% 3.9%;
  height: 100%;
  width: 40px;
  min-width: var(--player-short-edge-min);
  width: var(--player-short-edge-wanted);
  max-width: var(--player-short-edge-max);
}
.cgPlayerAvatar.cgBoardBottom {
  background-position-x: 21.45%;
}
.cgPlayerAvatar.cgBoardLeft {
  background-position-x: 15.9%;
}
.cgPlayerAvatar.cgBoardTop {
  background-position-x: 13.1%;
}
.cgPlayerAvatar.cgBoardRight {
  background-position-x: 18.7%;
}
.cgEaseAppear {
  opacity: 1 !important;
  transition: var(--ease-transition-quick);
}
.cgEaseDisappear {
  opacity: 0 !important;
  transition: var(--ease-transition-normal);
}
.cgButtonClickEffect:active {
  transform: translateY(1px);
}
.cgBottomActionButton.cgPassTakeButton:hover,
.cgBottomActionButton.cgWeakActionButton:hover {
  background-color: var(--color-primary-hover);
}
.cgDropShadowButton {
  filter: var(--drop-shadow-button);
}
.cgHardDropShadow {
  filter: var(--drop-shadow-hard);
}
.cgCardScoresDialog,
.cgPrevTurnCardsDialog {
  overflow: visible;
}
.cgCardScoresDialog .dlgCloseBtn,
.cgPrevTurnCardsDialog .dlgCloseBtn {
  width: 40px;
  height: 40px;
  top: -20px;
  right: -10px;
  background-size: 4720%;
  background-position: 25.65% -0.3%;
  background-color: var(--color-bg);
  border: var(--border-mark);
  border-width: 6px;
  border-radius: 50%;
  opacity: 1;
  transition: var(--ease-transition-quick);
}
.cgCardScoresDialog .dlgCloseBtn:hover,
.cgPrevTurnCardsDialog .dlgCloseBtn:hover {
  background-color: var(--color-bg-bright);
}
.cgFlexRow.cgBidButtons {
  position: absolute;
  padding-top: 12px;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
.cgBottomActionButton.cgPassTakeButton {
  background-color: var(--color-bg);
  border: var(--border-mark);
  color: var(--color-primary);
  flex-basis: 80px;
  pointer-events: all;
  padding-top: 12px;
  padding-bottom: 12px;
  height: auto;
}
.cgPrevTurnCardsButton {
  background-position-x: 23%;
  opacity: 1;
  pointer-events: all;
  transition: var(--ease-transition-quick);
}
.cgPrevTurnCardsButton.hidden {
  opacity: 0;
  pointer-events: none;
  transition: var(--ease-transition-quick);
}
.cgSmallCard {
  position: relative;
  width: 55px;
  height: 86px;
}
.cgPrevTurnCardsButton,
.cgScoreHelperButton {
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 4180%;
  background-position-y: -0.3%;
}
.cgHelperButtonsDiv {
  position: absolute;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.cgHelperButtonsDiv > :not(:last-child) {
  margin-right: var(--gap-small);
}
.cgHelperButtonsDiv > .cgHelperButton {
  flex-shrink: 0;
  box-sizing: border-box;
}
.cgHelperButtonsDiv > .cgHelperButton:hover {
  background-color: var(--color-primary-hover);
}
.cgScoreHelperButton {
  background-position-x: 20.13%;
}
.cgCardLabelText {
  max-width: 100px;
  white-space: normal;
  line-height: 1em;
  text-align: center;
}
.cgDisallowedLabel {
  opacity: 0.65;
}
.cgInvisibleLabel,
.cgInvisibleLabel.cgDisallowedLabel {
  opacity: 0;
}
.cgHelperButton {
  background-color: var(--color-bg);
  border-radius: var(--border-radius-small);
  position: static;
  width: 49px;
  height: 49px;
  border: solid 2px var(--color-primary);
  display: inline-block;
  cursor: pointer;
}
.cgMiniScoreboard {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  left: var(--padding-medium);
  padding: var(--padding-small) var(--padding-medium);
  background-color: var(--color-bg);
  border: var(--border-mark);
  border-radius: var(--border-radius-medium);
  color: var(--color-primary);
  text-transform: uppercase;
  align-content: space-around;
  justify-content: space-between !important;
}
.cgScorePoint {
  border-radius: 50%;
  border: var(--border-mark);
  width: 8px;
  height: 8px;
}
.cgScorePoint.cgTbd {
  background-color: transparent;
}
.cgScorePoint.cgTie {
  background-color: gray;
  border-color: gray;
}
.cgScorePoint.cgWin {
  background-color: green;
  border-color: green;
}
.cgScorePoint.cgLoss {
  background-color: red;
  border-color: red;
}
.cgTakerSeparator {
  border-left: 1px solid var(--color-primary);
  align-self: center;
  margin-left: 2px;
  height: 60px;
}
.cgMiniTakerBox {
  justify-content: space-between !important;
}
.cgMiniTakerBox:empty,
.cgTakerSeparator:empty {
  display: none;
}
.cgMiniScoreboardScore {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  min-width: 3ch;
  min-height: 3ch;
  padding: var(--padding-small);
  border: var(--border-mark);
  font-size: var(--font-size-small);
}
.cgMiniScoreboardMaxScore {
  text-transform: none;
  font-size: var(--font-size-small);
}
.cgNewPodium {
  margin: auto var(--padding-small);
  flex-wrap: nowrap;
}
.cgAlignCenter {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}
.cgPrimaryColor {
  color: var(--color-primary);
}
.cgSecondaryColor {
  color: var(--color-secondary);
}
.cgBackgroundColor {
  color: var(--color-bg);
}
#cgCardScoresHelperDivWrapper .cgCenterText {
  width: 2ch;
  flex-shrink: 0;
}
#cgCardScoresHelperDivWrapper .cgFlexRow {
  white-space: nowrap;
}
#cgCardScoresHelperDivWrapper .cgFlexCol {
  flex: 1 0 auto;
}
.cgCenterText {
  text-align: center;
}
.cgLightDialogTitle {
  color: var(--color-bg-bright);
  text-align: center;
  text-transform: uppercase;
}
.cgSwitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.cgSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cgSlider,
.cgSlider::before {
  position: absolute;
  transition: var(--ease-transition-toggle);
}
.cgSlider {
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-dark-grey);
  border-radius: 34px;
}
.cgSlider::before {
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-bg);
  border-radius: 50%;
}
input:checked + .cgSlider {
  background-color: var(--color-primary);
}
input:checked + .cgSlider::before {
  transform: translateX(26px);
}
.cgPrevTurnCardImg {
  width: 78px;
  height: 122px;
  position: absolute;
  margin: auto;
  filter: drop-shadow(0 0 12px var(--color-drop-shadow));
}
.cgPrevTurnWinningCard {
  filter: drop-shadow(0 0 4px gold);
  outline: 6px solid gold;
  border-radius: 6px;
}
.cgPrevTurnCardImg.cgBoardTop {
  left: 0;
  right: 0;
  top: 0;
}
.cgPrevTurnCardImg.cgBoardBottom {
  left: 0;
  right: 0;
  bottom: 0;
}
.cgPrevTurnCardImg.cgBoardRight,
.cgPrevTurnCardsInner {
  right: 0;
  top: 0;
  bottom: 0;
}
.cgPrevTurnCardImg.cgBoardLeft {
  left: 0;
  top: 0;
  bottom: 0;
}
.cgPrevTurnCardsInner {
  width: 200px;
  height: 200px;
  left: 0;
  margin: 12px 20px;
  position: relative;
}
#cgLeaderboardBody {
  overflow: auto;
  justify-content: initial;
  width: 100%;
  font-size: var(--font-size-big);
}
.cgPodiumContainer {
  flex-shrink: 0;
}
.cgLeaderboardLine,
.cgLeaderboardLineContent {
  display: flex;
  justify-content: space-evenly;
  flex-flow: row nowrap;
}
.cgLeaderboardLine {
  flex-shrink: 0;
  align-items: center;
  font-size: var(--font-size-big);
  color: var(--color-primary);
  padding-left: 2px;
  padding-right: 2px;
  overflow-x: hidden;
}
.cgLeaderboardTable > .cgLeaderboardLine {
  padding-left: 0;
  padding-right: 0;
}
.cgLeaderboardLineContent {
  flex-grow: 1;
  padding-left: var(--padding-medium);
  padding-right: var(--padding-medium);
}
.cgLeaderboardLineContent > :not(:last-child) {
  margin-right: var(--gap-big);
}
.cgLeaderboardLineTitle {
  flex-grow: 0;
  flex-shrink: 0;
  width: 7ch;
  line-height: 1.1;
}
.cgLeaderboardTable .cgLeaderboardLineTitle {
  background-color: var(--color-bg-dimmed);
  padding-top: var(--padding-small);
  padding-bottom: var(--padding-small);
}
.cgLeaderboardLineContent > .cgLeaderBoardLineContentItem {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  direction: ltr;
}
.cgLeaderboardLine > .cgLongTitle {
  width: 60%;
}
.cgLeaderboardLine > .cgHalfTitle {
  width: 50%;
}
.cgLeaderboardLine .cgTeamImages {
  margin-top: var(--padding-small);
}
.cgTransparentBg {
  background-color: transparent;
}
.cgLeaderboardTable {
  display: flex;
  overflow: auto;
  flex-flow: column nowrap;
  border: 2px solid var(--color-bg-dimmed);
  border-radius: var(--border-radius-small);
  background-color: var(--color-bg-bright);
  color: var(--color-primary);
  flex-shrink: 0;
}
.cgLeaderboardTable .cgScrollable {
  max-height: 100px;
}
.cgLeaderboardTable:empty {
  display: none;
}
.cgLeaderboardNoScoreYet {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 5px;
}
.cgLeaderboardNoScoreYet,
.cgLeaderboardNote {
  font-size: var(--font-size-big);
}
.cgButton {
  z-index: 80;
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
}
.cgGameIntroBodyWrap {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 50px;
  max-width: 800px;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}
.cgPassArrow {
  position: absolute;
  border: solid var(--color-bg);
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 9px;
  z-index: 60;
}
.cgPassArrow.cgBoardRight {
  left: 100%;
  transform: rotate(-45deg);
}
.cgPassArrow.cgBoardLeft {
  right: 100%;
  transform: rotate(135deg);
}
.cgPassArrow.cgBoardTop {
  bottom: 100%;
  transform: rotate(-135deg);
}
.cgPassArrow.cgBoardBottom {
  top: 100%;
  transform: rotate(45deg);
}
.cgCenterSignArea {
  position: absolute;
  left: var(--padding-medium);
  bottom: 0;
  display: none;
}
.cgHelpImg,
.cgSignText {
  border-radius: var(--border-radius-small);
}
.cgSignText {
  background-color: var(--color-bg-transparent);
  padding: var(--padding-small);
  color: var(--color-bg);
  text-align: center;
  line-height: 1;
}
.cgHelpImg {
  width: 500px;
  max-width: 80%;
  margin-top: 6px;
  border: 1px solid #000;
}
.cgHelpSub {
  text-decoration: underline;
  font-weight: 700;
}
.cgFlipCard {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  box-shadow: none;
}
.cgFlipCardInner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.cgFlipCardBack,
.cgFlipCardFront {
  transform-origin: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cgFlipCardBack {
  transform: rotateY(180deg);
}
.cgSpadesBidPanel {
  display: flex;
  flex-direction: column;
  background-color: #804817;
  padding: 0 18px 18px;
  border-radius: var(--border-radius-big);
}
.cgSpadesBidTitle {
  text-align: center;
  height: 40px;
  padding: 10px 0;
  font-size: 28px;
  color: #efefef;
}
.cgSpacesBidLine {
  display: flex;
  margin-left: 10px;
  margin-right: 10px;
  flex-grow: 1;
}
.cgSpadesBidButton {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #f9f9f9;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}
.cgSpadesBidButtonDisabled {
  background-color: #c7c7c7;
  color: #e7e4e4;
  cursor: not-allowed;
}
.cgSpadesBidButtonAllowed {
  cursor: pointer;
  color: #9d3f0b;
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}
.cgSpadesBidButtonAllowed:hover {
  background-color: #eee;
}
.cgSpadesMiniLdbTable {
  overflow: auto;
  background-color: #804817;
  border: var(--border-mark);
  border-radius: var(--border-radius-medium);
  position: absolute;
  z-index: 10;
  left: var(--padding-medium);
  box-shadow: 0 10px 10px 0 rgb(0 0 0/16%), 0 10px 10px 0 rgb(0 0 0/16%);
}
.cgSpadesMiniLdbCell1,
.cgSpadesMiniLdbCell2 {
  display: inline-block;
  width: 50px;
  text-align: center;
  color: #804817;
}
.cgSpadesMiniLdbCellDetails {
  display: inline-block;
  background-color: var(--color-bg);
}
.cgSpadesMiniLdbTitle1,
.cgSpadesMiniLdbTitle2 {
  display: inline-block;
  width: 50px;
  text-align: center;
  color: #fff;
}
#cgDealer,
#cgTaker,
.cgBrokenHearts,
.cgBrokenSpades,
.cgWhistTrump {
  box-sizing: border-box;
  position: absolute;
  display: flex;
  pointer-events: all;
  justify-content: center;
  align-items: center;
  min-height: var(--player-short-edge-min);
  height: var(--player-short-edge-wanted);
  max-height: var(--player-short-edge-max);
  min-width: var(--player-short-edge-min);
  width: var(--player-short-edge-wanted);
  max-width: var(--player-short-edge-max);
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--font-size-big);
  border: var(--border-mark);
  border-radius: 60px;
}
.cgBrokenHearts,
.cgBrokenSpades {
  position: relative;
  background-image: url(../../assets/game-common-icons-spritesheet-v374.png);
  background-repeat: no-repeat;
  background-size: 4030%;
  min-width: auto;
  width: 46px;
  max-width: none;
  min-height: auto;
  height: 46px;
  max-height: none;
  filter: var(--drop-shadow-mark);
  bottom: var(--padding-small);
}
.cgBrokenHearts {
  background-position-x: 17.3%;
  background-position-y: -0.4%;
}
.cgBrokenSpades {
  background-position-x: 14.65%;
  background-position-y: -0.2%;
}
#cgTaker.cgBoardBottom,
#cgTaker.cgBoardTop {
  right: 100%;
  margin-right: var(--padding-small);
}
#cgTaker.cgBoardLeft,
#cgTaker.cgBoardRight {
  top: 100%;
  margin-top: var(--padding-small);
}
#cgDealer .cgMarkContainer {
  content: url(../../assets/dealer-mark.png);
}
#cgDealer.cgBoardBottom,
#cgDealer.cgBoardTop {
  left: 100%;
  margin-left: var(--padding-small);
}
#cgDealer.cgBoardLeft,
#cgDealer.cgBoardRight {
  bottom: 100%;
  margin-bottom: var(--padding-small);
}
.cgMarkContainer {
  height: 26px;
  width: 26px;
}
#cgDealer .cgMarkContainer,
#cgTaker .cgMarkContainer {
  height: 75%;
  width: 75%;
}
.cgMarkContainer.cgSpades {
  content: url(../../assets/suit-mark-spades.png);
}
.cgMarkContainer.cgHearts {
  content: url(../../assets/suit-mark-hearts.png);
}
.cgMarkContainer.cgClubs {
  content: url(../../assets/suit-mark-clubs.png);
}
.cgMarkContainer.cgDiamonds {
  content: url(../../assets/suit-mark-diamonds.png);
}
.cgInnerModal.cgDeclaration {
  padding: 22px 28px;
}
.cgDeclarationCard,
.cgScopaPickCard {
  position: relative;
  height: 90px;
  width: 58px;
}
.cgScopaPickCard {
  height: 117px;
  width: 75px;
  cursor: pointer;
}
.cgScopaLdbPoints {
  color: green;
}
.cgSay {
  position: absolute;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-bg);
  border-color: var(--color-bg);
  font-size: var(--font-size-big);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  padding: 10px;
  z-index: 99;
  border-radius: var(--border-radius-medium);
  --say-margin: 16px;
  --tail-short-edge: 8px;
  --tail-long-edge: 12px;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  pointer-events: none;
}
.cgLongSay {
  width: 300px;
  white-space: normal;
}
@media (min-width: 1000px) {
  .cgLongSay {
    width: 500px;
  }
}
.cgPlayerContainer .cgSay.cgBoardLeft,
.cgPlayerContainer .cgSay.cgSay.cgBoardRight {
  top: 50%;
  transform: translateY(-50%);
}
.cgSay.cgBoardBottom,
.cgSay.cgBoardTop {
  transform: translate(calc(-1 * var(--translate-before, 0px)));
}
.cgSay.cgBoardBottom {
  bottom: 100%;
  margin-bottom: var(--say-margin);
}
.cgSay.cgBoardLeft {
  left: 100%;
  margin-left: var(--say-margin);
}
.cgSay.cgBoardTop {
  top: 100%;
  margin-top: var(--say-margin);
}
.cgSay.cgBoardRight {
  right: 100%;
  margin-right: var(--say-margin);
}
.cgSay:before {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
  border-width: var(--tail-short-edge);
}
.cgSay.cgSay.cgBoardBottom:before,
.cgSay.cgSay.cgBoardTop:before {
  transform: translateX(var(--translate-before, 0px));
}
.cgSay.cgBoardBottom:before {
  top: 98%;
  border-bottom: 0;
  border-top: var(--color-bg) solid var(--tail-long-edge);
}
.cgSay.cgBoardLeft:before {
  right: 98%;
  border-left-width: 0;
  border-right: var(--color-bg) solid var(--tail-long-edge);
}
.cgSay.cgBoardTop:before {
  bottom: 98%;
  border-top: 0;
  border-bottom: var(--color-bg) solid var(--tail-long-edge);
}
.cgSay.cgBoardRight:before {
  left: 98%;
  border-right-width: 0;
  border-left: var(--color-bg) solid var(--tail-long-edge);
}
.cgBrokenHearts .cgTooltip,
.cgBrokenSpades .cgTooltip {
  bottom: 0;
}
.cgBrokenHearts ::before,
.cgBrokenSpades ::before {
  bottom: 20%;
}
.cgTooltip {
  font-size: var(--font-size-medium);
}
.cgTooltipOnHover {
  opacity: 1;
}
.cgPodiumBar {
  background-color: var(--color-primary);
}
.cgPodiumBarDiv .cgTeamImages {
  margin-top: -32px;
  align-items: center;
}
.cgPodium {
  margin-bottom: var(--padding-medium);
}
.cgLeaderboardWinMsg {
  font-size: var(--font-size-biggest);
  padding-bottom: var(--padding-big);
}
.cgPodiumBarContainer,
.cgPodiumBarDiv {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}
.cgPodiumBarDiv {
  height: 100%;
  max-width: 25%;
}
.cgPodiumBarContainer {
  height: 60px;
  justify-content: flex-end;
}
.cgPodiumBarContainer > :not(:last-child) {
  margin-bottom: var(--gap-smallest);
}
.cgWhistTrumpDiv {
  position: relative;
  height: 46px;
  width: 46px;
}
.cgCrossedTrumpMark {
  width: 100%;
  background-color: var(--color-primary);
  border: solid 1px var(--color-primary);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
}
.cgCardLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: calc(100% + 2px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-first-team);
  font-size: var(--font-size-small);
  box-sizing: border-box;
  line-height: 1em;
  transition: all 0.05s ease-out;
  border: var(--border-mark-mobile);
}
.isMobile .cgCardLabel {
  width: 24px;
  height: 24px;
  font-size: 16px;
}
.isNotMobile.isNotSafari .cgCardLabel {
  border: 0;
}
.cgSelectorButton {
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  text-align: center;
}
.cgBottomActionButton:hover {
  background-color: var(--color-first-team);
  border-color: var(--color-first-team);
}
.isNotMobile .newGameWindowHeader.cgNewGameWindowHeader {
  padding-top: 44px;
  padding-bottom: 44px;
}
.cgNewGameMenuItemTitle {
  text-transform: uppercase;
  font-size: var(--font-size-medium);
  text-align: center;
  align-items: center;
}
.cgNewGameCheckbox,
.cgNewGameMenuItemTitle {
  color: var(--color-primary);
}
.cgNewGameCheckbox input {
  width: 20px;
}
.cgModalHeader {
  font-size: var(--font-size-biggest);
  color: var(--color-bg);
  text-align: center;
}
.cgOuterModal {
  background: var(--color-primary);
  border-radius: var(--border-radius-medium);
  display: flex;
  flex-flow: column nowrap;
  padding: var(--padding-medium);
}
.cgOuterModal > :not(:last-child) {
  margin-bottom: var(--gap-small);
}
.cgInnerModal {
  background: var(--color-bg);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius-medium);
  padding: var(--padding-big);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cgInnerModal > :not(:last-child) {
  margin-bottom: 32px;
}
.cgBottomActionButton,
.cgWeakActionButton {
  flex-basis: 38%;
  white-space: nowrap;
  height: 60px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-size: var(--font-size-big);
  line-height: 1.1;
  padding: 1rem;
  border-radius: var(--border-radius-big);
}
.cgWeakActionButton {
  background-color: transparent;
  color: var(--color-primary);
}
.cgUnevenWidthButton {
  flex-basis: auto;
}
.cgSmallActionButton {
  height: 55px;
  border-radius: var(--border-radius-medium);
}
.cgButtonsContainer {
  position: absolute;
  width: 20%;
}
.cgButton.cgTruco {
  color: #fff;
  padding: var(--padding-medium);
}
.cgButton.cgAnswer,
.cgButton.cgEnvido,
.cgButton.cgTruco {
  border-radius: var(--border-radius-small);
}
.cgButton.cgEnvido {
  color: #fff;
  padding: var(--padding-medium);
}
.cgButton.cgEnvido,
.cgButton.cgTruco {
  background-color: #5e60ff;
}
.cgButton.cgAnswer {
  background-color: #0fd;
  padding: var(--padding-small);
  color: #000;
}
.cgButtonsContainer.cgEnvido,
.cgButtonsContainer.cgTruco {
  flex-direction: column-reverse;
}
.cgButtonsContainer.cgAnswer {
  flex-direction: row;
  width: 50%;
  left: 0;
  right: 0;
  margin: auto;
}
.cgButtonsContainer.cgAnswer,
.cgButtonsContainer.cgEnvido,
.cgButtonsContainer.cgTruco {
  bottom: var(--padding-small);
  gap: var(--gap-medium);
}
.cgButtonsContainer.cgEnvido {
  right: var(--padding-medium);
}
.cgButtonsContainer,
.cgFlexCol,
.cgFlexRow {
  display: flex;
  justify-content: center;
}
.cgFlexRow {
  flex-direction: row;
  flex-wrap: wrap;
}
.cgFlexCol {
  flex-direction: column;
}
.cgFlexRow.cgReverse {
  flex-direction: row-reverse;
}
.cgFlexCol.cgReverse {
  flex-direction: column-reverse;
}
.cgFlexRow > :not(:last-child) {
  margin-right: var(--gap-small);
}
.cgFlexCol > :not(:last-child) {
  margin-bottom: var(--gap-small);
}
.cgFlexCol .cgFlexNoGap > * {
  margin-bottom: 0;
}
.cgFlexRow .cgFlexNoGap > * {
  margin-right: 0;
  margin-left: 0;
}
.cgFlexCol.cgFlexSmallGap > :not(:last-child) {
  margin-bottom: var(--gap-small);
  margin-right: var(--gap-small);
}
.cgFlexCol.cgFlexMediumGap > :not(:last-child) {
  margin-bottom: var(--gap-medium);
}
.cgFlexRow.cgFlexMediumGap > :not(:last-child) {
  margin-right: var(--gap-medium);
}
.cgFlexCol.cgFlexBigGap > :not(:last-child) {
  margin-bottom: var(--gap-big);
}
.cgFlexRow.cgFlexBigGap > :not(:last-child) {
  margin-right: var(--gap-big);
}
.cgFlexNoWrap {
  flex-wrap: nowrap;
}
.cgFontSizeBig {
  font-size: var(--font-size-big);
}
.cgDisplayNone {
  display: none;
}
.cgLtr {
  direction: ltr;
}
.cgTakerBoxAnimation {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transform: scale(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out,
    max-width 0.3s ease-out;
  animation: fadeInScaleUp 0.3s ease-out;
}
.cgTakerBoxAnimation.cgVisibleTakerBox {
  max-width: 100px;
  opacity: 1;
  transform: scale(1);
  transition: max-width 0.3s ease-out;
}
.cgPopup {
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.1s ease-out;
}
.cgPopup.cgVisiblePopup {
  opacity: 1;
  transform: scale(1);
  transition: all 0.1s ease-out;
}
.cgPopup.cgBoardBottom {
  bottom: 10%;
  left: 0;
  right: 0;
  text-align: center;
}
.cgStockSizeDiv {
  position: absolute;
  z-index: 80;
  text-align: center;
  border-radius: 8px;
  font-size: var(--font-size-medium);
  padding: 12px;
}
.isNotMobile .cgStockSizeDiv {
  padding: 14px;
}
@media (max-width: 600px), (max-height: 500px) {
  .cgSpadesMiniLdbTable {
    border-radius: var(--border-radius-small);
    z-index: 10;
    left: var(--padding-medium);
  }
  .cgSpadesMiniLdbCell1,
  .cgSpadesMiniLdbCell2,
  .cgSpadesMiniLdbTitle1,
  .cgSpadesMiniLdbTitle2 {
    width: 40px;
  }
}
@media (max-width: 475px) {
  :root {
    --player-text-size: 19px;
  }
}
@media (min-width: 925px) {
  :root {
    --player-text-size: 37px;
  }
}
@media (max-width: 600px) {
  :root {
    --player-text-size-spades: 18px;
  }
}
@media (min-width: 1000px) {
  :root {
    --player-text-size-spades: 30px;
  }
}
@media (max-width: 500px), (max-height: 500px) {
  :root {
    --gap-smallest: 3px;
    --gap-small: 6px;
    --gap-medium: 8px;
    --gap-big: 12px;
    --font-size-small: 13px;
    --font-size-medium: 16px;
    --font-size-big: 18px;
    --font-size-biggest: 22px;
  }
  .cgBottomActionButton {
    height: 45px !important;
    border-radius: var(--border-radius-medium) !important;
  }
  .cgBottomActionButton.cgSmallActionButton {
    height: 32px !important;
  }
  .cgNewMenuBigButton,
  .cgNewMenuSmallButton {
    height: 32px;
  }
  .cgBottomActionButton.cgPassTakeButton {
    flex-basis: 50px !important;
  }
}
@media (max-width: 600px) {
  .cgDeclarationCard {
    height: 70px;
    width: 45px;
  }
  .cgScopaPickCard {
    height: 91px;
    width: 58px;
    cursor: pointer;
  }
  .cgDeclaration .cgDeclarationCards > *,
  .cgDeclaration .cgScopaPickCard > *,
  .cgNewMenuOptions label {
    margin-bottom: var(--gap-small);
  }
  .cgNewgameMenuActionButtons.cgFlexRow
    > .cgBottomActionButton:not(:last-child) {
    margin-bottom: var(--gap-small);
  }
}
.bgGameIntroBodyWrap {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 50px;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}
.bgNewGameMenuDropDown {
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
  background-color: var(--color-bg);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-small);
  text-align: center;
  font-size: var(--font-size-medium);
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
  font-weight: 700;
  max-width: 290px;
}
.bgMenuFlexCol,
.bgMenuFlexRow {
  position: relative;
  display: flex;
}
.bgMenuFlexRow:not(.bgMenuFlexScroll) {
  justify-content: center;
}
.bgMenuFlexScroll {
  overflow-y: auto;
  justify-content: flex-start;
}
.bgMenuFlexRow {
  flex-direction: row;
  flex-wrap: wrap;
}
.bgMenuFlexCol {
  flex-direction: column;
}
.bgMenuFlexRow > :not(.bgMenuFlexRow):not(.bgMenuFlexCol) {
  margin: var(--gap-smallest);
}
.bgMenuFlexCol > :not(.minesSizesGroup):not(:last-child) {
  margin-bottom: var(--gap-small);
}
.bgMenuFlexCol.bgFlexMediumGap > :not(:last-child) {
  margin-bottom: var(--gap-medium);
}
.bgNewGameMenuDropDown,
.bgNewGameMenuDropDown option {
  min-width: 90px;
  height: 40px;
}
.bgNewGameMenuDropDown > option:hover:not(:checked) {
  cursor: pointer;
  background-color: var(--color-primary-hover) !important;
}
.bgNewGameMenuDropDown option:checked:not(:hover) {
  color: var(--color-bg);
  background-color: var(--color-primary);
  box-shadow: none;
}
.bgNewGameMenuDropDown option:hover:checked {
  background-color: var(--color-first-team);
  border-color: var(--color-first-team);
}
.bgFlexCol,
.bgFlexRow,
div.bgInModalExplanationWrapper {
  display: flex;
  justify-content: center;
}
.bgFlexRow {
  flex-direction: row;
}
.bgFlexCol {
  flex-direction: column;
}
.bgInvisible {
  visibility: hidden;
}
.bgZeroOpacity {
  opacity: 0;
}
.bgFullOpacity {
  opacity: 1;
}
.bgFlipHorizontally {
  transform: scaleX(-1);
}
.bgFullOpacityOutDiv {
  transition: visibility 0.5s;
  pointer-events: none;
}
.fadeInOutMessage {
  height: auto;
  width: auto;
}
.bgMessageStyle {
  color: #9d3e09;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
@media (max-width: 1399px) {
  .bgMessageStyle {
    font-size: 22px;
  }
}
@media (min-width: 1400px) {
  .bgMessageStyle {
    font-size: 30px;
  }
}
.clickThrough {
  pointer-events: none;
}
.bgNewGameMenuCheckbox {
  color: var(--color-primary);
}
.bgNewGameMenuCheckbox:hover {
  cursor: pointer;
  color: var(--color-first-team);
}
.bgTimerPenalty {
  position: absolute;
  color: red;
  font-size: var(--font-size-big);
  transform: translateX(-50%);
}
.allPointerEvents {
  pointer-events: all;
}
div.bgInModalExplanationWrapper {
  position: relative;
  align-items: center;
  text-align: center;
  width: 300px;
  height: 66px;
  padding: 0 8px;
  text-wrap: balance;
  margin: auto;
  font-size: var(--font-size-medium);
}
div.bgInModalExplanationWrapper .bgInModalExplanation {
  display: inline;
}
.bgInModalSunken {
  border: 1px solid #e6ded2;
  border-radius: 20px;
  padding: 10px 0;
  background-color: #fffdf8;
}
.dim50 {
  filter: brightness(50%);
}
.bgExplosionFrame {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/battleatsea/battleatsea_icons_spritesheet_v347.png);
  background-size: 500% 900%;
}
.bgExplosionFrame-1 {
  background-position: 75%0;
}
.bgExplosionFrame-2 {
  background-position: 100%0;
}
.bgExplosionFrame-3 {
  background-position: 100% 12.5%;
}
.bgExplosionFrame-4 {
  background-position: 100% 25%;
}
.bgExplosionFrame-5 {
  background-position: 100% 37.5%;
}
.bgExplosionFrame-6 {
  background-position: 100% 50%;
}
.bgExplosionFrame-7 {
  background-position: 100% 62.5%;
}
.bgCross {
  position: relative;
  box-sizing: border-box;
}
.bgCross::after,
.bgCross::before {
  content: " ";
  position: absolute;
  z-index: 1;
}
.bgCross::after {
  top: 50%;
  left: 0;
  right: 0;
}
.bgCross::before {
  left: 50%;
  top: 0;
  bottom: 0;
}
.bgCrossX {
  transform-origin: center;
  transform: rotate(45deg);
}
.bgAlignContentStart {
  align-content: flex-start;
}
.bgArrowButton {
  cursor: pointer;
  border-radius: 50%;
}
.bgArrowButton:active {
  animation-name: btnAnm;
  animation-duration: 0.2s;
}
.bgArrowButton:hover {
  opacity: 0.95;
}
.bgLeaderBoardButton {
  padding-bottom: var(--padding-medium);
}
.bgScrollNewGameMenu > * {
  flex-shrink: 0;
}
.bgUltraDifficultyButton {
  color: #ce540b !important;
  border-color: #ce540b !important;
}
input:checked + .bgUltraDifficultyButton {
  color: gold !important;
  border-color: gold !important;
}
.bgControlsBarWrapper {
  position: fixed;
  top: 66px;
  z-index: 2;
}
.bgControlsBarWrapper:not(.bgControlBar-right) {
  left: 0;
}
.controlBarWrapperOpen.bgControlBar-right {
  right: 0;
}
.bgControlsBarBackground {
  position: relative;
  background-color: #a2754e;
  border-radius: 0 0 12px 0;
  padding: 3px;
  z-index: 1;
}
.bgCheckboxRow {
  flex-wrap: nowrap;
}
.bgControlBarButton {
  position: relative;
  display: flex;
  margin: 3px;
  padding: 6px;
  height: 6vw;
  width: 6vw;
  justify-content: center;
  border-radius: 25%;
  cursor: pointer;
  background-color: #ffe9ca;
  box-shadow: inset 0-3px 6px 2px #e7bc87;
  box-sizing: border-box;
  z-index: 3;
  background-size: 200% 200%;
}
.bgControlBarButton:not(.bgControlBarButton-mobile) {
  max-width: 50px;
  max-height: 50px;
}
.bgControlBarButton:hover {
  background-color: #f7dab3;
}
.controlBarToggler {
  position: absolute;
  height: 5vw;
  width: 6vw;
  background-color: #ffe9ca;
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-clip: content-box;
  bottom: 0;
  z-index: 1;
}
.bgControlsBarWrapper:not(.bgControlBar-right) .controlBarToggler {
  background-position: 75%center;
  border-radius: 0 40% 40%0;
  left: calc(100% - 2vw);
}
.bgControlsBarWrapper.bgControlBar-right .controlBarToggler {
  background-position: 25%center;
  border-radius: 40%0 0 40%;
  right: calc(100% - 2vw);
}
.controlBarWrapperClosed:not(.bgControlBar-right) {
  transform: translateX(-100%);
}
.controlBarWrapperClosed.bgControlBar-right {
  left: 100%;
}
.controlBarWrapperOpen:not(.bgControlBar-right) {
  transform: translateX(0);
}
.bgControlBar-right .controlBarTogglerOpen,
.bgControlsBarWrapper:not(.bgControlBar-right) .controlBarTogglerClosed {
  background-image: url(../../assets/right-arrow.png);
}
.controlBarTogglerClosed {
  opacity: 0.75;
}
.bgControlBar-right .controlBarTogglerClosed,
.bgControlsBarWrapper:not(.bgControlBar-right) .controlBarTogglerOpen {
  background-image: url(../../assets/left-arrow.png);
}
.controlBarTogglerOpen {
  opacity: 1;
}
.bgControlBarButton-mobile {
  height: 6vw;
  width: 6vw;
}
@media (max-width: 500px) {
  .bgControlBarButton,
  .bgControlBarButton-mobile {
    height: 12vw;
    width: 12vw;
  }
  .controlBarWrapperClosed:not(.bgControlBar-right) {
    transform: translateX(calc(-100% - 1vw));
  }
  .controlBarWrapperOpen:not(.bgControlBar-right) {
    transform: translateX(-1vw);
  }
  .controlBarWrapperClosed.bgControlBar-right {
    transform: translateX(calc(100% + 1vw));
  }
  .controlBarWrapperOpen.bgControlBar-right {
    transform: translateX(1vw);
  }
  .controlBarToggler {
    height: 10vw;
    width: 12vw;
    bottom: 0;
  }
  .bgControlsBarWrapper:not(.bgControlBar-right) .controlBarToggler {
    left: calc(100% - 4vw);
  }
  .bgControlsBarWrapper.bgControlBar-right .controlBarToggler {
    right: calc(100% - 4vw);
  }
  .bgControlsBarWrapper {
    top: var(--game-top-bar-height);
  }
  .bgControlsBar,
  .bgControlsBarWrapper,
  .controlBarToggler {
    transition: transform 0.2s ease-out, opacity 0.1s linear;
  }
}
.bgDotsLoader {
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bgDotsLoader-Dot {
  border-radius: 100%;
  border: 2px solid #000;
  margin: 4px;
}
.bgDotsLoader-Dot:nth-child(1) {
  animation: bgDotsAnimation 0.6s ease-in-out alternate infinite;
}
.bgDotsLoader-Dot:nth-child(2) {
  animation: bgDotsAnimation 0.6s ease-in-out alternate 0.2s infinite;
}
.bgDotsLoader-Dot:nth-child(3) {
  animation: bgDotsAnimation 0.6s ease-in-out alternate 0.4s infinite;
}
#winImage {
  left: 50%;
  transform: translateX(-50%);
}
#bgLeaderboardBody {
  justify-content: initial;
  width: 100%;
  font-size: var(--font-size-big);
}
#bgLeaderboardTable {
  max-height: 150px;
}
.gameMainDiv.blockDoubleTap,
.gameMainDiv.blockDoubleTap * {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.speechBubble {
  position: absolute;
  background-color: var(--color-bg);
  z-index: 5;
}
.speechBubbleTriangle {
  position: absolute;
  border-style: solid;
}
.speechBubbleText {
  color: #9d3e09;
  white-space: nowrap;
}
.bgTwoButtonsMessageTitle {
  margin: 0 30px 40px;
  font-size: 40px;
  text-wrap: balance;
}
.bgTwoButtonsMessageSubTitle {
  margin: -30px 0 15px;
  font-size: 30px;
}
.bgGameIntroBodyWrap {
  max-width: 820px;
}
.bgGridCell,
.bgGridWrapper {
  position: absolute;
  box-sizing: border-box;
}
.bgGridCell * {
  pointer-events: none;
}
.mahjongBoard,
.mahjongTileBody,
.mahjongTileFace,
.mahjongTileShadow {
  position: absolute;
}
.mahjongBoard {
  pointer-events: none;
  z-index: 0;
}
.mahjongHelpTile,
.mahjongTileBody,
.mahjongTileFace {
  border-radius: 5%;
}
.mahjongHelpTile,
.mahjongTileFace {
  background-size: 800% 700%;
  background-repeat: no-repeat;
}
.mahjongTileFace {
  border: 1px solid rgba(10, 15, 20, 0.25);
}
.mahjongTileFaceDimmed {
  background-blend-mode: multiply;
}
.mahjongFadeableTile {
  transition: background-color 0.4s ease, opacity 0.5s linear;
}
.mahjongLayoutButtonStats,
.mahjongLayoutButtonTd {
  width: 140px;
  height: 103px;
  display: block;
  position: relative;
  background-size: 900% 700%;
  border-radius: 8px;
}
.bgMahjongBoardLayoutThumb-desktop {
  background-image: url(../../assets/mahjong/layouts-desktop-v1.png);
}
.bgMahjongBoardLayoutThumb-mobile {
  background-image: url(../../assets/mahjong/layouts-mobile-v1.png);
}
div.mahjongLayoutButtonTd {
  cursor: pointer;
}
@media (max-width: 500px) {
  .mahjongLayoutButtonStats {
    width: 100px;
    height: 74px;
  }
}
@media (max-width: 365px) {
  .mahjongLayoutButtonTd {
    width: 37vw;
    height: calc(37vw * 103 / 140);
  }
}
.mahjongLayoutSelector {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  max-height: 500px;
  min-height: 110px;
  max-width: 520px;
}
.mahjongNewMenuOptions {
  display: flex;
}
.mahjongNewMenuOptions input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
}
.mahjongNewMenuOptions label {
  background-color: #3667a6;
  margin: 2px;
  border: 3px solid transparent;
  border-radius: 8px;
}
.mahjongNewMenuOptions label:hover {
  cursor: pointer;
  background-color: #214177;
}
.mahjongNewMenuOptions input:checked + label {
  background-color: #d0f5be;
  border-color: var(--color-primary);
}
.mahjongLayoutSizeTitle {
  width: 100%;
}
.mahjongLayoutSizeLarger {
  margin-top: var(--gap-big);
}
.mahjongTimeRecord {
  height: auto;
  width: auto;
  padding: 1px 4px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-size: var(--font-size-medium);
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 10px;
  margin-bottom: 3px;
}
.mahjongModalBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}
.mahjongModalBottom > :not(:first-child) {
  margin-left: var(--gap-big);
}
.mahjongModalBottom > * {
  flex: 1;
}
.centeredWithGap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.centeredWithGap > * {
  margin: 0 5px;
}
.mahjongToggleHighScores {
  justify-content: flex-end;
  align-items: center;
  text-transform: uppercase;
  font-size: var(--font-size-medium);
  display: flex;
  flex-direction: row;
}
.mahjongHelpTile {
  background-image: url(../../assets/mahjong/tiles/classic-medium-v1.png);
  width: 80px;
  height: 115px;
  border: 2px solid #000;
  margin-right: var(--gap-small);
}
.mahjongHelpTilesContainer {
  display: flex;
  flex-flow: row wrap;
}
.mahjongHelpTile-regular {
  background-color: #f5f0eb;
}
.mahjongHelpTile-season {
  background-color: #e1f5e5;
}
.mahjongHelpTile-flower {
  background-color: #f4f5e1;
}
.highscoredisptoggle {
  cursor: pointer;
  line-height: var(--font-size-medium);
  margin-left: var(--gap-small);
}
.bgMahjongBoardLayoutThumb-small-0 {
  background-position: 0 0;
}
.bgMahjongBoardLayoutThumb-small-1 {
  background-position: 12.5%0;
}
.bgMahjongBoardLayoutThumb-small-2 {
  background-position: 25%0;
}
.bgMahjongBoardLayoutThumb-small-3 {
  background-position: 0 16.66667%;
}
.bgMahjongBoardLayoutThumb-small-4 {
  background-position: 12.5% 16.66667%;
}
.bgMahjongBoardLayoutThumb-small-5 {
  background-position: 25% 16.66667%;
}
.bgMahjongBoardLayoutThumb-small-6 {
  background-position: 0 33.33333%;
}
.bgMahjongBoardLayoutThumb-small-7 {
  background-position: 12.5% 33.33333%;
}
.bgMahjongBoardLayoutThumb-small-8 {
  background-position: 25% 33.33333%;
}
.bgMahjongBoardLayoutThumb-small-9 {
  background-position: 0 50%;
}
.bgMahjongBoardLayoutThumb-small-10 {
  background-position: 12.5% 50%;
}
.bgMahjongBoardLayoutThumb-small-11 {
  background-position: 25% 50%;
}
.bgMahjongBoardLayoutThumb-medium-0 {
  background-position: 37.5%0;
}
.bgMahjongBoardLayoutThumb-medium-1 {
  background-position: 50%0;
}
.bgMahjongBoardLayoutThumb-medium-2 {
  background-position: 62.5%0;
}
.bgMahjongBoardLayoutThumb-medium-3 {
  background-position: 37.5% 16.66667%;
}
.bgMahjongBoardLayoutThumb-medium-4 {
  background-position: 50% 16.66667%;
}
.bgMahjongBoardLayoutThumb-medium-5 {
  background-position: 62.5% 16.66667%;
}
.bgMahjongBoardLayoutThumb-medium-6 {
  background-position: 37.5% 33.33333%;
}
.bgMahjongBoardLayoutThumb-medium-7 {
  background-position: 50% 33.33333%;
}
.bgMahjongBoardLayoutThumb-medium-8 {
  background-position: 62.5% 33.33333%;
}
.bgMahjongBoardLayoutThumb-medium-9 {
  background-position: 37.5% 50%;
}
.bgMahjongBoardLayoutThumb-medium-10 {
  background-position: 50% 50%;
}
.bgMahjongBoardLayoutThumb-medium-11 {
  background-position: 62.5% 50%;
}
.bgMahjongBoardLayoutThumb-large-0 {
  background-position: 75%0;
}
.bgMahjongBoardLayoutThumb-large-1 {
  background-position: 87.5%0;
}
.bgMahjongBoardLayoutThumb-large-2 {
  background-position: 100%0;
}
.bgMahjongBoardLayoutThumb-large-3 {
  background-position: 75% 16.66667%;
}
.bgMahjongBoardLayoutThumb-large-4 {
  background-position: 87.5% 16.66667%;
}
.bgMahjongBoardLayoutThumb-large-5 {
  background-position: 100% 16.66667%;
}
.bgMahjongBoardLayoutThumb-large-6 {
  background-position: 75% 33.33333%;
}
.bgMahjongBoardLayoutThumb-large-7 {
  background-position: 87.5% 33.33333%;
}
.bgMahjongBoardLayoutThumb-large-8 {
  background-position: 100% 33.33333%;
}
.bgMahjongBoardLayoutThumb-large-9 {
  background-position: 75% 50%;
}
.bgMahjongBoardLayoutThumb-large-10 {
  background-position: 87.5% 50%;
}
.bgMahjongBoardLayoutThumb-large-11 {
  background-position: 100% 50%;
}
.bgMahjongBoardLayoutThumb-large-12 {
  background-position: 75% 66.66667%;
}
.bgMahjongBoardLayoutThumb-large-13 {
  background-position: 87.5% 66.66667%;
}
.bgMahjongBoardLayoutThumb-large-14 {
  background-position: 100% 66.66667%;
}
.bgMahjongBoardLayoutThumb-large-15 {
  background-position: 75% 83.33333%;
}
.bgMahjongBoardLayoutThumb-large-16 {
  background-position: 87.5% 83.33333%;
}
.bgMahjongBoardLayoutThumb-large-17 {
  background-position: 100% 83.33333%;
}
.bgMahjongBoardLayoutThumb-large-18 {
  background-position: 75% 100%;
}
.bgMahjongBoardTile-0 {
  background-position: 0 0;
}
.bgMahjongBoardTile-1 {
  background-position: 14.28571%0;
}
.bgMahjongBoardTile-2 {
  background-position: 28.57143%0;
}
.bgMahjongBoardTile-3 {
  background-position: 42.85714%0;
}
.bgMahjongBoardTile-4 {
  background-position: 57.14286%0;
}
.bgMahjongBoardTile-5 {
  background-position: 71.42857%0;
}
.bgMahjongBoardTile-6 {
  background-position: 85.71429%0;
}
.bgMahjongBoardTile-7 {
  background-position: 100%0;
}
.bgMahjongBoardTile-8 {
  background-position: 0 16.66667%;
}
.bgMahjongBoardTile-9 {
  background-position: 14.28571% 16.66667%;
}
.bgMahjongBoardTile-10 {
  background-position: 28.57143% 16.66667%;
}
.bgMahjongBoardTile-11 {
  background-position: 42.85714% 16.66667%;
}
.bgMahjongBoardTile-12 {
  background-position: 57.14286% 16.66667%;
}
.bgMahjongBoardTile-13 {
  background-position: 71.42857% 16.66667%;
}
.bgMahjongBoardTile-14 {
  background-position: 85.71429% 16.66667%;
}
.bgMahjongBoardTile-15 {
  background-position: 100% 16.66667%;
}
.bgMahjongBoardTile-16 {
  background-position: 0 33.33333%;
}
.bgMahjongBoardTile-17 {
  background-position: 14.28571% 33.33333%;
}
.bgMahjongBoardTile-18 {
  background-position: 28.57143% 33.33333%;
}
.bgMahjongBoardTile-19 {
  background-position: 42.85714% 33.33333%;
}
.bgMahjongBoardTile-20 {
  background-position: 57.14286% 33.33333%;
}
.bgMahjongBoardTile-21 {
  background-position: 71.42857% 33.33333%;
}
.bgMahjongBoardTile-22 {
  background-position: 85.71429% 33.33333%;
}
.bgMahjongBoardTile-23 {
  background-position: 100% 33.33333%;
}
.bgMahjongBoardTile-24 {
  background-position: 0 50%;
}
.bgMahjongBoardTile-25 {
  background-position: 14.28571% 50%;
}
.bgMahjongBoardTile-26 {
  background-position: 28.57143% 50%;
}
.bgMahjongBoardTile-27 {
  background-position: 42.85714% 50%;
}
.bgMahjongBoardTile-28 {
  background-position: 57.14286% 50%;
}
.bgMahjongBoardTile-29 {
  background-position: 71.42857% 50%;
}
.bgMahjongBoardTile-30 {
  background-position: 85.71429% 50%;
}
.bgMahjongBoardTile-31 {
  background-position: 100% 50%;
}
.bgMahjongBoardTile-32 {
  background-position: 0 66.66667%;
}
.bgMahjongBoardTile-33 {
  background-position: 14.28571% 66.66667%;
}
.bgMahjongBoardTile-34 {
  background-position: 28.57143% 66.66667%;
}
.bgMahjongBoardTile-35 {
  background-position: 42.85714% 66.66667%;
}
.bgMahjongBoardTile-36 {
  background-position: 57.14286% 66.66667%;
}
.bgMahjongBoardTile-37 {
  background-position: 71.42857% 66.66667%;
}
.bgMahjongBoardTile-38 {
  background-position: 85.71429% 66.66667%;
}
.bgMahjongBoardTile-39 {
  background-position: 100% 66.66667%;
}
.bgMahjongBoardTile-40 {
  background-position: 0 83.33333%;
}
.bgMahjongBoardTile-41 {
  background-position: 14.28571% 83.33333%;
}
.bgMahjongBoardTile-42 {
  background-position: 28.57143% 83.33333%;
}
.bgMahjongBoardTile-43 {
  background-position: 42.85714% 83.33333%;
}
.bgMahjongBoardTile-44 {
  background-position: 57.14286% 83.33333%;
}
.bgMahjongBoardTile-45 {
  background-position: 71.42857% 83.33333%;
}
.bgMahjongBoardTile-46 {
  background-position: 85.71429% 83.33333%;
}
.bgMahjongBoardTile-47 {
  background-position: 100% 83.33333%;
}
.bgMahjongBoardTile-48 {
  background-position: 0 100%;
}
.bgMahjongBoardTile-49 {
  background-position: 14.28571% 100%;
}
.bgMahjongBoardTile-50 {
  background-position: 28.57143% 100%;
}
.bgMahjongBoardTile-51 {
  background-position: 42.85714% 100%;
}
.mahjongPreviewThumb {
  position: relative;
  border-radius: 10px;
  background-color: #cecece;
  margin: 3px;
  width: 260px;
  height: 170px;
  padding: 10px;
  display: block;
  cursor: pointer;
}
.bgMahjongTileSet {
  width: 260px;
  height: 170px;
  background-image: url(../../assets/mahjong/tile-sets-preview-spriteseet-v374.png);
  background-size: 200% 300%;
}
.bgMahjongTileSet-classic {
  background-position: 0 0;
}
.bgMahjongTileSet-cards {
  background-position: 100%0;
}
.bgMahjongTileSet-animals {
  background-position: 0 50%;
}
.bgMahjongTileSet-fruit {
  background-position: 100% 50%;
}
.bgMahjongTileSet-cards31 {
  background-position: 0 100%;
}
.bgMahjongTileSet-cards33 {
  background-position: 100% 100%;
}
.bgMessageInnerModal {
  background-color: var(--color-bg);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius-medium);
  padding: var(--padding-big);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #9d3e09;
  font-weight: 700;
  text-align: center;
}
.minesGridContainer {
  overflow: auto;
  overscroll-behavior: contain;
  width: 100%;
  position: absolute;
}
.minesOpeningDroppingComp {
  position: absolute;
  background-image: url(../../assets/mines/mines-comps-on-transparent-v369.png);
  background-size: 300% 100%;
  opacity: 0.6;
  transition-timing-function: linear;
  transition-property: top;
}
.minesDroppingMine,
.minesSquare.minesContentNumber-0 {
  background-position: 0 0;
}
.minesDroppingFlag {
  background-position: 50%0;
}
.minesDroppingDig {
  background-position: 100%0;
}
.minesBoard {
  box-sizing: content-box;
}
.minesContentHidden {
  transform: scale(1);
}
.minesSquare {
  background-size: 500% 500%;
}
.minesSquare.minesContentNumber-1 {
  background-position: 25%0;
}
.minesSquare.minesContentNumber-2 {
  background-position: 50%0;
}
.minesSquare.minesContentNumber-3 {
  background-position: 75%0;
}
.minesSquare.minesContentNumber-4 {
  background-position: 100%0;
}
.minesSquare.minesContentNumber-5 {
  background-position: 0 25%;
}
.minesSquare.minesContentNumber-6 {
  background-position: 25% 25%;
}
.minesSquare.minesContentNumber-7 {
  background-position: 50% 25%;
}
.minesSquare.minesContentNumber-8 {
  background-position: 75% 25%;
}
.minesSquare.minesContentFlag-green {
  background-position: 100% 25%;
}
.minesSquare.minesContentFlag {
  background-position: 0 50%;
}
.minesSquare.minesHintDig {
  background-position: 100% 50%;
}
.minesSquare.minesHintWrongFlag {
  background-position: 75% 50%;
}
.minesSquare.minesContentHidden,
.minesSquare.minesContentSuperPressed {
  background-position: 25% 50%;
}
.minesSquare.minesContentPressed {
  background-position: 50% 50%;
}
.minesSquare.minesContentMine {
  background-position: 0 75%;
}
.minesSquare.minesContentExploded {
  background-position: 25% 75%;
}
.minesSquare.minesContentMistake {
  background-position: 50% 75%;
}
.minesSquare.minesContentMine-green {
  background-position: 75% 75%;
}
.minesSquare.minesContentHidden-green {
  background-position: 100% 75%;
}
.minesSquare.minesContentPressed-green {
  background-position: 0 100%;
}
.minesTriangle {
  background-size: 600% 900%;
}
.minesTriangle-0.minesContentNumber-0 {
  background-position: 40% 12.5%;
}
.minesTriangle-1.minesContentNumber-0 {
  background-position: 60% 12.5%;
}
.minesTriangle-0.minesContentNumber-1 {
  background-position: 80% 12.5%;
}
.minesTriangle-1.minesContentNumber-1 {
  background-position: 100% 12.5%;
}
.minesTriangle-0.minesContentNumber-2 {
  background-position: 0 25%;
}
.minesTriangle-1.minesContentNumber-2 {
  background-position: 20% 25%;
}
.minesTriangle-0.minesContentNumber-3 {
  background-position: 40% 25%;
}
.minesTriangle-1.minesContentNumber-3 {
  background-position: 60% 25%;
}
.minesTriangle-0.minesContentNumber-4 {
  background-position: 80% 25%;
}
.minesTriangle-1.minesContentNumber-4 {
  background-position: 100% 25%;
}
.minesTriangle-0.minesContentNumber-5 {
  background-position: 0 37.5%;
}
.minesTriangle-1.minesContentNumber-5 {
  background-position: 20% 37.5%;
}
.minesTriangle-0.minesContentNumber-6 {
  background-position: 40% 37.5%;
}
.minesTriangle-1.minesContentNumber-6 {
  background-position: 60% 37.5%;
}
.minesTriangle-0.minesContentNumber-7 {
  background-position: 80% 37.5%;
}
.minesTriangle-1.minesContentNumber-7 {
  background-position: 100% 37.5%;
}
.minesTriangle-0.minesContentNumber-8 {
  background-position: 0 50%;
}
.minesTriangle-1.minesContentNumber-8 {
  background-position: 20% 50%;
}
.minesTriangle-0.minesContentNumber-9 {
  background-position: 40% 50%;
}
.minesTriangle-1.minesContentNumber-9 {
  background-position: 60% 50%;
}
.minesTriangle-0.minesContentNumber-10 {
  background-position: 80% 50%;
}
.minesTriangle-1.minesContentNumber-10 {
  background-position: 100% 50%;
}
.minesTriangle-0.minesContentNumber-11 {
  background-position: 0 62.5%;
}
.minesTriangle-1.minesContentNumber-11 {
  background-position: 20% 62.5%;
}
.minesTriangle-0.minesContentNumber-12 {
  background-position: 40% 62.5%;
}
.minesTriangle-1.minesContentNumber-12 {
  background-position: 60% 62.5%;
}
.minesTriangle-0.minesContentFlag-green {
  background-position: 40% 87.5%;
}
.minesTriangle-1.minesContentFlag-green {
  background-position: 60% 87.5%;
}
.minesTriangle-0.minesContentFlag {
  background-position: 0 100%;
}
.minesTriangle-1.minesContentFlag {
  background-position: 20% 100%;
}
.minesTriangle-0.minesHintDig {
  background-position: 80% 87.5%;
}
.minesTriangle-1.minesHintDig {
  background-position: 100% 87.5%;
}
.minesTriangle-0.minesHintWrongFlag {
  background-position: 0 87.5%;
}
.minesTriangle-1.minesHintWrongFlag {
  background-position: 20% 87.5%;
}
.minesTriangle-0.minesContentHidden,
.minesTriangle-0.minesContentSuperPressed {
  background-position: 0 0;
}
.minesTriangle-1.minesContentHidden,
.minesTriangle-1.minesContentSuperPressed {
  background-position: 20%0;
}
.minesTriangle-0.minesContentPressed {
  background-position: 40%0;
}
.minesTriangle-1.minesContentPressed {
  background-position: 60%0;
}
.minesTriangle-0.minesContentMine {
  background-position: 80% 62.5%;
}
.minesTriangle-1.minesContentMine {
  background-position: 100% 62.5%;
}
.minesTriangle-0.minesContentExploded {
  background-position: 40% 75%;
}
.minesTriangle-1.minesContentExploded {
  background-position: 60% 75%;
}
.minesTriangle-0.minesContentMistake {
  background-position: 0 75%;
}
.minesTriangle-1.minesContentMistake {
  background-position: 20% 75%;
}
.minesTriangle-0.minesContentMine-green {
  background-position: 80% 75%;
}
.minesTriangle-1.minesContentMine-green {
  background-position: 100% 75%;
}
.minesTriangle-0.minesContentHidden-green {
  background-position: 80%0;
}
.minesTriangle-1.minesContentHidden-green {
  background-position: 100%0;
}
.minesTriangle-0.minesContentPressed-green {
  background-position: 0 12.5%;
}
.minesTriangle-1.minesContentPressed-green {
  background-position: 20% 12.5%;
}
.minesGameEnded {
  position: absolute;
  height: 100%;
  width: 100%;
  transform-origin: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.minesContentMine-green.minesGameEnded {
  transform: rotateY(180deg);
}
.minesContentSuperPressed {
  transform: scale(0.9);
}
.minesToggleButton,
.minesToggleContainer,
.minesToggleImage {
  background-repeat: no-repeat;
}
.additionalControls {
  bottom: 7px;
  position: relative;
  margin: auto;
  height: 50px;
  width: fit-content;
}
.minesToggleButton,
.minesToggleContainer,
.minesToggleImage,
.triangleIcon {
  background-image: url(../../assets/mines/mobileextras.png);
}
.minesToggleContainer {
  position: relative;
  box-sizing: border-box;
  height: 50px;
  width: 143px;
  margin: auto;
}
.minesToggleButton {
  position: absolute;
  background-position: -143px 0;
  height: 42px;
  width: 70px;
  top: 4px;
}
.minesToggleButtonLeft {
  left: 5px;
}
.minesToggleButtonRight {
  right: 5px;
}
.minesToggleImage {
  position: absolute;
  height: 40px;
  width: 40px;
  top: 5px;
}
.minesToggleBombDisabled,
.minesToggleBombEnabled {
  left: 20px;
}
.minesToggleBombEnabled {
  background-position: -120px -50px;
}
.minesToggleBombDisabled {
  background-position: -80px -50px;
}
.minesToggleFlagDisabled,
.minesToggleFlagEnabled {
  right: 20px;
}
.minesToggleFlagEnabled {
  background-position: -40px -50px;
}
.minesToggleFlagDisabled {
  background-position: 0-50px;
}
.scrollingHint {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.triangleIcon {
  display: inline-block;
  height: 15px;
  width: 15px;
}
.triangleIcon-top {
  background-position: -175px -65px;
}
.triangleIcon-bottom {
  background-position: -175px -50px;
}
.triangleIcon-left {
  background-position: -160px -50px;
}
.triangleIcon-right {
  background-position: -160px -65px;
}
.allowOverflow {
  overflow: visible;
}
.noguessingtoggle {
  font-size: var(--font-size-medium);
  line-height: 24px;
}
.bgInModalSunken.mines {
  font-size: var(--font-size-medium);
  margin-top: 15px;
}
.battleAtSeaTopPanel,
.gameWrapper {
  width: 100%;
  display: flex;
  align-items: center;
}
.gameWrapper {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 100%;
}
.battleAtSeaTopPanel {
  flex-direction: row;
  justify-content: center;
  transition: transform 3s linear;
}
.battleAtSeaTopPanel > * {
  text-align: center;
  background-color: #0b4881;
  color: #fff;
}
.titleDivFormation,
.titleDivHuman,
.titleDivPC {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.battleAtSeaTitle-single {
  justify-content: flex-start;
}
.battleAtSeaTitle-multiple {
  justify-content: center;
}
.battleAtSeaSubTitleWrapper {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.titleDivFormation {
  background-color: #0b4881;
}
.titleDivHuman {
  background-color: #01be8d;
}
.titleDivPC {
  background-color: #c71023;
}
.battleAtSeaTitle-single > .battleAtSeaSubTitleWrapper {
  display: none;
}
.battleAtSeaTitle-multiple > .battleAtSeaSubTitleWrapper {
  display: flex;
}
.silhouetteContainer {
  align-items: flex-end;
  position: relative;
  flex-wrap: nowrap;
  border: 2px solid #da8015;
  background-color: #563d20;
  padding: 3px 10px;
}
.silhouetteContainer-0 {
  border-radius: 0 0 5px 5px;
}
.silhouetteContainer-1 {
  border-radius: 5px 0 5px 5px;
}
.battleAtSeaBottomPanel,
.silhouetteContainer {
  display: flex;
  justify-content: center;
  flex-direction: row;
  text-align: center;
}
.silhouette {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}
.battleAtSeaWhiteFlag {
  margin: 0 4px;
  background-position: 50% 50%;
}
.battleAtSeaWhiteFlag:hover {
  cursor: pointer;
  opacity: 0.9;
}
.battleAtSeaWhiteFlag:active {
  animation-name: btnAnm;
  animation-duration: 0.2s;
}
.battleAtSeaBottomPanel {
  flex-wrap: nowrap;
  align-items: flex-start;
  height: 70px;
  position: relative;
  transition: left 0.7s ease;
}
.battleAtSeaBottomPanel > .silhouetteContainer {
  margin: 0 8px;
}
.battleAtSeaBottomPanel > * {
  transition: opacity 0.7s ease;
}
.bgInModalSunken.battleAtSea {
  padding: 6px 0 10px;
}
@media (min-width: 835px) {
  .battleAtSeaTopPanel {
    height: auto;
  }
  .battleAtSeaTitle-single {
    height: 60px;
    border-radius: 30px;
  }
  .battleAtSeaTitle-multiple:not(.titleDivFormation) {
    height: 60px;
    border-radius: 30px;
  }
  .battleAtSeaTitle-multiple.titleDivFormation {
    height: 70px;
    border-radius: 35px;
  }
  .battleAtSeaTitle-single > .battleAtSeaTitlePrimary {
    line-height: 58px;
    font-size: 34px;
  }
  .battleAtSeaTitle-multiple > .battleAtSeaTitlePrimary {
    line-height: 30px;
    font-size: 30px;
  }
  .battleAtSeaSubTitleWrapper
    > .battleAtSeaTitleSecondary:first-child:last-child {
    line-height: 20px;
    font-size: 20px;
    margin: 4px 8px 0;
  }
  .titleDivFormation > .battleAtSeaTitleSecondary:not(:first-child:last-child) {
    line-height: 10px;
    font-size: 20px;
    margin: 10px 8px 0;
  }
}
@media (max-width: 835px) {
  .battleAtSeaTopPanel {
    height: auto;
  }
  .battleAtSeaTitle-single {
    height: 60px;
    border-radius: 30px;
  }
  .battleAtSeaTitle-multiple:not(.titleDivFormation) {
    height: 60px;
    border-radius: 30px;
  }
  .battleAtSeaTitle-multiple.titleDivFormation {
    height: 80px;
    border-radius: 40px;
  }
  .battleAtSeaTitle-single > .battleAtSeaTitlePrimary {
    line-height: 58px;
    font-size: 30px;
  }
  .battleAtSeaTitle-multiple > .battleAtSeaTitlePrimary {
    line-height: 25px;
    font-size: 25px;
  }
  .battleAtSeaSubTitleWrapper > .battleAtSeaTitleSecondary {
    line-height: 20px;
    font-size: 20px;
    margin: 4px 8px 0;
  }
  .titleDivFormation
    > .battleAtSeaSubTitleWrapper
    > .battleAtSeaTitleSecondary {
    line-height: 18px;
    font-size: 18px;
    margin: 4px 8px 0;
  }
}
.battleAtSeaMainSection {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.battleAtSeaGridContainer {
  position: relative;
  box-sizing: border-box;
  transform-origin: top center;
  border-style: solid;
  border-color: #000 #2c7bc3 #034380 #000;
}
.battleAtSeaFadingSinkingBG,
.battleAtSeaImage,
.battleAtSeaShipWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}
.battleAtSeaShipWrapper,
.battleAtSeaSinkingWrapper {
  transform-origin: center;
  transition: transform 2s linear, opacity 2s linear, rotate 2s linear;
}
.occupied {
  background-color: #000;
}
.battleAtSeaSelectedShip > * > .battleAtSeaImage-status-0 {
  background-color: rgba(0, 255, 118, 0.5);
}
.battleAtSeaImage-status-2 {
  background-color: rgba(255, 0, 0, 0.6);
}
.battleAtSeaBorder {
  border-style: solid;
  box-sizing: border-box;
  border-color: #589ddc;
}
.battleAtSeaCell {
  background-color: #1460a8;
  cursor: pointer;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.battleAtSeaImage,
.battleAtSeaWhiteFlag,
.silhouetteArrow {
  background-image: url(../../assets/battleatsea/battleatsea_icons_spritesheet_v347.png);
  background-size: 500% 900%;
}
.silhouetteArrow {
  position: relative;
  margin: 0 3px;
}
.silhouetteArrow-0 {
  background-position: 75% 75%;
}
.silhouetteArrow-1 {
  background-position: 50% 75%;
}
.shipSilhouettePart {
  position: absolute;
}
.shipSilhouettePart:not(.shipSilhouettePart-hit):not(.shipSilhouettePart-menu) {
  border: 1px solid #fff;
}
.silhouette-0
  > *
  > .shipSilhouettePart:not(.shipSilhouettePart-hit):not(
    .shipSilhouettePart-menu
  ) {
  background: linear-gradient(#a9c1d9, #e4ebf2);
}
.silhouette-1
  > *
  > .shipSilhouettePart:not(.shipSilhouettePart-hit):not(
    .shipSilhouettePart-menu
  ) {
  background: linear-gradient(#c9c1b8, #e5e1dc);
}
.shipSilhouettePart-hit {
  background-color: #ff021c;
  border: 1px solid #ff021c;
}
.shipSilhouettePart-menu {
  background: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.8);
}
.shipSilhouettePart-hit > .bgCross::after,
.shipSilhouettePart-hit > .bgCross::before {
  background-color: #4c1e4e;
}
.shipSilhouettePart-hit > .bgCross::after {
  height: 15%;
  margin-top: -7.5%;
}
.shipSilhouettePart-hit > .bgCross::before {
  width: 15%;
  margin-left: -7.5%;
}
.shipSilhouettePart-hit > .bgCross {
  width: 84%;
  height: 84%;
  margin: 8%;
}
.battleAtSeaImage-hit {
  background-position: 50%0;
  transition: opacity 1s linear;
}
.battleAtSeaImage-miss {
  background-position: 25% 37.5%;
}
.battleAtSeaImage-target {
  background-position: 50% 62.5%;
}
.battleAtSeaImage-angle-1 {
  transform: rotate(90deg);
}
.battleAtSeaImage-angle-2 {
  transform: rotate(180deg);
}
.battleAtSeaImage-angle-3 {
  transform: rotate(270deg);
}
.battleAtSeaContent-SINGLE-0 {
  background-position: 0 0;
}
.battleAtSeaContent-LINE2-0 {
  background-position: 25% 50%;
}
.battleAtSeaContent-LINE2-1 {
  background-position: 25% 62.5%;
}
.battleAtSeaContent-LINE3-0 {
  background-position: 0 75%;
}
.battleAtSeaContent-LINE3-1 {
  background-position: 0 87.5%;
}
.battleAtSeaContent-LINE3-2 {
  background-position: 0 100%;
}
.battleAtSeaContent-LINE4-0 {
  background-position: 0 25%;
}
.battleAtSeaContent-LINE4-1 {
  background-position: 0 37.5%;
}
.battleAtSeaContent-LINE4-2 {
  background-position: 0 50%;
}
.battleAtSeaContent-LINE4-3 {
  background-position: 0 62.5%;
}
.battleAtSeaContent-LINE5-0 {
  background-position: 75% 12.5%;
}
.battleAtSeaContent-LINE5-1 {
  background-position: 75% 25%;
}
.battleAtSeaContent-LINE5-2 {
  background-position: 75% 37.5%;
}
.battleAtSeaContent-LINE5-3 {
  background-position: 75% 50%;
}
.battleAtSeaContent-LINE5-4 {
  background-position: 75% 62.5%;
}
.battleAtSeaContent-PLUS4-0 {
  background-position: 25% 75%;
}
.battleAtSeaContent-PLUS4-1 {
  background-position: 25% 87.5%;
}
.battleAtSeaContent-PLUS4-2 {
  background-position: 25% 100%;
}
.battleAtSeaContent-PLUS4-3 {
  background-position: 50% 87.5%;
}
.battleAtSeaContent-CARRIER-0 {
  background-position: 25%0;
}
.battleAtSeaContent-CARRIER-1 {
  background-position: 25% 12.5%;
}
.battleAtSeaContent-CARRIER-2 {
  background-position: 25% 25%;
}
.battleAtSeaContent-CARRIER-3 {
  background-position: 50% 12.5%;
}
.battleAtSeaContent-CARRIER-4 {
  background-position: 50% 25%;
}
.battleAtSeaContent-CARRIER-5 {
  background-position: 50% 37.5%;
}
.battleAtSeaFadingSinkingBG,
.battleAtSeaImage-status-2,
.battleAtSeaImage-status-3:not(.battleAtSeaGameOverShip) {
  background-color: red;
  opacity: 0.4;
}
.battleAtSeaGameOverShip {
  opacity: 0.4;
}
.battleAtSeaCellLight-soft {
  background-color: #1872c7;
}
.battleAtSeaCellLight-hard {
  background-color: #1e92ff;
}
.battleAtSeaFormationThumb {
  height: 75px;
  margin: 5px 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.battleAtSeaFormationThumb > * {
  margin: 5px;
}
span.battleAtSeaIndex {
  text-align: center;
  padding-bottom: 5%;
  color: #fff;
}
.battleAtSea00Cell,
.battleAtSeaIndex-0,
.battleAtSeaIndex-1 {
  border-style: solid;
  box-sizing: border-box;
  border-color: #1c6db9;
}
.battleAtSeaIndex-0,
.battleAtSeaIndex-1 {
  vertical-align: middle;
  background-color: #589ddc;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}
.battleAtSea00Cell {
  background-color: #7bb9f2;
}
.battleAtSeaIndex-0 {
  flex-direction: row;
}
.battleAtSeaIndex-1 {
  flex-direction: column;
}
.splashInner,
.splashOuter {
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(rgba(216, 230, 242, 0.2), #d8e6f2);
}
.splashOuter {
  width: 100%;
  height: 100%;
  animation: splashAnimation 1.5s ease-out forwards;
}
.splashInner {
  width: 65%;
  height: 65%;
  animation: splashAnimation 0.45s ease-out forwards;
}
.battleAtSeaSilhouetteHeader {
  position: absolute;
  width: auto;
  height: 23px;
  border-radius: 5px 5px 0 0;
  text-transform: uppercase;
  font-size: 16px;
  padding: 1px 6px 0;
  top: -26px;
  background-color: #da8015;
  color: #fff;
  white-space: nowrap;
}
.battleAtSeaSilhouetteHeader-0 {
  left: -2px;
}
.battleAtSeaSilhouetteHeader-1 {
  right: -2px;
}
.battleAtSeaSilhouetteHeader-whiteflag {
  display: flex;
  position: absolute;
  width: auto;
  background-color: #da8015;
  border-radius: 5px 5px 0 0;
  padding-top: 2px;
  top: -26px;
  right: -2px;
}
.silhouetteContainer-inactive,
.silhouetteContainer-inactive > .battleAtSeaSilhouetteHeader,
.silhouetteContainer-inactive > .battleAtSeaSilhouetteHeader-whiteflag {
  background: #555;
  border-color: #555;
  color: #fff;
}
.backgroundSailingShip {
  position: absolute;
  background-image: url(../../assets/battleatsea/battleatsea_icons_spritesheet_v347.png);
  transition-property: left;
  transition-timing-function: linear;
  opacity: 0.6;
  transform-origin: top left;
}
.backgroundSailingShip-0 {
  background-size: 500% 900%;
  background-position: 0 0;
}
.backgroundSailingShip-1 {
  background-size: 500% 450%;
  background-position: 25% 57.143%;
}
.backgroundSailingShip-2 {
  background-size: 500% 300%;
  background-position: 0 100%;
}
.backgroundSailingShip-3 {
  background-size: 500% 225%;
  background-position: 0 40%;
}
.backgroundSailingShip-4 {
  background-size: 500% 180%;
  background-position: 75% 25%;
}
@media (max-height: 700px) {
  .battleAtSeaMenuContent {
    margin-bottom: var(--gap-medium) !important;
  }
}
.dominoBoneyard,
.dominoChain,
.dominoDot,
.dominoHint,
.dominoSep,
.dominoTile:not(.helpDominoTile) {
  position: absolute;
}
.dominoTile {
  transform-origin: center;
  border-color: #000;
  border-style: solid;
  box-sizing: border-box;
  background-color: ivory;
}
.dominoTile:not(.helpDominoTile) {
  top: 0;
  left: 0;
  border-radius: 6px;
  height: 40px;
  width: 80px;
  cursor: pointer;
  transform: rotate(90deg) translate(25%, 50%);
}
.dominoTileSelected {
  border-color: #ff0;
}
.dominoRemainingWrapper {
  position: relative;
  width: 100%;
  height: 84px;
}
.dominoRemainingPips {
  display: inline-block;
  position: relative;
  width: calc(50% - 8px);
  margin: 2px;
  height: auto;
}
.helpDominoTile {
  position: relative;
  border-radius: 9px;
  height: 60px;
  width: 120px;
}
.helpDominoTilesWrapper {
  height: 140px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.dominoSep {
  width: 1%;
  min-width: 1px;
  height: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
}
.dominoDot {
  background-color: #000;
  height: calc(20% * 320 / 288);
  width: calc(10% * 640 / 608);
  border-radius: 50%;
}
.dominoDot-center-0 {
  left: 19%;
  top: 39%;
}
.dominoDot-center-1 {
  right: 19%;
  top: 39%;
}
.dominoDot-top-left-0 {
  left: 7%;
  top: 10%;
}
.dominoDot-top-left-1 {
  right: 31%;
  top: 10%;
}
.dominoDot-bottom-right-0 {
  left: 31%;
  bottom: 10%;
}
.dominoDot-bottom-right-1 {
  right: 7%;
  bottom: 10%;
}
.dominoDot-top-right-0 {
  left: 31%;
  top: 10%;
}
.dominoDot-top-right-1 {
  right: 7%;
  top: 10%;
}
.dominoDot-bottom-left-0 {
  left: 7%;
  bottom: 10%;
}
.dominoDot-bottom-left-1 {
  right: 31%;
  bottom: 10%;
}
.dominoDot-center-left-0 {
  left: 7%;
  top: 39%;
}
.dominoDot-center-left-1 {
  right: 31%;
  top: 39%;
}
.dominoDot-center-right-0 {
  left: 31%;
  top: 39%;
}
.dominoDot-center-right-1 {
  right: 7%;
  top: 39%;
}
.dominoTileFlipped {
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.dominoTileFlipped > * {
  display: none;
}
.dominoChain {
  transition: height 0.5s ease-out, width 0.5s ease-out, top 0.5s ease-out,
    left 0.5s ease-out;
}
.dominoHand {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 2;
  transition: width 0.5s ease-out;
}
.dominoBottomPanel {
  position: relative;
  height: 16%;
  z-index: 2;
}
.dominoHandContainer-0 > .dominoTile {
  cursor: pointer;
}
.dominoHandContainer-1 {
  height: 8%;
}
.dominoBoardContainer {
  height: 60%;
  width: 100%;
}
.dominoHandArrow {
  position: absolute;
  background-image: url(../../assets/dominoes/arrows-v347.png);
  background-size: 200% 100%;
}
.dominoHandArrow-left {
  left: 0;
  background-position: 0 0;
}
.dominoHandArrow-right {
  right: 0;
  background-position: 100%0;
}
.dominoBoardContainer,
.dominoHandContainer-0,
.dominoHandContainer-1 {
  position: relative;
}
.dominoBoardArea {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.dominoBoneyard {
  height: 16%;
  width: auto;
  top: 50%;
  transform: translateY(-50%);
  left: -170px;
  z-index: 1;
}
.boneyardSelectorWrapper {
  z-index: 1;
  height: auto;
  width: auto;
}
.boneyardSelector {
  position: relative;
}
.boneyardSelectorTitle {
  text-align: center;
}
.dominoHint {
  background-color: #ffb000;
  box-sizing: border-box;
}
.dominoHintNone {
  display: none;
}
.dominoHintPrimary {
  opacity: 1;
  border: 2px solid #ff0;
}
.dominoHintSecondary {
  opacity: 0.3;
}
.dominoHintClickArea {
  height: 200%;
  width: 150%;
  cursor: pointer;
}
.checkersBoardSetRadio,
.checkersCaptureDirRadio,
.checkersSkipCapturePenaltyRadio {
  height: 50px;
  max-width: 100px;
  line-height: var(--font-size-medium);
}
.checkersBoardInner,
.checkersBoardOuter {
  position: absolute;
}
.checkersBoardStyle-0.checkersBoard-8-12,
.checkersBoardStyle-0.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-0-8-v368.png);
}
.checkersBoardStyle-0.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-0-10-v368.png);
}
.checkersBoardStyle-1.checkersBoard-8-12,
.checkersBoardStyle-1.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-1-8-v368.png);
}
.checkersBoardStyle-1.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-1-10-v368.png);
}
.checkersBoardStyle-2.checkersBoard-8-12,
.checkersBoardStyle-2.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-2-8-v368.png);
}
.checkersBoardStyle-2.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-2-10-v368.png);
}
.checkersBoardStyle-3.checkersBoard-8-12,
.checkersBoardStyle-3.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-3-8-v368.png);
}
.checkersBoardStyle-3.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-3-10-v368.png);
}
.checkersBoardStyle-4.checkersBoard-8-12,
.checkersBoardStyle-4.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-4-8-v368.png);
}
.checkersBoardStyle-4.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-4-10-v368.png);
}
.checkersBoardStyle-5.checkersBoard-8-12,
.checkersBoardStyle-5.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-5-8-v368.png);
}
.checkersBoardStyle-5.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-5-10-v368.png);
}
.checkersBoardStyle-6.checkersBoard-8-12,
.checkersBoardStyle-6.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-6-8-v368.png);
}
.checkersBoardStyle-6.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-6-10-v368.png);
}
.checkersBoardStyle-7.checkersBoard-8-8 {
  background-image: url(../../assets/checkers/checkersboard-7-8-8-v368.png);
}
.checkersBoardStyle-7.checkersBoard-8-12 {
  background-image: url(../../assets/checkers/checkersboard-7-8-12-v368.png);
}
.checkersBoardStyle-7.checkersBoard-10-20 {
  background-image: url(../../assets/checkers/checkersboard-7-10-v368.png);
}
.checkersBoardOuter {
  transform-origin: top;
  background-size: 100% 100%;
}
.checkersBoardInner {
  background-size: 112.5% 112.5%;
  background-position: 50% 50%;
}
.checkersCellMarked {
  cursor: pointer;
}
.checkersCellDot {
  height: 25%;
  width: 25%;
  border-radius: 50%;
}
:not(.checkersCellMarked) > .checkersCellDot {
  display: none;
}
.cancelBurnButton,
.checkersBottomMessage {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--font-size-big);
}
.checkersBottomMessage {
  padding: var(--padding-medium);
  background-color: #fff;
  border: 3px solid #000;
  border-radius: 8px;
}
.cancelBurnButton {
  height: 60px;
  background-color: var(--color-bg);
  color: var(--color-primary);
  line-height: 1.1;
  padding: 1rem;
  border-radius: var(--border-radius-big);
}
.cancelBurnButton:hover {
  background-color: var(--color-primary-hover);
}
.checkersPawn {
  position: absolute;
  background-image: url(../../assets/checkers/checkerspawns-v368.png);
  height: 100%;
  width: 100%;
  background-size: 500% 900%;
}
.checkersPawnWrapper:hover {
  cursor: grab;
}
.checkersPawnWrapper:active {
  cursor: grabbing;
}
.checkersPawn-0.checkersPawnStyle-2:not(.checkersKing) {
  background-position: 0 0;
}
.checkersPawn-0.checkersPawnStyle-2.checkersKing {
  background-position: 25%0;
}
.checkersPawn-1.checkersPawnStyle-2:not(.checkersKing) {
  background-position: 50%0;
}
.checkersPawn-1.checkersPawnStyle-2.checkersKing {
  background-position: 75%0;
}
.checkersPawn-0.checkersPawnStyle-1:not(.checkersKing) {
  background-position: 0 0;
}
.checkersPawn-0.checkersPawnStyle-1.checkersKing {
  background-position: 100%0;
}
.checkersPawn-1.checkersPawnStyle-1:not(.checkersKing) {
  background-position: 0 12.5%;
}
.checkersPawn-1.checkersPawnStyle-1.checkersKing {
  background-position: 25% 12.5%;
}
.checkersPawn-0.checkersPawnStyle-0:not(.checkersKing) {
  background-position: 25% 62.5%;
}
.checkersPawn-0.checkersPawnStyle-0.checkersKing {
  background-position: 50% 12.5%;
}
.checkersPawn-1.checkersPawnStyle-0:not(.checkersKing) {
  background-position: 75% 12.5%;
}
.checkersPawn-1.checkersPawnStyle-0.checkersKing {
  background-position: 100% 12.5%;
}
.checkersPawn-0.checkersPawnStyle-3:not(.checkersKing) {
  background-position: 0 25%;
}
.checkersPawn-0.checkersPawnStyle-3.checkersKing {
  background-position: 25% 25%;
}
.checkersPawn-1.checkersPawnStyle-3:not(.checkersKing) {
  background-position: 50% 25%;
}
.checkersPawn-1.checkersPawnStyle-3.checkersKing {
  background-position: 75% 25%;
}
.checkersPawn-0.checkersPawnStyle-4:not(.checkersKing) {
  background-position: 100% 25%;
}
.checkersPawn-0.checkersPawnStyle-4.checkersKing {
  background-position: 0 37.5%;
}
.checkersPawn-1.checkersPawnStyle-4:not(.checkersKing) {
  background-position: 25% 37.5%;
}
.checkersPawn-1.checkersPawnStyle-4.checkersKing {
  background-position: 50% 37.5%;
}
.checkersPawn-0.checkersPawnStyle-5:not(.checkersKing) {
  background-position: 75% 37.5%;
}
.checkersPawn-0.checkersPawnStyle-5.checkersKing {
  background-position: 100% 37.5%;
}
.checkersPawn-1.checkersPawnStyle-5:not(.checkersKing) {
  background-position: 0 50%;
}
.checkersPawn-1.checkersPawnStyle-5.checkersKing {
  background-position: 25% 50%;
}
.checkersPawn-0.checkersPawnStyle-6:not(.checkersKing) {
  background-position: 50% 50%;
}
.checkersPawn-0.checkersPawnStyle-6.checkersKing {
  background-position: 75% 50%;
}
.checkersPawn-1.checkersPawnStyle-6:not(.checkersKing) {
  background-position: 100% 50%;
}
.checkersPawn-1.checkersPawnStyle-6.checkersKing {
  background-position: 0 62.5%;
}
.checkersPawn-0.checkersPawnStyle-7:not(.checkersKing) {
  background-position: 50% 62.5%;
}
.checkersPawn-0.checkersPawnStyle-7.checkersKing {
  background-position: 75% 62.5%;
}
.checkersPawn-1.checkersPawnStyle-7:not(.checkersKing) {
  background-position: 100% 62.5%;
}
.checkersPawn-1.checkersPawnStyle-7.checkersKing {
  background-position: 0 75%;
}
.checkersPawn-0.checkersPawnStyle-8:not(.checkersKing) {
  background-position: 25% 75%;
}
.checkersPawn-0.checkersPawnStyle-8.checkersKing {
  background-position: 50% 75%;
}
.checkersPawn-1.checkersPawnStyle-8:not(.checkersKing) {
  background-position: 75% 75%;
}
.checkersPawn-1.checkersPawnStyle-8.checkersKing {
  background-position: 100% 75%;
}
.checkersPawn-0.checkersPawnStyle-9:not(.checkersKing) {
  background-position: 0 87.5%;
}
.checkersPawn-0.checkersPawnStyle-9.checkersKing {
  background-position: 25% 87.5%;
}
.checkersPawn-1.checkersPawnStyle-9:not(.checkersKing) {
  background-position: 50% 87.5%;
}
.checkersPawn-1.checkersPawnStyle-9.checkersKing {
  background-position: 75% 87.5%;
}
.checkersPawnWrapper {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.checkersPawnOverlay {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 3;
}
.bgCheckersPawnSet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}
.checkersBoardStyleThumbOuter,
.checkersPawnSetThumb {
  position: relative;
  display: block;
  border-radius: 10px;
  background-color: #cecece;
  margin: 3px;
  cursor: pointer;
  width: 140px;
  height: 140px;
  overflow: hidden;
}
.checkersPawnSetThumb {
  padding: 10px;
}
.checkersBoardStyleThumb {
  background-image: url(../../assets/checkers/checkersboards-preview-v368.png);
  background-size: 300% 300%;
  height: 100%;
  width: 100%;
}
.checkersBoardStyleThumb-0 {
  background-position: 0 0;
}
.checkersBoardStyleThumb-1 {
  background-position: 50%0;
}
.checkersBoardStyleThumb-2 {
  background-position: 100%0;
}
.checkersBoardStyleThumb-3 {
  background-position: 0 50%;
}
.checkersBoardStyleThumb-4 {
  background-position: 50% 50%;
}
.checkersBoardStyleThumb-5 {
  background-position: 100% 50%;
}
.checkersBoardStyleThumb-6 {
  background-position: 0 100%;
}
.checkersBoardStyleThumb-7 {
  background-position: 50% 100%;
}
.detailedRulesModal {
  overflow-x: hidden;
  overflow-y: auto;
}
.detailedRulesModal > :first-child {
  font-weight: 700;
}
.detailedRulesImg {
  position: absolute;
  right: -22px;
}
.detailedRulesImg svg {
  fill: var(--color-primary);
  height: 15px;
  width: 15px;
}
.detailedRulesLabel {
  color: var(--color-primary);
  margin-bottom: 2px;
}
.detailedRulesImg:hover {
  opacity: 0.8;
  cursor: pointer;
}
.checkersHandshakeEnd {
  position: absolute;
  z-index: 1;
  top: 5%;
  left: 5%;
  height: 90%;
  width: 90%;
}
.bgBounceIn {
  animation-duration: 1s;
  animation-name: bounceIn;
  animation-fill-mode: forwards;
}
.bgInModalSunken.checkers {
  align-items: center;
  padding: var(--padding-big);
  background-color: #ede3d1;
  margin-bottom: var(--gap-big) !important;
}
.checkers#bgStartNewGameButton {
  width: 60%;
  align-self: center;
}
.skipCaptureExplanation {
  margin-left: 2ch;
  margin-bottom: var(--gap-big);
}
.checkersThinking {
  position: absolute;
  z-index: 2;
  border-radius: 15px;
  background-color: var(--color-bg);
  margin-top: 14px;
  top: var(--game-top-bar-height);
  padding: 0 10px;
}
.checkersThinkingTriangle {
  position: absolute;
  border-style: solid;
  border-width: 16px 8px 14px;
  border-color: transparent transparent var(--color-bg) transparent;
  top: calc(-50% - 5px);
  left: 50%;
  transform: translateX(-50%);
}
.checkersThinkingMessage {
  font-size: var(--font-size-big);
  color: var(--color-primary);
  margin: 6px 3px 6px 6px;
}
.checkersThinkingDots {
  margin: 6px 6px 10px 3px;
}
.checkersOpeningDroppingComp {
  position: absolute;
  background-image: url(../../assets/checkers/checkerspawns-v368.png);
  background-size: 500% 900%;
  opacity: 0.6;
  transition-timing-function: linear;
  transition-property: top;
  transform-style: preserve-3d;
}
.checkersOpeningDroppingComp-0 {
  animation: checkersSpinAnimation-0 3s linear infinite;
}
.checkersOpeningDroppingComp-1 {
  animation: checkersSpinAnimation-1 3s linear infinite;
}
.bgMemoryMenuSprites {
  background-image: url(../../assets/memory-cards-nobg-spritesheet-v374.png);
  display: inline-block;
  width: 56px;
  height: 84px;
  border-radius: 4px;
  background-size: 300% 200%;
  background-color: var(--color-bg);
}
.bgMemoryCardset-0 {
  background-position: 0 100%;
}
.bgMemoryCardset-1 {
  background-position: 0 0;
}
.bgMemoryCardset-2 {
  background-position: 50%0;
}
.bgMemoryCardset-3 {
  background-position: 50% 100%;
}
.bgMemoryCardset-4 {
  background-position: 100%0;
}
.bgMemoryCardset-5 {
  background-position: 100% 100%;
}
.bgCard {
  position: absolute;
  perspective: 1000px;
  cursor: pointer;
}
.bgCard-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.5s;
}
.bgCard-back,
.bgCard-front {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bgCard-front {
  background-size: 800% 700%;
  box-sizing: border-box;
}
.bgCard-front:not(.bgCardDesign-0) {
  border: 2px solid #000;
  background-color: #f5f5f5;
}
.bgCard-back {
  background-size: 100% 100%;
  transform: rotateY(180deg);
}
.bgCardDesign-0 {
  background-image: url(../../assets/memory/cards0-for-memory-v374.png);
}
.bgCardDesign-1 {
  background-image: url(../../assets/mahjong/tiles/animals-huge-v1.png);
}
.bgCardDesign-2 {
  background-image: url(../../assets/mahjong/tiles/fruit-huge-v1.png);
}
.bgCardDesign-3 {
  background-image: url(../../assets/mahjong/tiles/classic-huge-v1.png);
}
.bgCardDesign-4 {
  background-image: url(../../assets/memory/cards31-for-memory-v374.png);
}
.bgCardDesign-5 {
  background-image: url(../../assets/memory/cards33-for-memory-v374.png);
}
.bgCard-front-0 {
  background-position: 0 0;
}
.bgCard-front-1 {
  background-position: 14.28571%0;
}
.bgCard-front-2 {
  background-position: 28.57143%0;
}
.bgCard-front-3 {
  background-position: 42.85714%0;
}
.bgCard-front-4 {
  background-position: 57.14286%0;
}
.bgCard-front-5 {
  background-position: 71.42857%0;
}
.bgCard-front-6 {
  background-position: 85.71429%0;
}
.bgCard-front-7 {
  background-position: 100%0;
}
.bgCard-front-8 {
  background-position: 0 16.66667%;
}
.bgCard-front-9 {
  background-position: 14.28571% 16.66667%;
}
.bgCard-front-10 {
  background-position: 28.57143% 16.66667%;
}
.bgCard-front-11 {
  background-position: 42.85714% 16.66667%;
}
.bgCard-front-12 {
  background-position: 57.14286% 16.66667%;
}
.bgCard-front-13 {
  background-position: 71.42857% 16.66667%;
}
.bgCard-front-14 {
  background-position: 85.71429% 16.66667%;
}
.bgCard-front-15 {
  background-position: 100% 16.66667%;
}
.bgCard-front-16 {
  background-position: 0 33.33333%;
}
.bgCard-front-17 {
  background-position: 14.28571% 33.33333%;
}
.bgCard-front-18 {
  background-position: 28.57143% 33.33333%;
}
.bgCard-front-19 {
  background-position: 42.85714% 33.33333%;
}
.bgCard-front-20 {
  background-position: 57.14286% 33.33333%;
}
.bgCard-front-21 {
  background-position: 71.42857% 33.33333%;
}
.bgCard-front-22 {
  background-position: 85.71429% 33.33333%;
}
.bgCard-front-23 {
  background-position: 100% 33.33333%;
}
.bgCard-front-24 {
  background-position: 0 50%;
}
.bgCard-front-25 {
  background-position: 14.28571% 50%;
}
.bgCard-front-26 {
  background-position: 28.57143% 50%;
}
.bgCard-front-27 {
  background-position: 42.85714% 50%;
}
.bgCard-front-28 {
  background-position: 57.14286% 50%;
}
.bgCard-front-29 {
  background-position: 71.42857% 50%;
}
.bgCard-front-30 {
  background-position: 85.71429% 50%;
}
.bgCard-front-31 {
  background-position: 100% 50%;
}
.bgCard-front-32 {
  background-position: 0 66.66667%;
}
.bgCard-front-33 {
  background-position: 14.28571% 66.66667%;
}
.bgCard-front-34 {
  background-position: 28.57143% 66.66667%;
}
.bgCard-front-35 {
  background-position: 42.85714% 66.66667%;
}
.bgCard-front-36 {
  background-position: 57.14286% 66.66667%;
}
.bgCard-front-37 {
  background-position: 71.42857% 66.66667%;
}
.bgCard-front-38 {
  background-position: 85.71429% 66.66667%;
}
.bgCard-front-39 {
  background-position: 100% 66.66667%;
}
.bgCard-front-40 {
  background-position: 0 83.33333%;
}
.bgCard-front-41 {
  background-position: 14.28571% 83.33333%;
}
.bgCard-front-42 {
  background-position: 28.57143% 83.33333%;
}
.bgCard-front-43 {
  background-position: 42.85714% 83.33333%;
}
.bgCard-front-44 {
  background-position: 57.14286% 83.33333%;
}
.bgCard-front-45 {
  background-position: 71.42857% 83.33333%;
}
.bgCard-front-46 {
  background-position: 85.71429% 83.33333%;
}
.bgCard-front-47 {
  background-position: 100% 83.33333%;
}
.bgCard-front-48 {
  background-position: 0 100%;
}
.bgCard-front-49 {
  background-position: 14.28571% 100%;
}
.bgCard-front-50 {
  background-position: 28.57143% 100%;
}
.bgCard-front-51 {
  background-position: 42.85714% 100%;
}
.memoryFallingCard-inner {
  animation: fallingFlippingCardAnimation 16s forwards;
}
.playAreaCommon {
  position: relative;
  height: 100%;
}
.playAreaDivPhone,
.playAreaDivTablet {
  overflow: hidden;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
}
.playAreaHeightDesktop {
  top: 66px;
  height: calc(100% - 66px);
}
.playAreaHeightPhoneAd0 {
  height: 100%;
}
.playAreaHeightPhoneAd50 {
  height: calc(100% - 50px);
}
.playAreaHeightPhoneAd90 {
  height: calc(100% - 90px);
}
.playAreaHeightPhoneAd120 {
  height: calc(100% - 120px);
}
.playAreaHeightPhoneAd170 {
  height: calc(100% - 170px);
}
.playAreaHeightTabletAd0 {
  height: 100%;
}
.playAreaHeightTabletAd50 {
  height: calc(100% - 50px);
}
.playAreaHeightTabletAd90 {
  height: calc(100% - 90px);
}
.playAreaHeightTabletAd170 {
  height: calc(100% - 176px);
}
@media (max-height: 570px) and (orientation: portrait) {
  .playAreaHeightPhoneAd0,
  .playAreaHeightPhoneAd120,
  .playAreaHeightPhoneAd170,
  .playAreaHeightPhoneAd50,
  .playAreaHeightPhoneAd90,
  .playAreaHeightTabletAd0,
  .playAreaHeightTabletAd170,
  .playAreaHeightTabletAd50,
  .playAreaHeightTabletAd90 {
    height: 100%;
  }
}
@media (orientation: landscape) {
  .playAreaHeightPhoneAd0,
  .playAreaHeightPhoneAd120,
  .playAreaHeightPhoneAd170,
  .playAreaHeightPhoneAd50,
  .playAreaHeightPhoneAd90,
  .playAreaHeightTabletAd0,
  .playAreaHeightTabletAd170,
  .playAreaHeightTabletAd50,
  .playAreaHeightTabletAd90 {
    height: 100%;
  }
}
.statusBarPos,
.statusBarPos0Mobile,
.statusBarPos120Mobile,
.statusBarPos170Mobile,
.statusBarPos50Mobile,
.statusBarPos90Mobile {
  position: absolute;
  bottom: 0;
}
.bottomAdPhoneWrapper0 {
  height: 0;
}
.bottomAdPhoneWrapper120,
.bottomAdPhoneWrapper170,
.bottomAdPhoneWrapper50,
.bottomAdPhoneWrapper90 {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  bottom: 0;
}
.gameMobileAd {
  display: none;
}
.gameBottomTxt0Phone,
.gameBottomTxt120Phone,
.gameBottomTxt170Phone,
.gameBottomTxt50Phone,
.gameBottomTxt90Phone,
.gameBottomTxt90Tablet,
.gameBottomTxtDesktop {
  bottom: 44px;
}
.gameTopMsgTxt0Phone,
.gameTopMsgTxt120Phone,
.gameTopMsgTxt170Phone,
.gameTopMsgTxt50Phone,
.gameTopMsgTxt90Phone,
.gameTopMsgTxtDesktop {
  bottom: 70px;
}
@media (max-width: 1200px) {
  .gameBottomTxt0Phone,
  .gameBottomTxt120Phone,
  .gameBottomTxt170Phone,
  .gameBottomTxt170Tablet,
  .gameBottomTxt50Phone,
  .gameBottomTxt50Tablet,
  .gameBottomTxt90Phone,
  .gameBottomTxt90Tablet,
  .gameBottomTxtDesktop {
    bottom: 34px;
  }
  .gameTopMsgTxt0Phone,
  .gameTopMsgTxt120Phone,
  .gameTopMsgTxt170Phone,
  .gameTopMsgTxt50Phone,
  .gameTopMsgTxt90Phone,
  .gameTopMsgTxtDesktop {
    bottom: 56px;
  }
}
@media (min-height: 570px) and (orientation: portrait) {
  .playAreaDiv50Phone {
    height: calc(100% - 53px);
  }
  .playAreaDiv90Phone {
    height: calc(100% - 93px);
  }
  .playAreaDiv120Phone {
    height: calc(100% - 123px);
  }
  .statusBarPos50Mobile {
    bottom: 53px;
  }
  .statusBarPos90Mobile {
    bottom: 93px;
  }
  .statusBarPos120Mobile {
    bottom: 123px;
  }
  .gameBottomTxt50Phone,
  .gameBottomTxt50Tablet {
    bottom: 86px;
  }
  .gameBottomTxt90Phone,
  .gameBottomTxt90Tablet {
    bottom: 126px;
  }
  .gameBottomTxt120Phone {
    bottom: 156px;
  }
  .gameBottomTxt170Tablet {
    bottom: 206px;
  }
  .gameTopMsgTxt50Phone,
  .gameTopMsgTxt50Tablet {
    bottom: 106px;
  }
  .gameTopMsgTxt90Phone {
    bottom: 146px;
  }
  .gameTopMsgTxt120Phone {
    bottom: 176px;
  }
  .gameTopMsgTxt170Tablet {
    bottom: 226px;
  }
  .bottomAdPhoneWrapper50 {
    height: 50px;
  }
  .bottomAdPhoneWrapper90 {
    height: 90px;
  }
  .bottomAdPhoneWrapper120 {
    height: 120px;
  }
  .gameMobileAd {
    display: inline-block;
    min-width: 300px;
    width: 100%;
    height: 50px;
  }
}
@media (min-height: 570px) and (min-width: 1200px) and (orientation: portrait) {
  .gameBottomTxt50Phone {
    bottom: 96px;
  }
  .gameBottomTxt90Phone,
  .gameBottomTxt90Tablet {
    bottom: 136px;
  }
  .gameBottomTxt120Phone {
    bottom: 166px;
  }
  .gameTopMsgTxt50Phone {
    bottom: 116px;
  }
  .gameTopMsgTxt90Phone {
    bottom: 156px;
  }
  .gameTopMsgTxt120Phone {
    bottom: 186px;
  }
}
@media (min-height: 620px) and (orientation: portrait) {
  .playAreaDiv170Phone {
    height: calc(100% - 176px);
  }
  .statusBarPos170Mobile {
    bottom: 176px;
  }
  .gameBottomTxt170Phone {
    bottom: 206px;
  }
  .gameTopMsgTxt170Phone {
    bottom: 230px;
  }
  .bottomAdPhoneWrapper170 {
    height: 170px;
  }
}
.bsbAppleGestureArea {
  bottom: 15px;
}
.homeWidth {
  margin-left: auto;
  margin-right: auto;
}
.homeLogoImg,
.homeSubText {
  position: relative;
}
.homeLoginLinks {
  font-size: 20px;
  line-height: 26px;
  color: #fff;
  text-align: right;
}
.homeBigLinkBox1,
.homeBigLinkBox2,
.homeBigLinkBox3 {
  position: relative;
  background-repeat: no-repeat;
  text-align: center;
}
.homeBigLinkGameName {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
.homeFirstSub {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.homeLastSub {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.homeFirstSub,
.homeLastSub,
.homeMiddleSub {
  display: inline-block;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}
.homeFirstSub {
  border-left: 2px solid #fff;
}
.homeLastSub {
  border-left: 0;
}
a.homeLatestLink:link,
a.homeLatestLink:visited {
  color: #fff;
  text-decoration: underline;
  text-transform: uppercase;
  transition: 0.1s ease-out;
}
a.homeLatestLink:hover {
  color: #f8d25a;
  transition: 0.1s ease-out;
}
a.indexFooterLink:link,
a.indexFooterLink:visited {
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  padding-top: 3px;
}
a.indexFooterLink:hover {
  opacity: 0.7;
  transition: 0.1s ease-out;
}
.homeDailyChlImgDiv,
.homeSolEveryImgDiv {
  position: absolute;
  cursor: pointer;
  z-index: 3;
  background: url(../../assets/home-spritesheet-v374.png);
}
.homeLatestDiv {
  border-spacing: 0;
}
.homeArrowInBox,
.homeLatestDiv {
  position: absolute;
}
.homeDailyChlImgDiv {
  width: 87px;
  height: 113px;
  background-position: -1412px -123px;
}
.homeSolEveryImgDiv {
  width: 103px;
  height: 82px;
  background-position: -1779px -123px;
}
.homeLongLinkBox {
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.1s ease-out;
}
.homeLongLinkBox:hover {
  -moz-box-shadow: 0 0 19px #000;
  -webkit-box-shadow: 0 0 19px #000;
  box-shadow: 0 0 19px #000;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  cursor: pointer;
  transition: 0.1s ease-out;
}
.homeBigLinkBox4 {
  background-color: #fff;
}
.homeBigLinkBox5 {
  background-color: #42afcc;
}
.homeBigLinkBox4Title,
.homeBigLinkBox5Title {
  position: relative;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
}
.homeBigLinkBox4Title {
  color: #ff4a38;
}
.homeBigLinkBox5Title {
  color: #fff;
}
.homeLatestCell1,
.homeLatestCell2 {
  display: inline-block;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.homeFrameDiv {
  text-align: center;
}
.homeGamesListDiv {
  width: 100%;
  background-image: url(./images/home-games-background.jpg);
  background-position: center center;
  padding-bottom: 10px;
  scroll-margin-top: 60px;
}
.homeGamesTypeWrap {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 32px;
}
.homeGamesTypeWrap:last-of-type {
  margin-bottom: 0;
}
.homeGameTitleDiv > div {
  margin-right: 21px;
  border-radius: 10%;
}
.homeGameTitleHead {
  display: inline-block;
  font-size: 46px;
  margin: 0;
  text-transform: uppercase;
  position: relative;
  bottom: 6px;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(1) {
  color: #2b9a23;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(3) {
  color: #e8af00;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(5) {
  color: #912fd3;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(7) {
  color: #d043ab;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(9) {
  color: #0aa7ba;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(11) {
  color: #cab198;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(13) {
  color: #4b4891;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(15) {
  color: #15a284;
}
.homeGameListWrap > .homeGameTitleDiv:nth-of-type(17) {
  color: #000;
}
.homeGameListGameOuter {
  position: relative;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 10px;
  background-repeat: no-repeat;
  width: 314px;
  height: 58px;
  background-image: url(./images/home-games-button.png);
  transition: 0.1s ease-out;
}
.homeGameListGameOuter:hover {
  -moz-box-shadow: 0 0 6px #000;
  -webkit-box-shadow: 0 0 6px #000;
  box-shadow: 0 0 6px #000;
  transition: 0.1s ease-out;
}
.homeFooterBackground {
  box-shadow: 0 0 12px #3c3c3c;
  background-color: #1b5316;
}
.homeFooterWrapper {
  display: flex;
  padding-top: 30px;
}
.homeFooterLinks {
  display: flex;
  flex-direction: column;
  padding-left: 50px;
}
.homeGameListGameInner {
  display: inline-block;
  width: 96%;
  padding-left: 4%;
}
.optsTabBtnLang,
.optsTabBtnSecondary {
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
.optsTabBtnSecondary {
  border-radius: 15px;
  border: 2px solid #592902;
  width: 120px;
  height: 28px;
  font-size: 21px;
  margin: 0 10px;
  line-height: 26px;
}
@media (max-height: 501px) {
  .optsTabBtnSecondary {
    height: 24px;
    line-height: 23px;
  }
}
.optsTabSecondaryWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}
.optsTabWrapLang {
  width: 100%;
  background-repeat: repeat-x;
}
@media (min-width: 670px) {
  .optsTabWrapLang {
    padding-top: 20px;
    height: 60px;
    text-align: center;
  }
  .optsTabBtnLang {
    height: 34px;
    line-height: 32px;
    font-size: 23px;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 15px;
    margin-left: 14px;
  }
  .optsTabBtnLang:first-of-type {
    margin-left: 0;
  }
}
@media (min-width: 550px) and (max-width: 670px) {
  .optsTabWrapLang {
    padding-top: 10px;
    text-align: center;
  }
  .optsTabBtnLang {
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 15px;
    margin-left: 14px;
  }
  .optsTabBtnLang:first-of-type {
    margin-left: 0;
  }
}
@media (max-width: 550px) {
  .optsTabWrapLang {
    padding-top: 18px;
    height: 114px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
  }
  .optsTabBtnLang {
    height: 30px;
    line-height: 27px;
    font-size: 20px;
    width: 40%;
    border-radius: 15px;
    margin: 5px;
  }
}
.statsTdHead,
.statsTdHead2,
.statsTdHead2Phone,
.statsTdHeadPhone {
  text-align: right;
  font-weight: 700;
  color: #545353;
}
.statsTdData,
.statsTdDataPhone {
  font-weight: 700;
  color: #000;
  text-align: left;
  padding-left: 10px;
}
.statsTdData2Phone {
  width: 130px;
}
.statsTdData2,
.statsTdData2Phone {
  font-weight: 700;
  color: #000;
  text-align: left;
  padding-left: 10px;
}
.gameIntroBodyWrap {
  display: flex;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 50px;
  font-weight: 400;
}
.introPart2 {
  margin-left: 70px;
}
.gameIntroBodyWrapMobile > .introPart2 {
  margin-left: 0;
}
.loadingCardsText {
  margin-bottom: 28px;
  font-size: 28px;
}
.gameInfoMainHeader {
  margin-top: 0;
}
.ldbAllWrap {
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  height: 588px;
}
.chlWinWrap {
  display: flex;
  direction: ltr;
}
.chlCatWrap {
  display: flex;
  flex-direction: column;
  width: 280px;
  padding-top: 150px;
}
.chlCatWrap:nth-of-type(2) {
  padding-top: 0;
}
.chlGameBtn {
  display: flex;
  align-items: center;
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: 0 20px;
  height: 64px;
  color: #fff;
  background-color: transparent;
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
}
.chlSelectedGameBtn {
  background-color: rgba(0, 0, 0, 0.3);
  color: #fdda06;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.33);
}
.chlGameBtn > div {
  width: 46px;
  height: 46px;
  margin-right: 14px;
  border-radius: 10px;
  border: solid 1px #fff;
  background-size: cover;
}
.chlGameBrnLang {
  display: inline-block;
  font-size: 26px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 1px 1px 0#000;
}
.chlGameBtn :hover,
.chlGameBtn :hover ~ .chlGameBrnLang {
  color: #fdda06;
}
.chlCatWrap > span {
  position: absolute;
  width: 260px;
  bottom: 14px;
  left: 12px;
}
.chlLdbWrap {
  height: 790px;
  width: 688px;
  display: flex;
  flex-direction: column;
}
.chlLdbWrap > * {
  border-left: solid 2px #573919;
}
.chlLdbHead {
  display: flex;
  height: 104px;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 26px;
}
.ldbTimeWidth {
  width: 338px;
}
.ldbMovesWidth {
  width: 310px;
}
.ldbWrapLang {
  display: flex;
  line-height: 42px;
}
.ldbRecordsList {
  display: flex;
  width: 300px;
  flex-direction: column;
  margin: 0 10px;
}
.ldbPositions,
.ldbtimeMovesHead {
  display: flex;
  color: rgba(0, 0, 0, 0.9);
}
.ldbtimeMovesHead {
  height: 50px;
  align-items: center;
  justify-content: space-around;
  text-transform: uppercase;
  font-size: 22px;
}
.ldbPositions {
  width: 40px;
  padding-left: 5px;
  flex-direction: column;
  text-align: right;
}
.ldbPersonalStats .ldbPersonalStatsMobileMoves,
.ldbPositions2 {
  display: none;
}
.ldbBoardLine {
  display: flex;
  justify-content: space-between;
  padding: 0 22px;
}
.ldbBoardLine > span:first-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 202px;
}
.ldbRecordsList > .ldbBoardLine:nth-child(2n) {
  background-color: #f3f2f2;
}
.ldbPersonalStats {
  display: flex;
  position: relative;
  color: red;
  box-shadow: 0-4px 8px rgba(0, 0, 0, 0.25);
}
.clgDayLang {
  margin: 0 8px;
  font-size: 38px;
  text-align: center;
  text-transform: uppercase;
  color: #27190a;
}
.clgNextDayIcon,
.clgPreviousDayIcon {
  width: 24px;
  height: 40px;
  cursor: pointer;
  background-size: cover;
}
.clgNextDayIcon:hover,
.clgPreviousDayIcon:hover {
  opacity: 0.8;
}
.clgNextDayIcon {
  background-image: url(../../assets/right-arrow.png);
}
.clgPreviousDayIcon {
  background-image: url(../../assets/left-arrow.png);
}
.clgPlayBtnWrap {
  display: flex;
  justify-content: center;
}
.clgPlayBrn {
  width: 270px;
  height: 64px;
  margin: 16px 0;
  background-color: #46af1f;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}
.clgPlayBrn:hover {
  background-color: #37861a;
}
.clgPlayBrn > span {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  line-height: 64px;
}
@media (min-height: 680px) and (max-height: 808px) {
  .ldbAllWrap {
    height: 440px;
  }
  .chlCatWrap {
    padding-top: 66px;
  }
}
@media (max-height: 680px) {
  .clgPlayBrn {
    margin: 8px 0;
  }
  .chlGameBrnLang {
    font-size: 24px;
  }
}
@media (min-height: 580px) and (max-height: 680px) {
  .ldbAllWrap {
    height: 380px;
  }
  .chlCatWrap {
    padding-top: 79px;
  }
  .chlGameBtn {
    height: 50px;
  }
  .chlGameBtn > div {
    margin-right: 10px;
    width: 36px;
    height: 36px;
  }
  .chlLdbHead {
    height: 80px;
  }
}
@media (max-height: 580px) {
  .ldbAllWrap {
    height: 338px;
  }
  .chlCatWrap {
    padding-top: 12px;
  }
  .chlCatWrap > span {
    display: none;
  }
  .chlGameBtn {
    height: 50px;
  }
  .chlGameBtn > div {
    margin-right: 8px;
    width: 32px;
    height: 32px;
  }
  .ldbWrapLang {
    line-height: 32px;
  }
  .chlLdbHead {
    height: 66px;
  }
  .clgNextDayIcon,
  .clgPreviousDayIcon {
    width: 18px;
    height: 30px;
  }
  .ldbtimeMovesHead {
    height: 32px;
    font-size: 20px;
  }
  .clgPlayBrn {
    width: 216px;
    height: 50px;
  }
  .clgPlayBrn > span {
    font-size: 26px;
    line-height: 50px;
  }
}
@media (max-height: 479px) {
  .chlGameBtn {
    height: 50px;
  }
  .chlGameBtn > div {
    margin-right: 8px;
    width: 32px;
    height: 32px;
  }
}
@media (min-height: 370px) and (max-height: 479px) {
  .ldbAllWrap {
    height: 246px;
  }
}
@media (max-height: 370px) {
  .chlLdbHead {
    height: 56px;
  }
  .chlGameBtn {
    height: 38px;
  }
  .chlGameBtn > div {
    margin-right: 6px;
    width: 28px;
    height: 28px;
  }
  .ldbAllWrap {
    height: 210px;
  }
  .clgPlayBrn {
    margin: 4px 0;
  }
}
#equalityScrollableContent {
  overflow-y: auto;
}
@media (min-width: 1400px) {
  .crescentButton {
    width: 190px;
  }
}
@media (max-width: 1399px) {
  .crescentButton {
    width: 160px;
  }
}
@media (max-width: 480px) {
  .chlCatWrap {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 8px;
    padding-top: 32px;
  }
  .chlCatWrap > span,
  .chlGameBtn > div {
    display: none;
  }
  .chlGameBtn {
    height: 34px;
    padding: 0 3px;
    justify-content: center;
  }
  .chlGameButtonWide {
    width: 110px;
  }
  .chlGameButtonNarrow {
    width: 86px;
  }
  @media (max-width: 370px) {
    .chlGameButtonWide {
      width: 100px;
    }
    .chlGameButtonNarrow {
      width: 76px;
    }
  }
  .chlLdbWrap {
    width: 100%;
  }
  .ldbAllWrap {
    flex-direction: column;
    height: 522px;
  }
  .ldbMovesWidth,
  .ldbTimeWidth {
    width: 100%;
  }
  .ldbtimeMovesHead {
    height: 32px;
    font-size: 20px;
  }
  .chlLdbHead {
    height: 66px;
    border-top-left-radius: 0;
  }
  .clgNextDayIcon,
  .clgPreviousDayIcon {
    width: 18px;
    height: 30px;
  }
  .clgPlayBrn {
    width: 256px;
    height: 56px;
  }
  .clgPlayBrn > span {
    font-size: 32px;
    line-height: 54px;
  }
  .ldbPositions {
    width: 30px;
  }
  .ldbWrapLang {
    margin: 0 2px;
  }
  .ldbRecordsList {
    width: 100%;
  }
  .ldbBoardLine {
    padding: 0 10px;
  }
  .ldbBoardLine > span:first-child {
    width: 206px;
  }
  @media (min-height: 680px) and (max-height: 808px) {
    .ldbAllWrap {
      height: 374px;
    }
  }
  @media (min-height: 580px) and (max-height: 680px) {
    .ldbAllWrap {
      height: 289px;
    }
  }
  @media (min-height: 480px) and (max-height: 580px) {
    .ldbAllWrap {
      height: 208px;
    }
  }
  @media (max-height: 479px) {
    .ldbAllWrap {
      height: 134px;
    }
    .chlCatWrap {
      padding-top: 2px;
    }
    .chlLdbHead {
      height: 46px;
    }
    .chlCatWrap {
      margin-bottom: 2px;
    }
    .clgNextDayIcon,
    .clgPreviousDayIcon {
      width: 16px;
      height: 26px;
    }
    .clgPlayBrn {
      width: 216px;
      height: 50px;
      margin: 6px 0;
    }
    .clgPlayBrn > span {
      font-size: 26px;
      line-height: 50px;
    }
  }
  .homeWidth {
    width: 320px;
  }
  .homeLoginLineWrap {
    display: none;
  }
  .homeSecondaryContentWrap {
    justify-content: center;
    width: 320px;
  }
  .homeGameTitleDiv > div {
    margin-right: 10px;
  }
  .homeGameTitleHead {
    font-size: 28px;
  }
  .homeBigBoxWrapper,
  .homeGameBoxWrapper {
    background-color: rgba(255, 255, 255, 0.48);
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .homeBigLinkBox1,
  .homeBigLinkBox2,
  .homeBigLinkBox3 {
    border-radius: 10px;
    width: 290px;
    height: 100px;
  }
  .homeBigBoxIcon {
    position: absolute;
    top: 22px;
    width: 50px;
    background-repeat: no-repeat;
    right: 13px;
  }
  .homeSubs {
    justify-content: flex-start;
    bottom: 3px;
    left: 20px;
    width: 250px;
  }
  .homeThreeSubsDimentions {
    width: 64px;
    height: 30px;
  }
  .homeTwoSubsDimentions {
    width: 96px;
    height: 30px;
  }
  .homeDailyChlImgDiv {
    top: -18px;
  }
  .homeArrowInBox {
    right: 10px;
    top: 20px;
  }
  .homeLongLinkBox {
    width: 290px;
    height: 76px;
    background-color: rgba(0, 0, 0, 0.23);
  }
  .homeWelcomeWrapper {
    margin-top: 20px;
  }
  .homeWelcomeWrapper > h1 {
    padding: 8px 0;
  }
  .homeWelcomeText {
    width: 94%;
    margin: 0 auto;
    padding-bottom: 10px;
  }
  .homeGamesTypeWrap {
    justify-content: center;
  }
  .homeGameListWrap,
  .introPart0 {
    width: 314px;
    margin: 24px auto 40px;
  }
  .homeGameListGameOuter {
    width: 314px;
  }
  .forgotPassPseudoLink {
    font-size: 14px;
  }
  .indexFooterLink {
    margin-bottom: 6px;
  }
  .gameBottomUndo {
    bottom: 103px;
  }
  .endGameDealAgainButtonLang,
  .endGameNewGameButtonLang {
    margin-bottom: 10px;
  }
  .endGameLdbWrap {
    width: 312px;
  }
  .aboutDiv {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
  }
  .solAbout {
    width: 200px;
    height: 233px;
    padding-left: 50px;
  }
  .optsTabBtnSecondary {
    width: 100px;
    height: 24px;
    line-height: 23px;
    margin: 0 6px;
  }
  .optsTabBtnSecondaryPhone {
    font-size: 18px;
  }
  .optionsTabsWrapperCardsets {
    margin-bottom: 0;
  }
  @media (max-width: 380px) {
    .optsTabBtnSecondary {
      width: 88px;
      margin: 0 4px;
    }
  }
}
@media (min-width: 480px) and (max-width: 766px) {
  .chlCatWrap {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 8px;
    padding-top: 14px;
  }
  .chlCatWrap > span,
  .chlGameBtn > div {
    display: none;
  }
  .chlGameBtn {
    height: 34px;
    padding: 0 2px;
    justify-content: center;
  }
  .chlGameButtonNarrow,
  .chlGameButtonWide {
    width: 100px;
  }
  .chlLdbWrap {
    width: 100%;
  }
  .ldbAllWrap {
    flex-direction: column;
    height: 538px;
  }
  .leaderboardWidth {
    width: 100%;
  }
  .ldbtimeMovesHead {
    height: 36px;
    font-size: 20px;
  }
  .ldbMovesWidth,
  .ldbTimeWidth {
    width: 100%;
  }
  .ldbRecordsList {
    width: 400px;
  }
  .ldbBoardLine {
    padding: 0 16px;
  }
  .ldbBoardLine > span:first-child {
    width: 260px;
  }
  .chlLdbHead {
    height: 66px;
    border-top-left-radius: 0;
  }
  .clgNextDayIcon,
  .clgPreviousDayIcon {
    width: 18px;
    height: 30px;
  }
  .clgPlayBrn {
    width: 256px;
    height: 56px;
  }
  .clgPlayBrn > span {
    font-size: 32px;
    text-transform: uppercase;
    color: #fff;
    line-height: 54px;
  }
  .ldbPositions {
    width: 30px;
  }
  .ldbWrapLang {
    margin: 0 2px;
  }
  @media (min-height: 680px) and (max-height: 808px) {
    .ldbAllWrap {
      height: 391px;
    }
  }
  @media (min-height: 580px) and (max-height: 680px) {
    .ldbAllWrap {
      height: 305px;
    }
  }
  @media (min-height: 480px) and (max-height: 580px) {
    .ldbAllWrap {
      height: 227px;
    }
  }
  @media (max-height: 479px) {
    .ldbAllWrap {
      height: 195px;
    }
    .chlCatWrap {
      padding-top: 2px;
    }
    .chlLdbHead {
      height: 46px;
    }
    .chlCatWrap {
      margin-bottom: 2px;
    }
    .clgNextDayIcon,
    .clgPreviousDayIcon {
      width: 16px;
      height: 26px;
    }
    .clgPlayBrn {
      width: 216px;
      height: 50px;
      margin: 6px 0;
    }
    .clgPlayBrn > span {
      font-size: 26px;
      line-height: 50px;
    }
  }
  @media (max-height: 370px) {
    .ldbAllWrap {
      height: 142px;
    }
  }
  .homeWidth {
    width: 440px;
  }
  .homeLoginLineWrap {
    display: none;
  }
  .homeSecondaryContentWrap {
    justify-content: center;
    width: 440px;
  }
  .homeGameTitleDiv > div {
    margin-right: 10px;
  }
  .homeGameTitleHead {
    font-size: 38px;
  }
  .homeBigBoxWrapper,
  .homeGameBoxWrapper {
    background-color: rgba(255, 255, 255, 0.48);
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .homeBigLinkBox1,
  .homeBigLinkBox2,
  .homeBigLinkBox3 {
    border-radius: 10px;
    width: 406px;
    height: 100px;
  }
  .homeBigBoxIcon {
    position: absolute;
    top: 18px;
    width: 54px;
    background-repeat: no-repeat;
    right: 33px;
  }
  .homeSubs {
    justify-content: flex-start;
    bottom: 6px;
    left: 48px;
    width: 254px;
  }
  .homeThreeSubsDimentions {
    width: 80px;
    height: 36px;
  }
  .homeTwoSubsDimentions {
    width: 120px;
    height: 36px;
  }
  .homeGameTitleDiv {
    text-align: center;
  }
  .homeDailyChlImgDiv {
    top: -16px;
    left: 42px;
  }
  .homeArrowInBox {
    right: 40px;
    top: 20px;
  }
  .homeSolEveryImgDiv {
    top: 3px;
    left: 40px;
  }
  .homeLongLinkBox {
    width: 400px;
    height: 77px;
    background-color: rgba(0, 0, 0, 0.23);
  }
  .homeWelcomeWrapper {
    margin-top: 24px;
  }
  .homeWelcomeWrapper > h1 {
    padding: 8px 0;
  }
  .homeWelcomeText {
    width: 440px;
    margin: 0 auto;
    padding-bottom: 10px;
  }
  .homeGamesTypeWrap {
    justify-content: center;
  }
  .homeGameListGameOuter {
    width: 314px;
  }
  .homeGameListWrap,
  .introPart0 {
    width: 406px;
    margin: 24px auto 40px;
  }
  .indexFooterLink {
    margin-bottom: 12px;
  }
  @media (min-width: 560px) {
    .endGameLdbWrap {
      width: 440px;
    }
  }
  @media (max-width: 560px) {
    .endGameLdbWrap {
      width: 400px;
    }
  }
  .aboutDiv {
    width: 80%;
    margin-left: 10%;
    flex-direction: column;
  }
  .solAbout {
    width: 200px;
    height: 233px;
  }
}
@media (max-width: 766px) {
  .homeBigLinkBox1 {
    background: #fb8d24;
    background: -moz-linear-gradient(90deg, #fb8d24 0, #e1e44e 100%);
    background: -webkit-linear-gradient(90deg, #fb8d24 0, #e1e44e 100%);
    background: linear-gradient(90deg, #fb8d24 0, #e1e44e 100%);
  }
  .homeBigLinkBox2 {
    background: #5ead0a;
    background: -moz-linear-gradient(90deg, #5ead0a 0, #95e346 100%);
    background: -webkit-linear-gradient(90deg, #5ead0a 0, #95e346 100%);
    background: linear-gradient(90deg, #5ead0a 0, #95e346 100%);
  }
  .homeBigLinkBox3 {
    background: #ff476b;
    background: -moz-linear-gradient(90deg, #ff476b 0, #ffa55a 100%);
    background: -webkit-linear-gradient(90deg, #ff476b 0, #ffa55a 100%);
    background: linear-gradient(90deg, #ff476b 0, #ffa55a 100%);
  }
  .homeKlondikeIcon {
    width: 54px;
    height: 62px;
    background-position: -400px -316px;
  }
  .homeFreecellIcon,
  .homeSpiderIcon {
    width: 54px;
    height: 62px;
    background-position: -494px -316px;
  }
  .homeFreecellIcon {
    background-position: -585px -316px;
  }
  .chlLdbWrap > * {
    border: 0;
  }
  .chlWinWrap,
  .homeGameTypeBoxesWrap {
    flex-direction: column;
    align-items: center;
  }
  .chlWinWrap {
    width: 100%;
  }
  .homeGameTypeBoxesWrap {
    margin: 20px auto 12px;
  }
  .homeGameTypeBoxesWrap > :nth-child(5) {
    order: -1;
  }
  .homeBigBoxWrapper {
    padding: 3px;
  }
  .homeGameBoxWrapper {
    padding: 6px;
  }
  .homeBigLinkBox4Title,
  .homeBigLinkBox5Title {
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  }
  .homeBLBL,
  .homeLatestLabel {
    display: none;
  }
  .homeLatestDiv {
    top: 5px;
    color: #fff;
  }
  a.homeLatestLink:link {
    font-size: 22px;
  }
  .homeLatestCell2 {
    width: 120px;
    font-size: 16px;
  }
  .homeLatestCell3 {
    width: 53px;
    font-size: 16px;
    text-align: right;
  }
  .homeFrameDiv,
  .homeLatestTr4 {
    display: none;
  }
  .homeFooterWrapper {
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }
  .homeFooterLinks {
    padding-left: 0;
    padding-bottom: 20px;
  }
  .homeFooterBackground {
    padding-top: 10px;
  }
  .homeFooterSol {
    display: none;
  }
  .gameMessageText {
    line-height: 30px;
    font-size: 24px;
  }
  .gameIntroBodyWrap {
    flex-direction: column;
  }
  .gameIntroBodyWrap > .introPart1,
  .gameIntroBodyWrap > .introPart2 {
    max-width: 100%;
  }
  .introPart2 {
    margin: 0;
  }
  .loadingCardsText {
    margin-bottom: 26px;
  }
  .NoSolvableGamesMsgPhone {
    font-size: 14px;
  }
  .NoSolvableGamesMsg {
    font-size: 14px;
    top: 24px;
  }
  .endGameButtonsWrapper {
    flex-direction: column;
    align-items: center;
  }
  .endGameButtonsWrapper > .generalButton:not(:last-child) {
    margin-bottom: 7px;
  }
  .endGameLdbTimeMovesHead,
  .ldbPersonalStats {
    flex-direction: column;
  }
  .ldbPersonalStats .ldbMovesWidth {
    display: none;
  }
  .ldbPersonalStats .ldbPersonalStatsMobileMoves {
    display: inline;
  }
  .optsTabSecondaryWrap {
    margin-bottom: 16px;
  }
  .cardSet2Instructions {
    font-size: 18px;
    padding-top: 6px;
    width: 96%;
  }
}
@media (min-width: 766px) and (max-width: 962px) {
  .chlGameBtn {
    padding: 0 10px;
  }
  .chlGameBtn > div {
    margin-right: 10px;
    width: 36px;
    height: 36px;
  }
  .chlGameBrnLang {
    font-size: 24px;
  }
  .chlCatWrap {
    width: 230px;
  }
  .chlCatWrap > span {
    width: 198px;
  }
  .chlLdbWrap {
    width: 520px;
  }
  .ldbTimeWidth {
    width: 250px;
  }
  .ldbMovesWidth {
    width: 220px;
  }
  .ldbRecordsList {
    width: 212px;
    margin: 0 0 4px;
  }
  .ldbPositions {
    width: 28px;
  }
  .ldbBoardLine {
    padding: 0 8px;
  }
  .ldbBoardLine > span:first-child {
    width: 144px;
  }
  .homeWidth {
    width: 740px;
  }
  .homeGameTypeBoxesWrap,
  .homeSecondaryContentSecondWrap {
    flex-direction: row;
  }
  .homeGameTypeBoxesWrap {
    margin: 30px auto 6px;
  }
  .homeSecondaryContentWrap {
    flex-direction: column;
    width: 406px;
    margin-left: 4px;
    margin-right: 18px;
  }
  .homeBigLinkBox1,
  .homeBigLinkBox2,
  .homeBigLinkBox3 {
    background-image: url(../../assets/sprites-top-boxes-766.png);
    width: 243px;
    height: 205px;
  }
  .homeBigLinkBox1 {
    background-position: -5px -220px;
  }
  .homeBigLinkBox2 {
    background-position: -258px -5px;
    margin: 0 8px;
  }
  .homeBigLinkBox3 {
    background-position: -5px -5px;
  }
  .homeBigBoxIcon {
    display: none;
  }
  .homeSubs {
    width: 208px;
    bottom: 32px;
    left: 18px;
  }
  .homeThreeSubsDimentions {
    width: 65px;
    height: 34px;
  }
  .homeTwoSubsDimentions {
    width: 85px;
    height: 34px;
  }
  a.homeLatestLink:link {
    font-size: 16px;
  }
  .homeDailyChlImgDiv {
    top: -18px;
    left: 18px;
  }
  .homeBigLinkBox4,
  .homeBigLinkBox5 {
    margin-bottom: 10px;
  }
  .homeArrowInBox {
    top: 20px;
    left: 370px;
  }
  .homeSolEveryImgDiv {
    left: 12px;
  }
  .homeBLBL,
  .homeLongLinkBox {
    width: 406px;
    height: 77px;
  }
  .homeBLBL {
    position: relative;
    width: 405px;
    background-color: #747474;
    border-radius: 5px;
  }
  .homeLatestLabel {
    position: absolute;
    top: 7px;
    line-height: 32px;
    font-size: 32px;
    text-transform: uppercase;
    color: #f8d25a;
    width: 122px;
    font-weight: 700;
  }
  .homeLatestDiv {
    top: 4px;
    color: #fff;
  }
  .homeLatestCell2 {
    width: 105px;
    font-size: 16px;
  }
  .homeLatestCell3 {
    width: 48px;
    font-size: 16px;
    text-align: right;
  }
  .homeLatestTr {
    height: 23px;
  }
  .homeLatestTr4 {
    display: none;
  }
  .homeFrameDiv {
    width: 320px;
    height: 250px;
  }
  .homeWelcomeWrapper {
    margin-top: 36px;
  }
  .homeWelcomeText {
    width: 720px;
  }
  .homeGameListGameOuter {
    width: 314px;
  }
  .homeGameListWrap,
  .introPart0 {
    width: 640px;
    margin: 32px auto 50px;
  }
  .homeFooterWrapper {
    width: 700px;
  }
  .homeFooterLinks {
    padding-left: 20px;
  }
  .endGameLdbWrap {
    width: 487px;
  }
  .aboutDiv {
    width: 90%;
    margin-left: 5%;
  }
  .solAbout {
    width: 200px;
    height: 233px;
  }
}
@media (min-width: 962px) and (max-width: 1200px) {
  .homeWidth {
    width: 942px;
  }
  .homeGameTypeBoxesWrap {
    margin: 30px auto 12px;
    flex-direction: row;
  }
  .homeSecondaryContentSecondWrap,
  .homeSecondaryContentWrap {
    flex-direction: row;
  }
  .homeSecondaryContentWrap {
    width: 642px;
  }
  .homeBigLinkBox1,
  .homeBigLinkBox2,
  .homeBigLinkBox3 {
    background-image: url(../../assets/sprites-top-boxes-966.png);
    width: 307px;
    height: 260px;
  }
  .homeBigLinkBox1 {
    background-position: -643px -5px;
  }
  .homeBigLinkBox2 {
    background-position: -323px -5px;
    margin: 0 10px;
  }
  .homeBigLinkBox3 {
    background-position: -5px -5px;
  }
  .homeBigBoxIcon {
    display: none;
  }
  .homeSubs {
    width: 250px;
    bottom: 50px;
    left: 29px;
  }
  .homeThreeSubsDimentions {
    width: 84px;
    height: 44px;
  }
  .homeTwoSubsDimentions {
    width: 120px;
    height: 44px;
  }
  a.homeLatestLink:link {
    font-size: 20px;
  }
  .homeDailyChlImgDiv {
    top: -12px;
  }
  .homeBigLinkBox4 {
    margin-left: 6px;
    margin-right: 18px;
  }
  .homeBigLinkBox5 {
    left: -3px;
  }
  .homeArrowInBox {
    display: none;
  }
  .homeSolEveryImgDiv {
    top: 6px;
    left: -1px;
  }
  .homeLongLinkBox {
    width: 300px;
    height: 87px;
  }
  .homeBLBL {
    position: relative;
    bottom: -14px;
    width: 630px;
    height: 160px;
    background-image: url(../../assets/sprites-top-boxes-966.png);
    background-position: -5px -275px;
    background-repeat: no-repeat;
  }
  .homeLatestLabel {
    position: absolute;
    top: 34px;
    line-height: 42px;
    font-size: 46px;
    text-transform: uppercase;
    color: #f8d25a;
    width: 162px;
    font-weight: 700;
  }
  .homeLatestDiv {
    top: 23px;
    color: #fff;
  }
  .homeLatestCell2 {
    width: 166px;
    font-size: 20px;
  }
  .homeLatestCell3 {
    width: 60px;
    font-size: 20px;
    text-align: right;
  }
  .homeLatestTr {
    height: 27px;
  }
  .homeFrameDiv {
    width: 300px;
    height: 250px;
  }
  .homeWelcomeWrapper {
    margin-top: 36px;
  }
  .homeWelcomeText {
    width: 900px;
  }
  .homeGameListWrap,
  .introPart0 {
    width: 942px;
    margin: 16px auto 50px;
  }
  .homeGameListGameOuter {
    width: 308px;
  }
  .homeFooterWrapper {
    width: 850px;
  }
  .gameInfoMainHeader {
    font-size: 56px;
    line-height: 56px;
    padding-top: 40px;
    margin-bottom: 24px;
  }
  .gameInfoGameDetailsWrapper {
    font-size: 32px;
    padding-bottom: 26px;
  }
}
@media (min-width: 1200px) {
  .homeWidth {
    width: 1164px;
  }
  .homeGameTypeBoxesWrap {
    margin: 30px auto 14px;
  }
  .homeSecondaryContentWrap {
    width: 790px;
    height: 302px;
  }
  .homeGameTypeBoxesWrap,
  .homeSecondaryContentSecondWrap,
  .homeSecondaryContentWrap {
    flex-direction: row;
  }
  .homeBigLinkBox1,
  .homeBigLinkBox2,
  .homeBigLinkBox3 {
    background-image: url(../../assets/sprites-top-boxes-1200.png);
    width: 376px;
    height: 270px;
  }
  .homeBigLinkBox1 {
    background-position: -778px -5px;
  }
  .homeBigLinkBox2 {
    margin: 0 18px;
    background-position: -390px -5px;
  }
  .homeBigLinkBox3 {
    background-position: -7px -5px;
  }
  .homeBigBoxIcon {
    display: none;
  }
  .homeSubs {
    width: 286px;
    bottom: 50px;
    left: 45px;
  }
  .homeThreeSubsDimentions {
    width: 95px;
    height: 44px;
  }
  .homeTwoSubsDimentions {
    width: 125px;
    height: 44px;
  }
  a.homeLatestLink:link {
    font-size: 21px;
  }
  .homeDailyChlImgDiv {
    top: -16px;
    left: -36px;
  }
  .homeBigLinkBox4 {
    margin-left: 36px;
  }
  .homeBigLinkBox5 {
    margin-left: 66px;
  }
  .homeArrowInBox {
    top: 22px;
    left: 290px;
  }
  .homeSolEveryImgDiv {
    top: 5px;
    left: -32px;
  }
  .homeLongLinkBox {
    width: 333px;
    height: 87px;
  }
  .homeBLBL {
    position: relative;
    bottom: 0;
    width: 776px;
    height: 190px;
    background-image: url(../../assets/sprites-top-boxes-1200.png);
    background-position: -5px -285px;
    background-repeat: no-repeat;
  }
  .homeLatestLabel {
    position: absolute;
    text-transform: uppercase;
    color: #f8d25a;
    font-weight: 700;
  }
  .homeLatestDiv {
    top: 32px;
    color: #fff;
  }
  .homeLatestCell2 {
    width: 190px;
    font-size: 23px;
  }
  .homeLatestCell3 {
    width: 55px;
    font-size: 23px;
    text-align: right;
  }
  .homeLatestTr {
    height: 32px;
  }
  .homeFrameDiv {
    background-image: url(../../assets/home-spritesheet-v374.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 373px;
    height: 302px;
    background-position: -5px -123px;
    position: relative;
    top: -14px;
  }
  .homeDiv {
    position: relative;
    top: 29px;
    width: 300px;
    height: 250px;
    left: 44px;
  }
  .homeWelcomeWrapper {
    margin-top: 20px;
  }
  .homeWelcomeText {
    width: 1110px;
  }
  .homeGameListWrap,
  .introPart0 {
    width: 960px;
    margin: 40px auto 50px;
  }
  .homeGameListGameOuter {
    width: 314px;
  }
  .homeFooterWrapper {
    width: 944px;
  }
  .gameInfoMainHeader {
    font-size: 60px;
    line-height: 60px;
    padding-top: 48px;
    margin-bottom: 30px;
  }
  .gameInfoGameDetailsWrapper {
    font-size: 34px;
    padding-bottom: 30px;
  }
}
.homeHelpImg {
  width: 600px;
  max-width: 80%;
  margin-top: 6px;
  border-radius: 4px;
  border: 1px solid #000;
}
.unwindCommonNavWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
  padding-top: 30px;
  padding-bottom: 8px;
}
.unwindCommonNavCol {
  margin-right: 30px;
}
.unwindCommonNavCol,
.unwindCommonNavLastCol {
  display: flex;
  flex-direction: column;
}
nav.quicknavWrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  padding: 20px 8px 8px;
  box-sizing: border-box;
  width: 100%;
  background-color: #f3f3f3;
  justify-content: space-evenly;
  scroll-margin-top: 60px;
}
.quicknavWrapper .quicknav,
.unwindCommonNavOneGame {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.unwindCommonNavOneGame {
  flex: 0 1 0;
  margin: 12px;
  border-radius: 10px;
}
.quicknavWrapper .quicknav {
  flex: 1 1 0;
  transition: all 0.1s ease;
  gap: 6px;
  align-items: center;
  text-align: center;
  line-height: 1;
  max-width: 75px;
  cursor: pointer;
}
a.quicknav:link,
a.quicknav:visited {
  color: #000;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
}
a.quicknav:hover {
  opacity: 0.7;
}
.quickNavTextDiv {
  transition: all 0.1s ease;
  text-wrap: balance;
}
.quickNavTitleImage {
  width: 66px;
  height: 66px;
  border-radius: 10px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));
  transition: all 0.1s ease;
  flex-shrink: 0;
  flex-grow: 0;
}
.unwindCommonNavImg {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  padding: 6px;
  vertical-align: middle;
  margin-right: 6px;
}
.isMobile .quicknavWrapper .unwindCommonNavOneGame {
  min-width: 25%;
}
@media (min-width: 650px) and (max-width: 1350px) {
  .isNotMobile .quicknavWrapper .unwindCommonNavOneGame {
    min-width: 25%;
  }
  .isNotMobile .quicknavWrapper .quickNavTextDiv {
    text-align: left;
  }
  .isNotMobile .quicknavWrapper .quicknav {
    flex-wrap: nowrap;
    justify-content: left;
    max-width: none;
    gap: 8px;
  }
}
@media (max-width: 650px) {
  .isNotMobile .quicknavWrapper .unwindCommonNavOneGame {
    flex-basis: 25%;
  }
}
.gameInfoMainHeader {
  padding-top: 6px;
}
.gameAArea {
  width: 350px;
  min-height: 860px;
  margin-top: -9px;
  padding-top: 7px;
  overflow-x: hidden;
}
.tabletAArea {
  width: 306px;
  overflow-x: hidden;
}
.statusBarWidth #bsbInner {
  padding-right: 412px;
}
@media (orientation: landscape) {
  .tabletAArea {
    width: 306px;
    height: 800px;
    overflow-x: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    margin: 0;
    z-index: 84;
    top: 75px;
  }
  .playAreaDivTablet {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: calc(100% - 312px);
    margin-left: 0;
    margin-right: 0;
  }
}
@media (orientation: portrait) {
  .tabletAArea {
    width: 100%;
    height: 176px;
    overflow: hidden;
  }
  .isTablet .dailyChallengeLabel {
    bottom: calc(176px + (100% - 176px) / 10);
  }
}
.playAreaDivDesktop {
  width: calc(100% - 350px);
}
.isNotMobile nav.quicknavWrapper {
  padding-right: 410px;
}
@media (orientation: landscape) {
  .isNotTablet #stockSize {
    padding-left: 0;
  }
  #stockSize,
  .isTablet .statusBarWidthMobile #bsbInner {
    padding-left: 316px;
  }
  .isTablet #bsbPseudoAligner {
    display: none;
  }
}
@media (orientation: landscape) and (max-width: 1500px) {
  .isTablet #zoomSliderWrapper {
    width: 100px;
  }
}
@media (orientation: landscape) and (max-width: 1100px) {
  .isTablet #bsbName,
  .isTablet #zoomSliderWrapper {
    display: none;
  }
}
@media (orientation: landscape) and (max-width: 780px) {
  .isTablet #bsbBg {
    display: none;
  }
}
@media (orientation: landscape) and (max-width: 640px) {
  .isTablet #bsbZoom {
    display: none;
  }
}
@media (max-width: 1000px) {
  /* .gameAArea {
    width: 166px;
    height: 90%;
  } */
  /* .playAreaDivDesktop {
    width: calc(100% - 168px);
  } */
  .gameAArea {
    display: none;
  }
  .playAreaDivDesktop {
    width: 100%;
  }
  .isNotMobile nav.quicknavWrapper {
    padding-right: 168px;
  }
  .isNotTablet .statusBarWidth #bsbInner {
    padding-right: 170px;
  }
}
@media (max-width: 800px) {
  .isNotMobile nav.quicknavWrapper {
    padding-right: 8px;
  }
}
#text_right_rail {
  color: #59492f;
}
#box_right_rail {
  display: none;
}
@media (min-width: 1001px) {
  #box_right_rail {
    box-sizing: border-box;
    display: block;
    margin: 10px auto;
    max-width: 300px;
    color: #59492f;
    text-align: center;
    padding: 6px;
    background: linear-gradient(#fdf8eb 0, #fff0c8 100%);
    border-radius: 6px;
    font-size: 16px;
  }
  #box_right_rail a {
    color: #ad713b;
  }
}
@media (orientation: portrait) {
  .tabletAArea #box_right_rail {
    display: none;
  }
}
.buttonLink,
.generalText,
button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.encH1Div,
.encWrapper {
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
}
.homeWelcomeText {
  color: #000;
}
.alignSide {
  text-align: left;
  padding-left: 15px;
}
.generalButton > span {
  padding-bottom: 2px;
}
.gameGamesWrapper .generalButtonContent {
  color: #254c2a;
}
.gameGamesWrapper .generalButtonFace,
.gameGamesWrapper .generalButtonOverlay {
  box-shadow: inset 0-1px 2px 0#38900f;
}
.gameGamesWrapper .generalButtonFace {
  background-image: radial-gradient(
    ellipse at 10px 3px,
    #e5fdc6 0,
    #a1f537 10%,
    #4bdf15 25%,
    #56f123 80%,
    #a1f537 100%
  );
}
.gameGamesWrapper .generalButtonBody {
  background-image: linear-gradient(
    90deg,
    #46a315 0,
    #38900f 15%,
    #38900f 85%,
    #46a315 100%
  );
}
.gameGamesWrapper .generalButtonFace::after,
.gameGamesWrapper .generalButtonOverlay::after {
  background-image: linear-gradient(
    to right,
    transparent 0,
    #a3f53a 10%,
    #a3f53a 90%,
    transparent 100%
  );
}
.gameGamesWrapper svg {
  fill: #026600;
}
.gameGamesWrapper .generalButtonOverlay {
  background-image: radial-gradient(
    ellipse at 10px 3px,
    #e5fdc6 0,
    #a1f537 10%,
    #4bdf15 50%,
    #56f123 70%,
    #a1f537 100%
  );
}
.gameGamesWrapper:hover .generalButtonContent {
  color: #1a6a19;
}
.gameGamesWrapper:hover svg {
  fill: #147213;
}
.homeLogoImg {
  top: 6px;
  right: 3px;
}
.homeLogoBottom {
  width: 186px;
}
.homeGameListGameInner {
  padding-top: 10px;
  height: 46px;
  font-size: 22px;
}
.regTextLang {
  width: 180px;
}
.colLocked {
  font-size: 48px;
}
.ldbWrapLang {
  font-size: 20px;
}
.homeGameTitleHead {
  font-family: "Open Sans Condensed";
}
@media (max-height: 580px) {
  .ldbWrapLang {
    font-size: 16px;
  }
}
.statsTdHead {
  width: 300px;
  font-size: 21px;
}
.statsTdHeadPhone {
  width: 50%;
  font-size: 15px;
}
.statsTdHead2 {
  width: 240px;
  font-size: 21px;
}
.statsTdHead2Phone {
  font-size: 16px;
  width: 35%;
}
.statsTdData {
  font-size: 21px;
  width: 300px;
}
.statsTdDataPhone {
  font-size: 15px;
  width: 50%;
}
.statsTdData2 {
  width: 130px;
  font-size: 21px;
}
.statsTdData2Phone {
  font-size: 16px;
}
.gameShareDivLang {
  line-height: 34px;
}
.homeFavWrapper {
  width: 172px;
  margin-left: 18px;
}
.gameOptionsWrapper {
  width: 44px;
}
.gameOptionsWrapper span {
  display: none;
}
.gameBottomTxt170Tablet,
.gameBottomTxt50Tablet {
  bottom: 44px;
}
@media (max-width: 1200px) {
  .gameBottomTxt170Tablet,
  .gameBottomTxt50Tablet {
    bottom: 34px;
  }
}
@media (min-height: 570px) and (orientation: portrait) {
  .gameBottomTxt50Tablet {
    bottom: 86px;
  }
  .gameBottomTxt170Tablet {
    bottom: 206px;
  }
}
@media (max-width: 800px), (max-height: 440px) {
  .endGameStatsWrapper {
    font-size: 19px;
  }
  .endGameNotificationsFont {
    line-height: 18px;
    font-size: 18px;
  }
}
@media (min-width: 1201px) {
  .homeGamesTypeWrap > .homeGameListGameOuter:nth-child(3n) {
    margin-right: 0;
  }
}
@media (min-width: 963px) and (max-width: 1200px) {
  .homeGamesTypeWrap > .homeGameListGameOuter:nth-child(3n) {
    margin-right: 0;
  }
}
@media (min-width: 767px) and (max-width: 962px) {
  .homeGamesTypeWrap > .homeGameListGameOuter:nth-child(2n) {
    margin-right: 0;
  }
  .gameInfoMainHeader {
    font-size: 50px;
    line-height: 50px;
    padding-top: 28px;
    margin-bottom: 18px;
  }
  .gameInfoGameDetailsWrapper {
    font-size: 28px;
    padding-bottom: 20px;
  }
}
@media (min-width: 481px) and (max-width: 766px) {
  .chlGameBrnLang {
    font-size: 13px;
  }
  .homeLogoImg {
    right: 0;
    left: 14px;
  }
  .gameInfoMainHeader {
    font-size: 40px;
    line-height: 40px;
    padding-top: 22px;
    margin-bottom: 14px;
  }
  .gameInfoGameDetailsWrapper {
    font-size: 16px;
    padding-bottom: 14px;
  }
}
@media (max-width: 480px) {
  .chlGameBrnLang {
    font-size: 15px;
  }
  .homeLogoImg {
    width: 314px;
    height: 68px;
    top: 18px;
    right: 0;
  }
  .gameInfoMainHeader {
    font-size: 34px;
    line-height: 34px;
    padding-top: 14px;
    margin-bottom: 10px;
  }
  .gameInfoGameDetailsWrapper {
    font-size: 14px;
    padding-bottom: 8px;
  }
}
@media (min-width: 1400px) {
  .gameDealNewWrapper {
    width: 234px;
  }
  .gameDealRestartWrapper {
    width: 292px;
  }
  .generalButton {
    height: 44px;
    font-size: 24px;
  }
  .endGameButtonsWrapper .generalButton {
    height: 49px;
  }
  .endGameNewGameButtonLang {
    width: 190px;
  }
  .endGameDealAgainButtonLang {
    width: 180px;
  }
  .endGameAnotherGameButtonLang {
    width: 270px;
  }
  .btnPlay,
  .btnReshuffle {
    width: 192px;
    margin: 7px;
  }
  .btnFire {
    width: 192px;
  }
}
@media (max-width: 1399px) {
  .gameDealNewWrapper {
    width: 214px;
  }
  .gameDealRestartWrapper {
    width: 262px;
  }
  .generalButton {
    height: 42px;
    font-size: 21px;
  }
  .endGameNewGameButtonLang {
    width: 180px;
  }
  .endGameDealAgainButtonLang {
    width: 160px;
  }
  .endGameAnotherGameButtonLang {
    width: 242px;
  }
  .gameDealTextDiv {
    line-height: 46px;
  }
  .btnPlay,
  .btnReshuffle {
    width: 150px;
    margin: 3px;
  }
  .btnFire {
    width: 200px;
  }
}
@media (max-width: 750px) {
  .btnPlay,
  .btnReshuffle {
    width: 110px;
  }
}
@media (min-width: 1400px) {
  .gameUndoWrapper {
    width: 122px;
  }
  .gameHintWrapper {
    width: 105px;
  }
  .gameNewWrapper {
    width: 102px;
  }
  .gameGamesWrapper {
    width: 122px;
  }
  .gameMenuWrapper {
    width: 117px;
  }
  .gameHelpWrapper {
    width: 112px;
  }
  .gameScoresWrapper {
    width: 132px;
  }
}
@media (min-width: 1310px) and (max-width: 1399px) {
  .gameNewWrapper {
    width: 97px;
  }
  .gameGamesWrapper {
    width: 112px;
  }
  .gameMenuWrapper {
    width: 107px;
  }
}
@media (min-width: 910px) and (max-width: 1309px) {
  .gameNewWrapper {
    width: 97px;
  }
  .gameGamesWrapper {
    width: 112px;
  }
  .gameMenuWrapper {
    width: 107px;
  }
}
@media (min-width: 1015px) and (max-width: 1399px) {
  .gameUndoWrapper {
    width: 112px;
  }
  .gameHintWrapper {
    width: 97px;
  }
  .gameHelpWrapper {
    width: 102px;
  }
  .gameScoresWrapper {
    width: 122px;
  }
}
@media (max-width: 1014px) {
  .gameUndoWrapper {
    width: 54px;
  }
  .gameHintWrapper {
    width: 49px;
  }
  .gameHelpWrapper {
    width: 54px;
  }
  .gameScoresWrapper {
    width: 49px;
  }
  .gameHelpWrapper span,
  .gameHintWrapper span,
  .gameScoresWrapper span,
  .gameUndoWrapper span {
    display: none;
  }
}
@media (max-width: 910px) {
  .gameNewWrapper {
    width: 97px;
  }
  .gameMenuWrapper,
  .unwindHome .gameGamesWrapper {
    width: 49px;
  }
  .gameMenuWrapper span,
  .unwindHome .gameGamesWrapper span {
    display: none;
  }
  .btnGames {
    background-position: 75% 50%;
  }
}
@media (max-width: 680px) {
  .withTopLinks .gameNewWrapper {
    width: 49px;
  }
  .withTopLinks .gameNewWrapper span {
    display: none;
  }
}
@media (max-width: 910px) {
  .withTopLinks .gameLogoLang {
    display: none;
  }
}
@media (max-width: 680px) {
  .withoutTopLinks .gameLogoLang {
    display: none;
  }
}
@media (max-width: 720px) {
  .unwindHome .gameGamesWrapper {
    display: none;
  }
}
@media (max-width: 630px) {
  .withoutTopLinks .unwindHome .gameOptionsWrapper {
    display: none;
  }
}
@media (min-width: 870px) {
  .gameBottomUndo {
    font-size: 20px;
    line-height: 42px;
  }
}
@media (min-width: 680px) and (max-width: 870px) {
  .gameBottomUndo {
    font-size: 16px;
    line-height: 32px;
  }
}
@media (max-width: 680px) {
  .gameBottomUndo {
    font-size: 14px;
    line-height: 32px;
  }
}
@media (min-width: 550px) and (max-width: 670px) {
  .optsTabWrapLang {
    height: 44px;
  }
  .optsTabBtnLang {
    height: 28px;
    line-height: 27px;
  }
}
.clgDayLang {
  width: 420px;
}
@media (min-height: 580px) and (max-height: 680px) {
  .clgDayLang {
    width: 300px;
    font-size: 27px;
  }
}
@media (max-height: 580px) {
  .clgDayLang {
    width: 300px;
    font-size: 26px;
  }
}
@media (max-width: 962px) and (min-width: 767px) and (min-height: 681px) {
  .clgDayLang {
    width: 340px;
    font-size: 32px;
  }
}
@media (min-width: 481px) and (max-width: 766px) {
  .clgDayLang {
    width: 300px;
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .clgDayLang {
    width: 280px;
    font-size: 26px;
  }
  @media (max-height: 479px) {
    .clgDayLang {
      font-size: 24px;
    }
  }
}
@media (max-width: 400px) {
  .clgDayLang {
    width: 240px;
    font-size: 22px;
  }
}
@media (max-height: 540px) {
  .endGameColBtnLang {
    font-size: 13px;
    line-height: 16px;
  }
}
.pwaInFavoritesWrapper .pwaTextPromptTitle {
  max-width: 20ch;
}
.cgGoodColor {
  color: #29722b;
}
.cgBadColor {
  color: #e30e0e;
}
.bgGoodColor {
  background-color: #29722b;
}
.bgBadColor {
  background-color: #e30e0e;
}
.cgSpadesMiniLdbTable {
  font-size: 18px;
}
@media (max-width: 600px), (max-height: 500px) {
  .cgSpadesMiniLdbTable {
    font-size: 14px;
  }
}
@media (min-width: 835px) {
  .battleAtSeaTitle-multiple:not(.titleDivFormation),
  .battleAtSeaTitle-single {
    width: 290px;
  }
  .titleDivFormation {
    width: 430px;
  }
}
@media (max-width: 835px) {
  .battleAtSeaTitle-multiple,
  .battleAtSeaTitle-single {
    width: 240px;
  }
  .titleDivFormation {
    width: 260px;
  }
}
@media (max-width: 1185px) {
  .linksTopBar > .resources-dropdown {
    display: none;
  }
}
@media (min-width: 631px) and (max-width: 1094px) {
  .linksTopBar > .moreGames {
    display: none;
  }
}
@media (max-width: 630px) {
  .linksTopBar > a {
    display: none;
  }
}
#unity-container {
    width: 100%;
    height: 100%;
}
#unity-canvas {
    width: 100%;
    height: 100%;
    background: #000000;
    display: block;
}
#unity-loading-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#unity-loading-bar {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#unity-logo {
    text-align: center;
}
#unity-logo img {
    max-width: 100%;
}
#unity-progress-bar-empty {
    width: 80%;
    height: 24px;
    margin: 10px 20px 20px 10px;
    text-align: left;
    border: 1px solid white;
    padding: 2px;
}
#unity-progress-bar-full {
    width: 0%;
    height: 100%;
    background: white;
}
.light #unity-progress-bar-empty {
    border-color: black;
}
.light #unity-progress-bar-full {
    background: black;
}
.spinner,
.spinner:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.spinner {
  margin: 10px;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: spinner-spin 1.1s infinite linear;
}
@keyframes spinner-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.discord-link {
    display: inline-flex;
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.discord-link:hover {
    opacity: 0.8;
}

.mgcFaqSection {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 8px;
  color: #404042;
}

.mgcFaqTitle {
  display: inline-block;
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 34px;
  text-transform: uppercase;
  color: #000;
  border-bottom: 4px solid #f8a713;
  padding-bottom: 4px;
  margin: 0 0 28px;
}

.mgcFaqList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mgcFaqItem {
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

/* :has() is supported in all evergreen browsers; if a browser
    doesn't support it, the shadow just stays static — no breakage */
.mgcFaqItem:has(.mgcFaqDetails[open]) {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.mgcFaqDetails { display: block; }

/* the <summary> IS the clickable question — native behavior,
    no click handler required */
.mgcFaqQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 18px 20px;
  list-style: none;      /* hide default triangle marker */
}
.mgcFaqQuestion::-webkit-details-marker { display: none; }
.mgcFaqQuestion::marker { content: ""; }

.mgcFaqQuestion:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.mgcFaqQuestion:focus-visible {
  outline: 3px solid #2e9b57;
  outline-offset: -3px;
}

.mgcFaqQuestionText {
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000;
}

/* plus/minus icon, driven purely by the native [open] attribute —
    no JS needed to animate this either */
.mgcFaqIcon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.mgcFaqIcon::before,
.mgcFaqIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #2e9b57;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  border-radius: 2px;
}
.mgcFaqIcon::before { width: 16px; height: 3px; }
.mgcFaqIcon::after  { width: 3px; height: 16px; }

.mgcFaqDetails[open] .mgcFaqIcon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.mgcFaqAnswerInner {
  padding: 0 20px 20px;
}
.mgcFaqAnswerText {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #404042;
}