@font-face {
  font-family: 'Hammersmith One';
  font-style: normal;
  font-weight: 400;
  src: local('Hammersmith One'), local('HammersmithOne'), url('Hammersmith_One.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --color: #FFF;
  --background-color: #000;
  --subtle-line: rgb(116, 116, 116);
  --light-red:#B1022C;
  --dark-red:#340303;
  --light-blue:#003CD4;
  --dark-blue:#00103c;
  --light-green:#0E9F25;
  --dark-green:#003c2e;
  --light-purple:#9730FF;
  --dark-purple:#280457;
  --purple:#B60EF1;
  --red:#D91919;
  --green:#01C120;
  --blue:#246FFF;
}

:root {
  font-size: 1vh;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

html{
  height: 100%;
}

body{
  height: 100%;
  margin: 0;
  font-family: 'Hammersmith One';
  font-size: 3rem;
  color: var(--color);
  background-color: var(--background-color);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

.rules{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.76);
  overflow-y: scroll;
  padding: 3rem;
}

.options{
  display: flex;
  padding: 2rem;
  padding-top: 4rem;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
}

.hamburger{
  width: 3.7rem;
  height: 3.7rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  transform: rotate(90deg);
  color: var(--subtle-line);
  text-align: center;
}

.help{
  width: 3.7rem;
  height: 3.7rem;
  text-align: center;
  color: var(--subtle-line);
}

.help:hover, .hamburger:hover{
  color: var(--color);
}

/* auto hide these */
[data-view],
.play-menu,
[data-action=togglePlayMenuAction],
.rules{
  display: none;
  /* pointer-events: none; */
}

.rules-close{
  color: var(--subtle-line);
}

.rules-close:hover{
  color: var(--color);
}

.show{
  display: block;
}

.play.show{
  display: flex;
}

.play-menu{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.76);
}

.menu, .play-menu{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

h1{
  margin: 0;
  letter-spacing: 2rem;
  text-transform: uppercase;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.menu.show,
.play-menu.show{
  display: flex;
}

.menu-item{
  color: var(--subtle-line);
  padding: 1rem 0;
}

.menu-item:hover{
  color: var(--color);
}

.icon {
  display: flex;
  width: 10rem;
  height: 10rem;
  vertical-align: middle;
}

.icon{
  fill: #000;
  stroke: #fff;
}

svg {
  width: 100%;
  height: 100%;
}

.icon-logo{
  width: 20rem;
  height: 20rem;
}

.score{
  position: absolute;
  z-index: 2;
  width: 65vw;
  height: 65vw;
  max-width: calc(14rem * 3);
  max-height: calc(14rem * 3);
  transform: rotate(-45deg);
  display: none;
}

.score.show{
  display: block;
}

/* .score:before{
  border-top: .2rem solid var(--subtle-line);
  width: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
} */

/* .score:after{
  border-top: .2rem solid var(--subtle-line);
  width: 100vh;
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  z-index: -1;
} */

.computer-score{
  width: 7rem;
  height: 7rem;
  position: absolute;
  top: 0;
  left: 0;
  border: .2rem solid var(--subtle-line);
}

.player-score{
  width: 7rem;
  height: 7rem;
  position: absolute;
  bottom: 0;
  right: 0;
  border: .2rem solid var(--subtle-line);
}

.score-item{
  z-index: 99;
}

.score-item:before{
  transform: rotate(45deg) translateX(-.14rem);
  content: attr(data-value);
  line-height: 7rem;
  text-align: center;
  position: relative;
  display: block;
}

.score-item-active{
  border-color: #fff;
}

.card .icon-logo{
  display: none;
  width: 85%;
  height: 85%;
  fill: #FFF;
  stroke: #000;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.cards-computer .card .icon-logo{
  display: block;
}

/* .player-score.score-item-active:hover */
.score-item-pass{
  background: #fff;
  color: #000;
}

.play{
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hand{
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.table{
  width: calc(2.5 / 3.5 * 14rem * 4 + 4rem);
  height: calc(14rem * 3 + 3rem);
  position: relative;
  z-index: 1;
}

.table:not(.table-build){
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
  align-items:end;
  row-gap: 2rem;
  max-width: calc(14rem * 3);
}

.table:not(.table-build) .card-set:last-child{
  align-self: start;
}

.table:not(.table-build) .card-set{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  column-gap: 2rem;
}

.table-build{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: stretch;
}

.table-build .card-set{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.cards{
  display: flex;
  justify-content: center;
  padding-bottom: 2rem;
}

.card{
  width: calc(2.5 / 3.5 * 14rem);
  height: 14rem;
  transform-origin: top center;
  border-radius: 1rem;
  position: relative;
  box-shadow: #000 .1rem .1rem 1rem;
  background: #fff;
  border: .6rem solid #D3D5E9;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.cards-computer .card{
  border: none;
}

.card-detail{
  position: fixed;
  transform: translateX(-50%) translateY(-50%) !important;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  z-index: 999999999;
  width: calc(2.5 / 3.5 * 14rem * 3);
  height: calc(14rem * 3);
  border: calc(.6rem * 3) solid #D3D5E9;
  border-radius: calc(1rem * 3);
}
.card-active.card-detail{
  display: none;
}

.dragon{
  pointer-events: none;
}

.cards-computer .dragon,
.cards-computer .icon:not(.icon-logo){
  display: none;
}

.card .icon:not(.icon-logo){
  position: absolute;
  bottom: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16%);
  width: 4.2rem;
  height: 4.2rem;
  left: 50%;
  bottom: 0;
}

.card-detail .icon:not(.icon-logo)  {
  width: calc(4.2rem * 3);
  height: calc(4.2rem * 3);
}


.card-active{
  transform-origin: center center;
}

.icon-fire{
  /* stroke: var(--light-red);
  fill: var(--dark-red); */
  fill: #fff;
  stroke: var(--red);
}

.icon-water{
  /* stroke: var(--light-red);
  fill: var(--dark-red); */
  fill: #fff;
  stroke: var(--blue);
}

.icon-forest{
  /* stroke: var(--light-red);
  fill: var(--dark-red); */
  fill: #fff;
  stroke: var(--green);
}

.hand-fade{
  opacity: 0.23;
}

.icon-lotus{
  /* stroke: var(--light-red);
  fill: var(--dark-red); */
  fill: #fff;
  stroke: var(--purple);
}

.card-info{
  text-align: center;
  position: absolute;
  top: 110%;
  width: 100%;
  display: none;
  font-size: 2rem;
}

.card-info .icon-fire{
  fill: var(--dark-red);
}

.card-info .icon-water{
  fill: var(--dark-blue);
}

.card-info .icon-forest{
  fill: var(--dark-green);
}

.card-info .icon-lotus{
  fill: var(--dark-purple);
}

.info-row{
  display: flex;
  justify-content: center;
  height: calc(2rem * 3);
  align-items: center;
}

.card .card-info .icon{
  transform: none;
  position: relative;
  left: auto;
  bottom: auto;
  width: calc(3rem * 3);
  height: calc(3rem * 3);
}

.card-detail .card-info{
  display: block;
}

/* .card-red{
  background-image: linear-gradient(var(--light-red), var(--dark-red));
}

.card-green{
  background-image: linear-gradient(var(--light-green), var(--dark-green));
}

.card-blue{
  background-image: linear-gradient(var(--light-blue), var(--dark-blue));
}

.card-purple{
  background-image: linear-gradient(var(--light-purple), var(--dark-purple));
} */

.cards-computer .card{
  background: #fff;
}

/* at least  2 cards*/
.cards .card:nth-last-child(n+2):nth-child(1){
  transform: rotate(-10deg);
}

.cards .card:nth-last-child(n+1):nth-child(2){
  transform: rotate(10deg);
}

/* 3 cards*/
.cards .card:nth-last-child(n+3):nth-child(1){
  transform: rotate(-15deg);
}

.cards .card:nth-last-child(n+2):nth-child(2){
  transform: rotate(0deg) translateY(-2rem);
}

.cards .card:nth-last-child(n+1):nth-child(3){
  transform: rotate(15deg);
}

/* 4 cards*/
.cards .card:nth-last-child(n+4):nth-child(1){
  transform: rotate(-20deg);
}

.cards .card:nth-last-child(n+3):nth-child(2){
  transform: rotate(-5deg) translateY(-2.5rem);
}

.cards .card:nth-last-child(n+2):nth-child(3){
  transform: rotate(5deg) translateY(-2.5rem);
}

.cards .card:nth-last-child(n+1):nth-child(4){
  transform: rotate(20deg);
}

/* 5 cards*/
.cards .card:nth-last-child(n+5):nth-child(1){
  transform: rotate(-20deg);
}

.cards .card:nth-last-child(n+4):nth-child(2){
  transform: rotate(-10deg) translateY(-3rem);
}

.cards .card:nth-last-child(n+3):nth-child(3){
  transform: rotate(0deg) translateY(-4rem);
}

.cards .card:nth-last-child(n+2):nth-child(4){
  transform: rotate(10deg) translateY(-3rem);
}

.cards .card:nth-last-child(n+1):nth-child(5){
  transform: rotate(20deg);
}

/* 6 cards*/
.cards .card:nth-last-child(n+6):nth-child(1){
  transform: rotate(-25deg) translateX(6rem);
}

.cards .card:nth-last-child(n+5):nth-child(2){
  transform: rotate(-15deg) translateY(-4rem) translateX(4rem);
}

.cards .card:nth-last-child(n+4):nth-child(3){
  transform: rotate(-5deg) translateY(-6rem) translateX(1rem);
}

.cards .card:nth-last-child(n+3):nth-child(4){
  transform: rotate(5deg) translateY(-6rem) translateX(-1rem);
}

.cards .card:nth-last-child(n+2):nth-child(5){
  transform: rotate(15deg) translateY(-4rem) translateX(-4rem);
}

.cards .card:nth-last-child(n+1):nth-child(6){
  transform: rotate(25deg) translateX(-6rem);
}