/* style.css */

@import url(
  'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap'
);


:root {

  --cream: #f3ead8;
  --cream-light: #fffaf0;

  --brown: #3b2922;
  --brown-light: #806a5a;

  --wood: #8d5739;
  --wood-dark: #5d3626;

  --red: #b94e4e;
  --red-dark: #763535;

  --blue: #486b88;
  --blue-dark: #2e475c;

  --gold: #c39750;

  --green: #52644d;

}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {

  min-height: 100vh;

  padding: 30px 15px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "DM Sans", sans-serif;

  color: var(--brown);

  background:

    radial-gradient(
      circle at 10% 20%,
      rgba(195,151,80,.16),
      transparent 25%
    ),

    radial-gradient(
      circle at 90% 80%,
      rgba(82,100,77,.13),
      transparent 28%
    ),

    var(--cream);
}


body::after {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .035;

  background-image:
    repeating-linear-gradient(
      45deg,
      #000 0,
      #000 1px,
      transparent 1px,
      transparent 7px
    );
}


.app {

  width: min(100%, 720px);

  position: relative;
}


/* ==============================
   HEADER
============================== */


header {

  text-align: center;

  margin-bottom: 28px;
}


.batik {

  color: var(--gold);

  font-size: 18px;

  letter-spacing: 10px;

  margin-bottom: 10px;
}


.tagline {

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 4px;

  color: var(--brown-light);
}


h1 {

  margin-top: 8px;

  font-family: "Playfair Display", serif;

  font-size: clamp(48px, 10vw, 76px);

  line-height: 1;

  letter-spacing: -2px;
}


h1 em {

  color: var(--red);

  font-style: normal;
}


.intro {

  margin-top: 12px;

  color: var(--brown-light);

  font-size: 11px;
}


/* ==============================
   CARD
============================== */


.game-card {

  position: relative;

  padding: 28px;

  border-radius: 28px;

  background:

    linear-gradient(
      145deg,
      rgba(255,250,240,.92),
      rgba(255,246,230,.78)
    );

  border: 1px solid rgba(255,255,255,.9);

  box-shadow:
    0 25px 70px rgba(59,41,34,.14);

  backdrop-filter: blur(15px);
}


.game-card::before {

  content: "᚛";

  position: absolute;

  left: 12px;
  top: 8px;

  color: var(--gold);

  opacity: .3;

  font-size: 35px;
}


.game-card::after {

  content: "᚜";

  position: absolute;

  right: 12px;
  bottom: 8px;

  color: var(--gold);

  opacity: .3;

  font-size: 35px;
}


/* ==============================
   PLAYERS
============================== */


.players {

  display: grid;

  grid-template-columns: 1fr 55px 1fr;

  align-items: center;

  gap: 12px;
}


.player {

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 12px;

  border-radius: 16px;

  background: rgba(255,255,255,.4);

  border: 1px solid transparent;

  transition: .25s ease;
}


.player.active {

  background: white;

  border-color: rgba(195,151,80,.25);

  box-shadow:
    0 8px 20px rgba(59,41,34,.08);

  transform: translateY(-2px);
}


.player span {

  display: block;

  font-size: 7px;

  letter-spacing: 2px;

  color: var(--brown-light);
}


.player b {

  display: block;

  margin-top: 2px;

  font-family: "Playfair Display", serif;

  font-size: 20px;
}


.piece-preview {

  width: 38px;
  height: 38px;

  flex-shrink: 0;

  border-radius: 50%;

  box-shadow:
    inset -5px -6px 8px rgba(0,0,0,.2),
    inset 4px 4px 7px rgba(255,255,255,.4),
    0 4px 8px rgba(0,0,0,.15);
}


.red-piece {

  background:
    radial-gradient(
      circle at 30% 25%,
      #ed9e93,
      var(--red) 65%,
      var(--red-dark)
    );
}


.blue-piece {

  background:
    radial-gradient(
      circle at 30% 25%,
      #a9c3d8,
      var(--blue) 65%,
      var(--blue-dark)
    );
}


.versus {

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--cream-light);

  background: var(--brown);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1px;
}


/* ==============================
   STATUS
============================== */


.game-status {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin: 25px auto;

  padding: 12px 15px;

  border-radius: 14px;

  background: rgba(82,100,77,.07);
}


.turn-indicator {

  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 125px;
}


.turn-indicator i {

  width: 11px;
  height: 11px;

  display: block;

  border-radius: 50%;

  background: var(--red);

  box-shadow: 0 0 0 5px rgba(185,78,78,.12);

  transition: .3s;
}


.turn-indicator small {

  display: block;

  font-size: 7px;

  letter-spacing: 2px;

  color: var(--brown-light);
}


.turn-indicator strong {

  display: block;

  font-family: "Playfair Display", serif;

  font-size: 17px;
}


