:root {
  --mr-tile-border-size: 0.27em;
  --mr-tile-border-radius: 0.6em;
  --mr-tile-width: 5em;
  --mr-tile-height: 7.1em;
}

body {
  touch-action:
    /*pan-x*/
    pan-y;
  /*touch-action: none;*/
}

#mr_loading {
  display: flex;
}

#mr_loading img {
  height: 20vw;
}

h1 {
  font-family: 'Shanghai';
  font-size: 3rem;
}

.mr-screen-fill {
  height: 100vh;
}

.mr-tile-container {
  font-size: 1.2vw;
}

.mr-full-height {
  height: 100%;
}

@media (min-width: 576px) {
  .mr-figure-list {
    gap: 0.5em;
  }

  .mr-figure span {
    font-size: 2.5rem !important;
  }
}

@media (min-width: 768px) {
  .mr-tile-container {
    /*font-size: 1.275vw;*/
    font-size: 1.175vw;
  }
}

@media (min-width: 992px) {
  .mr-tile-container {
    font-size: 0.9vw;
  }
}

@media (min-width: 1400px) {
  .mr-tile-container {
    font-size: 9pt;
  }

  .mr-screen-fill {
    height: inherit !important;
  }
}

.mr-error-overlay {
  position: absolute;
  top: 0;
  z-index: 200;
  right: 0;
  left: 0;
  opacity: 98%;
  height: 100%;
}

.mr-error-overlay span+span {
  margin-top: 0.5rem;
}

.alert-mahjong {
  --bs-alert-bg: var(--bs-light);
  --bs-alert-border-color: var(--bs-light);
}

.mr-tile-field > div {
  display: flex;
  justify-content: space-between;
}

.mr-tile-field > div+div {
  margin-top: 0.3rem;
}

.mr-tile {
  display: inline-block;
  width: var(--mr-tile-width);
  height: var(--mr-tile-height);
  cursor: pointer;
  transition: transform 0.5s ease-in-out, 
    width 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  z-index: 100;
  transform-style: preserve-3d;
  overflow: hidden;
  border-radius: var(--mr-tile-border-radius);
}

.mr-figure .mr-tile.mr-invisible {
  width: 0em;
  border: none !important;
}

.mr-tile .mr-character {
  position: absolute;
  font-size: 1.2em;
  top: 0.3em;
  left: 0.6em;
}
.mr-tile-face[mr-tile="DragonWhite"] + .mr-character {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mr-alert {
  background: inherit;
  background-size: 99%;
  
  animation: blink 0.3s;
  animation-iteration-count: 3;
}

@keyframes blink { 
  50% { 
    background: rgba(230, 0, 0, 0.7) ; 
  }  
}

.mr-tile.mr-tile-backside {
  background-size : var(--mr-tile-width);
  border-radius: var(--mr-tile-border-radius);
}

.mr-tile-backside .mr-tile-face {
  background-size: var(--mr-tile-width);
  border: var(--mr-tile-border-size) solid rgba(205,133,63,0.4) !important;
}

.mr-tile.mr-tile-rotated {
  transform: rotate3d(0, 1, 0, 180deg);
}

.mr-tile-backside > div {
  background-image: none !important;
}
.mr-tile-backside.mr-invisible > div {
  border: none;
}

.mr-tile-background {
  background: linear-gradient(165deg, rgba(255, 255, 255, 1) 0%, rgba(194, 194, 194, 1) 12%, rgba(223, 223, 223, 1) 33%, rgba(251, 251, 251, 1) 100%);
}

.mr-tile-face {
  background-size: var(--mr-tile-width);
  background-repeat: no-repeat;
  background-position-x: calc(-1 * var(--mr-tile-border-size));
  background-position-y: calc(-1 * var(--mr-tile-border-size));
  width: 100%;
  height: 100%;
  width: var(--mr-tile-width)
}

.mr-tile-face[mr-tile] {
  border-radius: var(--mr-tile-border-radius);
  border: var(--mr-tile-border-size) solid black;
}

.not-selectable {
  cursor: not-allowed !important;
  opacity: 40%;
}

.mr-figure-list > div {
  position: relative;
}

.mr-vertical-switch .form-switch {
  padding-left: 3.2rem;
}

.mr-vertical-switch .form-check + div {
  width: 100%;
}

.mr-vertical-switch label {
  display: block;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  height: 100%;
}

#mr_result .btn {
  width: 100%;
  height: 100%;
}

.mr-figure {
  border: 1px solid lightgray;
  border-radius: 0.375rem;
  height: 4.2rem;
  position: relative;
}

.mr-figure:hover {
  border-width: 3px !important;
}

.mr-figure span {
  position: absolute;
  font-size: 2rem;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mr-figure .mr-tile-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6pt;
}

.mr-figure .mr-tile-container .mr-tile+.mr-tile {
  margin-left: 0.2em;
}

.mr-selected {
  border: 3px solid #0dcaf0 !important;
}

.mr-result-part {
  color: #111;
}

.mr-result-part + .mr-result-part {
  margin-top: 0.75rem;
}

.mr-result-heading {
  color: #112;
  font-weight: lighter;
  margin-bottom: 0.175rem;
}

.mr-result-final {
  color: #113;
}

.mr-result-row {
  color: #114;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0.375rem;
}

.mr-result-sum-row {
  color: #119;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid gray;
  font-weight: 600;
}

.mr-result-final .mr-result-sum-row {
  font-weight: 800;
  font-size: 1.1rem;
}

.mr-result-row-heading {
  color: #115;
}

.mr-result-row-points {
  color: #116;
  font-family: monospace;
  font-size: 1.3rem;
}

.mr-result-row-points span {
  color: #117;
}

.mr-result-row-points .mr-explanation {
  color: #118;
  font-weight: 100;
  opacity: 0.5;
  margin-right: 1rem;
}

.mr-result-final .mr-result-sum-row {
  border: none;
}