/* WP Mahjong Advanced Fixed */
.wpmahjong-game,
.wpmahjong-game *{box-sizing:border-box}

.wpmahjong-game{
  width:100%;
  max-width:1120px;
  margin:0 auto 30px!important;
  padding:12px!important;
  background:#fff!important;
  color:#111!important;
  font-family:Arial,Helvetica,sans-serif!important;
  overflow-x:auto!important;
}

.wpmahjong-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 18px!important;
  padding:10px!important;
  background:#eef8e8!important;
  border-radius:12px!important;
}

.wpmahjong-toolbar button{
  border:1px solid #cfd8c8!important;
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  padding:10px 15px!important;
  border-radius:8px!important;
  font-size:15px!important;
  font-weight:700!important;
  cursor:pointer!important;
  font-family:Arial,Helvetica,sans-serif!important;
}

.wpmahjong-toolbar button:hover{background:#f6fff2!important}
.wpmahjong-counter{font-size:16px!important;font-weight:700!important;color:#111!important}
.wpmahjong-message{min-height:26px;text-align:center;font-weight:800;margin-bottom:8px;color:#0f5132!important}

.wpmahjong-board{
  position:relative;
  width:980px;
  height:610px;
  margin:0 auto!important;
  background:linear-gradient(#fff,#fafafa)!important;
  border-radius:14px!important;
}

/* tile body */
.wpmahjong-tile{
  position:absolute!important;
  width:62px!important;
  height:78px!important;
  border:1px solid #aeb4ba!important;
  border-radius:8px!important;
  background:linear-gradient(145deg,#ffffff 0%,#f8f8f8 65%,#e7e7e7 100%)!important;
  box-shadow:4px 6px 0 #747474, 0 2px 8px rgba(0,0,0,.22)!important;
  cursor:pointer!important;
  user-select:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  transform:translateZ(0);
}

.wpmahjong-tile:hover{filter:brightness(.98)}
.wpmahjong-tile.selected{
  outline:4px solid #ffd84d!important;
  outline-offset:2px!important;
  z-index:999!important;
}
.wpmahjong-tile.removed{
  opacity:0!important;
  pointer-events:none!important;
  transform:scale(.65)!important;
  transition:opacity .18s ease, transform .18s ease;
}

/* image-style tile face instead of broken unicode */
.wpmahjong-face{
  width:50px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:6px;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  background:#fff!important;
}

.wpmahjong-face .rank{
  font-size:30px!important;
  line-height:.9!important;
  display:block!important;
}
.wpmahjong-face .suit{
  font-size:18px!important;
  line-height:1!important;
  display:block!important;
  margin-top:3px!important;
}
.wpmahjong-face.bam{color:#078620!important;-webkit-text-fill-color:#078620!important}
.wpmahjong-face.crak{color:#b30000!important;-webkit-text-fill-color:#b30000!important}
.wpmahjong-face.dot{color:#1f3a93!important;-webkit-text-fill-color:#1f3a93!important}
.wpmahjong-face.wind{color:#16227c!important;-webkit-text-fill-color:#16227c!important;font-size:36px!important}
.wpmahjong-face.dragon{color:#008c2e!important;-webkit-text-fill-color:#008c2e!important;font-size:36px!important}
.wpmahjong-face.flower{color:#d64b7f!important;-webkit-text-fill-color:#d64b7f!important;font-size:34px!important}

.wpmahjong-face.wind .rank,
.wpmahjong-face.dragon .rank,
.wpmahjong-face.flower .rank{font-size:36px!important}

/* mobile scales the whole board cleanly */
@media(max-width:1050px){
  .wpmahjong-board{
    transform:scale(.82);
    transform-origin:top left;
    margin-left:calc((100% - 804px)/2)!important;
    height:510px;
  }
}
@media(max-width:760px){
  .wpmahjong-game{padding:8px!important;overflow-x:hidden!important}
  .wpmahjong-toolbar{gap:7px}
  .wpmahjong-toolbar button{padding:9px 12px!important;font-size:14px!important}
  .wpmahjong-board{
    transform:scale(.50);
    transform-origin:top left;
    margin-left:calc((100% - 490px)/2)!important;
    height:315px;
  }
}
@media(max-width:420px){
  .wpmahjong-board{
    transform:scale(.38);
    margin-left:calc((100% - 372px)/2)!important;
    height:240px;
  }
}