.game-status > p {

  text-align: right;

  font-size: 10px;

  color: var(--brown-light);
}


/* ==============================
   BOARD
============================== */


.board-wrapper {

  display: flex;

  justify-content: center;
}


.board {

  position: relative;

  width: min(76vw, 390px);

  aspect-ratio: 1;

  border-radius: 20px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 35% 30%,
      #bd8258,
      var(--wood) 50%,
      var(--wood-dark)
    );

  border: 9px solid #6d422d;

  box-shadow:

    inset 0 0 0 2px rgba(255,255,255,.16),

    inset 0 0 25px rgba(0,0,0,.22),

    0 18px 30px rgba(59,41,34,.2);
}


.wood-pattern {

  position: absolute;

  inset: 0;

  opacity: .12;

  background:

    repeating-radial-gradient(
      ellipse at 50% 50%,
      transparent 0,
      transparent 18px,
      #fff 19px,
      transparent 21px
    );

  pointer-events: none;
}


/* ==============================
   CONNECTION LINES
============================== */


.connection {

  position: absolute;

  height: 2px;

  background: rgba(255,235,198,.65);

  transform-origin: center;

  z-index: 1;

  box-shadow:
    0 1px 1px rgba(0,0,0,.15);
}


/* horizontal */

.c1 {
  width: 76%;
  left: 12%;
  top: 12%;
}

.c2 {
  width: 76%;
  left: 12%;
  top: 50%;
}

.c3 {
  width: 76%;
  left: 12%;
  top: 88%;
}


/* vertical */

.c4 {

  width: 76%;

  left: 12%;

  top: 50%;

  transform: rotate(90deg);
}


.c5 {

  width: 76%;

  left: 12%;

  top: 50%;

  transform: rotate(90deg);
}


/* diagonals */

.c6 {

  width: 107%;

  left: -3.5%;

  top: 50%;

  transform: rotate(45deg);
}


.c7 {

  width: 107%;

  left: -3.5%;

  top: 50%;

  transform: rotate(-45deg);
}


/* extra center connections */

.c8 {

  width: 38%;

  left: 31%;

  top: 50%;

  transform: rotate(90deg);
}


.c9 {

  width: 38%;

  left: 31%;

  top: 50%;

  transform: rotate(45deg);
}


.c10 {

  width: 38%;

  left: 31%;

  top: 50%;

  transform: rotate(-45deg);
}


/* ==============================
   SLOTS
============================== */


.slot {

  position: absolute;

  width: 16%;
  height: 16%;

  transform: translate(-50%, -50%);

  border: 5px solid rgba(255,244,220,.95);

  border-radius: 50%;

  background: #4c3023;

  cursor: pointer;

  z-index: 5;

  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.1),
    0 3px 7px rgba(0,0,0,.25);

  transition:
    transform .2s,
    box-shadow .2s,
    background .2s;
}


.slot:hover {

  transform:
    translate(-50%, -50%)
    scale(1.08);
}


.slot[data-id="0"] {
  left: 12%;
  top: 12%;
}


.slot[data-id="1"] {
  left: 50%;
  top: 12%;
}


.slot[data-id="2"] {
  left: 88%;
  top: 12%;
}


.slot[data-id="3"] {
  left: 12%;
  top: 50%;
}


.slot[data-id="4"] {
  left: 50%;
  top: 50%;
}


.slot[data-id="5"] {
  left: 88%;
  top: 50%;
}


.slot[data-id="6"] {
  left: 12%;
  top: 88%;
}


.slot[data-id="7"] {
  left: 50%;
  top: 88%;
}


.slot[data-id="8"] {
  left: 88%;
  top: 88%;
}


.slot.selected {

  transform:
    translate(-50%, -50%)
    scale(1.12);

  box-shadow:
    0 0 0 5px rgba(255,221,146,.55),
    0 4px 12px rgba(0,0,0,.3);
}


.slot.available {

  background: var(--gold);

  animation:
    available 1s infinite;
}


/* ==============================
   PIECES
============================== */


.piece {

  position: absolute;

  inset: 14%;

  border-radius: 50%;

  pointer-events: none;

  animation: spawn .25s ease;

  box-shadow:

    inset -6px -7px 9px rgba(0,0,0,.22),

    inset 5px 5px 8px rgba(255,255,255,.38),

    0 4px 8px rgba(0,0,0,.25);
}


.piece.red {

  background:
    radial-gradient(
      circle at 30% 25%,
      #f2afa6,
      var(--red) 62%,
      var(--red-dark)
    );
}


.piece.blue {

  background:
    radial-gradient(
      circle at 30% 25%,
      #bfd4e5,
      var(--blue) 62%,
      var(--blue-dark)
    );
}


.winning {

  animation: winnerPiece .6s infinite alternate;
}


/* ==============================
   SCORE
============================== */


