/* SET YOUR GAME CSS HERE */

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  src: url(../../fonts/PressStart2PRegular.otf) format("truetype");
}

#UI_ROOT * {
  font-family: "Press Start 2P";
}

/*---------------------------------------------------------------------------------------------*/
/* UI BACKGROUND TTT
/*---------------------------------------------------------------------------------------------*/
.UIBackgroundTTT {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
}

.UIBackgroundTTT-picture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/*---------------------------------------------------------------------------------------------*/
/* UI SCORE
/*---------------------------------------------------------------------------------------------*/
.UIScore {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  user-select: none;
  pointer-events: none;
}

.UIScore-points-p1 {
  position:absolute;
  left:150px;
  translate: 0% 0;
  text-shadow: 4px 4px 4px black;
}

.UIScore-points-p2 {
  position:absolute;
  right:150px;
  translate: 0% 0;
  text-shadow: 4px 4px 4px black;
}

/*---------------------------------------------------------------------------------------------*/
/* UI DAMIER & UI BACKGROUND TTT
/*---------------------------------------------------------------------------------------------*/
.UIDamier {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 468px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  user-select: none;
  pointer-events: none;
}

.UIDamier-cell {
  position:relative;
  background-image: url('/examples/triple-triad/plateau.png');
  background-size: cover;
}

.UIDamier.u-focused .UIDamier-cell.u-focused {
  animation: blink 1.5s infinite;
}

.UIDamier-cell .UICard {
  position: absolute;
  inset: 0 0 0 0;
}

.UIDamier-picture, .UIBackgroundTTT-picture {
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom:0;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
}

.UIDamier-picture {
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom:0;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
}

/*---------------------------------------------------------------------------------------------*/
/* UI WALL
/*---------------------------------------------------------------------------------------------*/
.UIWall {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 20;
}

.UIWall-picture {
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom:0;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
}

/*---------------------------------------------------------------------------------------------*/
/* UI CARD
/*---------------------------------------------------------------------------------------------*/
.UICard {
  position:relative;
  display: block;
}

.UICard-picture {
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom:0;
  object-fit: cover;
  width: 100%;
}

.UICard-points {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 50px;
  font-size: 12px;
}

.UICard-points-t {
  position:absolute;
  top:0;
  left:50%;
  translate: -50% 0;
  text-shadow: 2px 2px 2px black;
}

.UICard-points-l {
  position:absolute;
  top:50%;
  left:0;
  translate: 0 -50%;
  text-shadow: 2px 2px 2px black;
}

.UICard-points-r {
  position:absolute;
  top:50%;
  right:0;
  translate: 0 -50%;
  text-shadow: 2px 2px 2px black;
}

.UICard-points-b {
  position:absolute;
  bottom:0;
  left:50%;
  translate: -50% 0;
  text-shadow: 2px 2px 2px black;
}

/*---------------------------------------------------------------------------------------------*/
/* UI HANDS
/*---------------------------------------------------------------------------------------------*/
.UIHands {
  position: absolute;
  inset: 0 0 0 0;
  user-select: none;
  pointer-events: none;
}

.UIHands-left {
  position: absolute;
  top: 50px;
  bottom:50px;
  left: 10px;
  display: flex;
  flex-direction: column;
}

.UIHands-right {
  position: absolute;
  top: 50px;
  bottom:50px;
  right: 10px;
  display: flex;
  flex-direction: column;
}

.UIHands .UICard {
  width:100px;
  flex:1;
  margin-top: -30px;
}

.UIHands .UICard.u-focused {
  z-index: 10;
}

.UIHands .UICard.u-focused::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(/examples/triple-triad/curseur.png);
  background-size: cover;
}

.UIHands-left .UICard.u-focused::before {
  left: 110px;
  top: 10px;
}

.UIHands-right .UICard.u-focused::before {
  right: 110px;
  top: 10px;
}

.UIHands .UICard.u-focused .UICard-picture:nth-child(1) {
  box-shadow: 6px 8px 8px -4px #74ff52, -6px 0 8px -4px #74ff52;
}

.UIHands .UICard.u-focused .UICard-picture:nth-child(2) {
  animation: blink 1.5s infinite;
}

/*---------------------------------------------------------------------------------------------*/
/* ANIMATIONS
/*---------------------------------------------------------------------------------------------*/
@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.7;
  }
}