.scoreboard {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  max-width: 480px;

  margin: 28px auto 0;

  border-top: 1px solid rgba(59,41,34,.12);

  border-bottom: 1px solid rgba(59,41,34,.12);
}


.score,
.round {

  padding: 12px;

  text-align: center;

  border-right: 1px solid rgba(59,41,34,.12);
}


.score:last-child {

  border: none;
}


.score small,
.round small {

  display: block;

  font-size: 7px;

  letter-spacing: 2px;

  color: var(--brown-light);
}


.score b,
.round b {

  display: block;

  margin-top: 2px;

  font-family: "Playfair Display", serif;

  font-size: 27px;
}


.dot {

  display: inline-block;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  margin-right: 3px;
}


.red-score .dot {

  background: var(--red);
}


.blue-score .dot {

  background: var(--blue);
}


/* ==============================
   BUTTON
============================== */


.buttons {

  text-align: center;

  margin-top: 24px;
}


.main-button {

  border: none;

  padding: 12px 26px;

  border-radius: 30px;

  color: white;

  background: var(--green);

  font-family: inherit;

  font-size: 10px;

  font-weight: 600;

  cursor: pointer;

  transition: .25s;
}


.main-button:hover {

  transform: translateY(-2px);

  background: #43533f;

  box-shadow:
    0 8px 18px rgba(82,100,77,.2);
}


/* ==============================
   FOOTER
============================== */


footer {

  text-align: center;

  padding-top: 20px;

  color: var(--brown-light);

  font-size: 9px;

  letter-spacing: 1px;
}


footer span {

  color: var(--gold);

  margin: 0 8px;
}


/* ==============================
   WINNER MODAL
============================== */


.winner-overlay {

  position: fixed;

  inset: 0;

  display: none;

  place-items: center;

  padding: 20px;

  z-index: 100;

  background: rgba(38,27,22,.55);

  backdrop-filter: blur(9px);
}


.winner-overlay.show {

  display: grid;

  animation: fade .25s ease;
}


.winner-box {

  width: min(90%, 360px);

  padding: 38px 25px;

  text-align: center;

  border-radius: 26px;

  background: var(--cream-light);

  box-shadow:
    0 30px 70px rgba(0,0,0,.3);

  animation: popup .35s ease;
}


.trophy {

  font-size: 38px;

  color: var(--gold);

  margin-bottom: 8px;
}


.winner-box > small {

  font-size: 8px;

  letter-spacing: 3px;

  color: var(--brown-light);
}


.winner-box h2 {

  margin: 5px 0 20px;

  font-family: "Playfair Display", serif;

  font-size: 38px;

  color: var(--red);
}


.winner-piece {

  width: 55px;
  height: 55px;

  margin: 0 auto 25px;

  border-radius: 50%;

  box-shadow:
    inset -6px -7px 10px rgba(0,0,0,.2),
    inset 5px 5px 8px rgba(255,255,255,.4),
    0 8px 15px rgba(0,0,0,.15);
}


.winner-piece.red {

  background:
    radial-gradient(
      circle at 30% 25%,
      #f2afa6,
      var(--red) 62%,
      var(--red-dark)
    );
}


.winner-piece.blue {

  background:
    radial-gradient(
      circle at 30% 25%,
      #bfd4e5,
      var(--blue) 62%,
      var(--blue-dark)
    );
}


#continueButton {

  border: none;

  padding: 12px 27px;

  border-radius: 30px;

  color: white;

  background: var(--brown);

  font-family: inherit;

  font-size: 10px;

  cursor: pointer;

  transition: .2s;
}


#continueButton:hover {

  background: var(--red);

  transform: translateY(-2px);
}


/* ==============================
   ANIMATIONS
============================== */


@keyframes available {

  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255,225,155,.15);
  }

  50% {
    box-shadow:
      0 0 0 8px rgba(255,225,155,.35);
  }
}


@keyframes spawn {

  from {
    opacity: 0;
    transform: scale(.3);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes winnerPiece {

  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.12);
  }
}


@keyframes fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes popup {

  from {
    opacity: 0;
    transform: translateY(20px) scale(.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ==============================
   MOBILE
============================== */


@media (max-width: 580px) {

  body {
    padding: 18px 10px;
  }


  .game-card {
    padding: 20px 13px;
    border-radius: 23px;
  }


  .players {
    grid-template-columns: 1fr 40px 1fr;
    gap: 5px;
  }


  .player {
    padding: 8px;
    gap: 6px;
  }


  .piece-preview {
    width: 29px;
    height: 29px;
  }


  .player b {
    font-size: 17px;
  }


  .player span {
    font-size: 6px;
  }


  .versus {
    width: 34px;
    height: 34px;
    font-size: 7px;
  }


  .game-status {
    display: block;
  }


  .game-status > p {
    margin-top: 8px;
    text-align: left;
  }


  .board {
    width: min(88vw, 360px);
  }

}