/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ======================================
   RESET
====================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -20%,
      #47209b 0%,
      transparent 30%
    ),
    #08070c;

  color: #f5f3ff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

button,
a,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ======================================
   NAVBAR
====================================== */

.navbar {
  min-height: 76px;

  padding: 0 5%;

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

  gap: 20px;

  border-bottom:
    1px solid #24202f;

  background:
    rgba(
      8,
      7,
      12,
      0.86
    );

  -webkit-backdrop-filter: blur(18px);

          backdrop-filter: blur(18px);

  position: -webkit-sticky;

  position: sticky;

  top: 0;

  z-index: 100;
}

.brand {
  font-size: 25px;

  font-weight: 900;

  letter-spacing: 2px;
}

.brand span {
  color: #8a5cff;
}

.navLinks {
  display: flex;

  gap: 30px;

  color: #aaa4b7;

  font-size: 14px;

  font-weight: 600;
}

.navLinks a {
  transition:
    color 0.15s ease;
}

.navLinks a:hover {
  color: white;
}

.navActions {
  display: flex;

  align-items: center;

  gap: 10px;
}

.balance {
  background: #15121c;

  border:
    1px solid #292334;

  padding:
    11px 16px;

  border-radius: 10px;

  font-weight: 700;

  font-size: 14px;

  white-space: nowrap;
}


/* ======================================
   BUTTONS
====================================== */

.primaryButton,
.secondaryButton {
  min-height: 42px;

  border-radius: 10px;

  padding:
    11px 18px;

  font-weight: 800;

  border: none;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;
}

.primaryButton {
  color: white;

  background:
    linear-gradient(
      135deg,
      #7b47ff,
      #a36cff
    );

  box-shadow:
    0 6px 24px
    rgba(
      123,
      71,
      255,
      0.25
    );
}

.primaryButton:hover:not(:disabled) {
  transform:
    translateY(-2px);

  box-shadow:
    0 8px 30px
    rgba(
      123,
      71,
      255,
      0.4
    );
}

.secondaryButton {
  color: #e9e5f2;

  background: #17141e;

  border:
    1px solid #302a3b;
}

.secondaryButton:hover:not(:disabled) {
  background: #211c2b;

  border-color: #514567;
}


/* ======================================
   USER MENU
====================================== */

.userBadge {
  display: flex;

  align-items: center;

  gap: 9px;

  background: #15121c;

  border:
    1px solid #302a3b;

  padding:
    10px 14px;

  border-radius: 10px;

  font-size: 13px;

  font-weight: 800;
}

.onlineDot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #54df88;

  box-shadow:
    0 0 10px
    rgba(
      84,
      223,
      136,
      0.7
    );
}


/* ======================================
   HERO
====================================== */

.hero {
  min-height: 650px;

  padding:
    110px 5% 50px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  position: relative;

  overflow: hidden;
}

.heroGlow {
  position: absolute;

  top: 20px;

  width: 600px;
  height: 350px;

  background:
    rgba(
      114,
      65,
      255,
      0.2
    );

  filter: blur(120px);

  border-radius: 100%;

  pointer-events: none;
}

.heroBadge,
.eyebrow {
  color: #9d78ff;

  font-size: 12px;

  letter-spacing: 2px;

  font-weight: 900;
}

.heroBadge {
  padding:
    8px 13px;

  border:
    1px solid #49347c;

  border-radius: 100px;

  background:
    rgba(
      113,
      65,
      224,
      0.1
    );

  margin-bottom: 25px;

  z-index: 1;
}

.hero h1 {
  font-size:
    clamp(
      55px,
      8vw,
      105px
    );

  line-height: 0.91;

  letter-spacing: -5px;

  font-weight: 950;

  max-width: 1000px;

  z-index: 1;
}

.hero h1 span {
  background:
    linear-gradient(
      90deg,
      #9b77ff,
      #6840df
    );

  background-clip: text;

  -webkit-background-clip:
    text;

  color: transparent;
}

.hero > p {
  max-width: 600px;

  color: #aaa5b5;

  font-size: 18px;

  line-height: 1.6;

  margin-top: 28px;

  z-index: 1;
}

.heroButtons {
  display: flex;

  gap: 12px;

  margin-top: 30px;

  z-index: 1;
}

.bigButton {
  min-width: 150px;

  padding:
    15px 23px;
}


/* ======================================
   STATS
====================================== */

.stats {
  width:
    min(
      100%,
      1000px
    );

  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  margin-top: 80px;

  background:
    rgba(
      20,
      17,
      27,
      0.8
    );

  border:
    1px solid #282231;

  border-radius: 18px;

  overflow: hidden;

  z-index: 1;
}

.stat {
  padding: 23px;

  border-right:
    1px solid #282231;

  display: flex;

  flex-direction: column;

  gap: 7px;
}

.stat:last-child {
  border-right: none;
}

.stat strong {
  font-size: 25px;
}

.stat span {
  color: #817b8d;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.6px;
}


/* ======================================
   GENERAL SECTIONS
====================================== */

.section {
  width:
    min(
      1200px,
      90%
    );

  margin: 0 auto;

  padding:
    75px 0;
}

.sectionHeader {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 20px;

  margin-bottom: 28px;
}

.sectionHeader h2,
.rankPanel h2,
.walletPanel h2 {
  margin-top: 7px;

  font-size: 32px;
}

.liveNotice {
  color: #8f899a;

  font-size: 12px;
}


/* ======================================
   GAME CARDS
====================================== */

.gameGrid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  grid-gap: 18px;

  gap: 18px;
}

.gameCard {
  background:
    linear-gradient(
      145deg,
      rgba(
        27,
        23,
        36,
        0.95
      ),
      rgba(
        14,
        12,
        19,
        0.95
      )
    );

  border:
    1px solid #2c2637;

  border-radius: 18px;

  padding: 25px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.gameCard:hover {
  transform:
    translateY(-3px);

  border-color: #57467a;
}

.gameIcon {
  width: 60px;
  height: 60px;

  border-radius: 14px;

  background: #211931;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 31px;

  margin-bottom: 25px;
}

.gameCardTop {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;
}

.gameCard h3 {
  font-size: 23px;
}

.rankBadge {
  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;

  background: #282231;

  padding:
    7px 9px;

  border-radius: 7px;

  color: #aaa1bc;
}

.gameCard > p {
  color: #8f8999;

  line-height: 1.5;

  margin-top: 9px;
}

.gameInfo {
  margin-top: 25px;

  padding:
    16px 0;

  border-top:
    1px solid #292331;

  border-bottom:
    1px solid #292331;

  display: grid;

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

.gameInfo div {
  display: flex;

  flex-direction: column;

  gap: 6px;
}

.gameInfo span {
  color: #777181;

  font-size: 11px;

  text-transform: uppercase;
}

.gameInfo strong {
  font-size: 18px;
}

.gameButtons {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  grid-gap: 9px;

  gap: 9px;

  margin-top: 18px;
}


/* ======================================
   MATCHMAKING
====================================== */

.matchmakingBox {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 7px;
}

.matchmakingBox button {
  width: 100%;
}

.matchSearching {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  color: #a79eb4;

  font-size: 10px;
}

.searchingDot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #9568ff;

  box-shadow:
    0 0 12px
    rgba(
      149,
      104,
      255,
      0.8
    );

  animation:
    searchingPulse
    1s infinite alternate;
}

.matchMessage {
  color: #8c8497;

  font-size: 10px;

  text-align: center;
}

@keyframes searchingPulse {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}


/* ======================================
   RANK PANEL
====================================== */

.rankPanel,
.walletPanel {
  border:
    1px solid #302841;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(
        116,
        66,
        255,
        0.15
      ),
      transparent 35%
    ),
    #100d16;

  border-radius: 22px;

  padding: 45px;
}

.rankPanel {
  display: grid;

  grid-template-columns:
    auto
    1fr
    320px;

  align-items: center;

  grid-gap: 35px;

  gap: 35px;
}

.rankSymbol {
  width: 80px;
  height: 80px;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #9d78ff,
      #6036c9
    );

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 35px;

  box-shadow:
    0 0 50px
    rgba(
      128,
      74,
      255,
      0.25
    );
}

.rankPanel p,
.walletPanel p {
  color: #8f8999;

  line-height: 1.6;

  margin-top: 10px;
}

.rankExample {
  background: #0b0910;

  border:
    1px solid #292231;

  border-radius: 14px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 8px;
}

.rankExample > span,
.walletBalance span {
  color: #7d7689;

  font-size: 11px;

  text-transform: uppercase;
}

.rankExample strong {
  color: #a783ff;

  font-size: 21px;
}

.rankExample small {
  color: #716b7b;
}

.ratingBar {
  height: 7px;

  background: #26202f;

  border-radius: 100px;

  overflow: hidden;

  margin:
    7px 0;
}

.ratingBar div {
  height: 100%;

  width: 5%;

  background: #8451fa;
}


/* ======================================
   WALLET
====================================== */

.walletPanel {
  display: grid;

  grid-template-columns:
    1fr
    330px;

  align-items: center;

  grid-gap: 60px;

  gap: 60px;
}

.walletBalance {
  background: #0a080e;

  border:
    1px solid #30283d;

  border-radius: 16px;

  padding: 25px;

  display: flex;

  flex-direction: column;

  gap: 13px;
}

.walletBalance strong {
  font-size: 34px;
}


/* ======================================
   AUTH
====================================== */

.authPage {
  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(
        114,
        65,
        255,
        0.22
      ),
      transparent 35%
    );
}

.authCard {
  width: 100%;

  max-width: 420px;

  background: #100d16;

  border:
    1px solid #302841;

  border-radius: 20px;

  padding: 35px;

  box-shadow:
    0 20px 80px
    rgba(
      0,
      0,
      0,
      0.35
    );
}

.authLogo {
  font-size: 24px;

  font-weight: 900;

  letter-spacing: 2px;

  margin-bottom: 30px;
}

.authLogo span {
  color: #8a5cff;
}

.authCard h1 {
  font-size: 32px;
}

.authSubtitle {
  color: #8f8999;

  margin-top: 8px;

  margin-bottom: 25px;

  line-height: 1.5;
}

.authCard label {
  display: block;

  margin-bottom: 7px;

  margin-top: 15px;

  font-size: 12px;

  color: #aaa4b7;

  font-weight: 700;
}

.authCard input {
  width: 100%;

  padding: 14px;

  background: #15121c;

  border:
    1px solid #302a3b;

  color: white;

  border-radius: 10px;

  outline: none;
}

.authCard input:focus {
  border-color: #8054ff;
}

.authButton {
  width: 100%;

  margin-top: 12px;
}

.authMessage {
  margin-top: 18px;

  padding: 12px;

  background: #17131f;

  border:
    1px solid #2e2739;

  border-radius: 9px;

  color: #b9b1c7;

  font-size: 13px;

  line-height: 1.5;
}


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

footer {
  min-height: 140px;

  border-top:
    1px solid #24202e;

  margin-top: 60px;

  padding:
    40px 5%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  color: #77717f;
}


/* ======================================
   CHESS PAGE
====================================== */

.chessPage {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 30% 0%,
      rgba(
        111,
        57,
        218,
        0.18
      ),
      transparent 32%
    ),
    #08070c;
}

.chessNav {
  min-height: 72px;

  border-bottom:
    1px solid #272130;

  padding:
    0 4%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  background:
    rgba(
      8,
      7,
      12,
      0.9
    );

  -webkit-backdrop-filter: blur(18px);

          backdrop-filter: blur(18px);

  position: relative;

  z-index: 50;
}

.chessMatchStatus {
  padding:
    9px 14px;

  border-radius: 8px;

  background: #17131f;

  border:
    1px solid #30263e;

  color: #9d78ff;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1px;
}

.chessLayout {
  width:
    min(
      1250px,
      94%
    );

  margin: 0 auto;

  padding:
    40px 0 80px;

  display: grid;

  grid-template-columns:
    minmax(
      500px,
      760px
    )
    320px;

  grid-gap: 30px;

  gap: 30px;

  justify-content: center;

  align-items: start;
}

.boardArea {
  width: 100%;

  padding: 14px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #100d16,
      #0b0910
    );

  box-shadow:
    0 25px 80px
    rgba(0, 0, 0, 0.38);
}

.chessPlayer {
  min-height: 62px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding:
    4px 3px 10px;
}

.bottomPlayer {
  margin-top: 10px;

  padding:
    0 3px 2px;
}

.chessPlayerIdentity {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;
}

.chessPlayerAvatar {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  font-size: 12px;

  font-weight: 950;

  letter-spacing: -0.2px;

  color: white;
}

.opponentPlayerAvatar {
  background:
    #191420;

  border:
    1px solid #2c2635;
}

.yourPlayerAvatar {
  background:
    linear-gradient(
      145deg,
      #7440e8,
      #5122ac
    );

  box-shadow:
    0 6px 20px
    rgba(116, 64, 232, 0.24);
}

.chessPlayerDetails {
  display: flex;

  flex-direction: column;

  gap: 2px;

  min-width: 0;
}

.chessPlayerDetails strong {
  max-width: 260px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 15px;
}

.chessPlayerDetails > span:not(.presenceOnline):not(.presenceOffline):not(.presenceConnecting) {
  color: #81788f;

  font-size: 10px;
}

.yourLabel {
  color:
    #9d78ff !important;

  font-weight: 900;

  font-size:
    9px !important;

  letter-spacing: 0.05em;
}


/* ======================================
   CHESS BOARD - PRACTICE STYLE
====================================== */

.chessBoard {
  width: 100%;

  aspect-ratio:
    1 / 1;

  display: grid;

  grid-template-columns:
    repeat(8, 1fr);

  border-radius: 10px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.35);
}

.chessSquare {
  position: relative;

  border: none;

  aspect-ratio: 1;

  display: grid;

  place-items: center;

  padding: 0;

  border-radius: 0;

  overflow: hidden;

  transition:
    filter 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.lightSquare {
  background: #b49ac9;
}

.darkSquare {
  background: #4c3766;
}

.chessSquare:hover {
  filter: brightness(1.06);
}

.lastMoveSquare {
  box-shadow:
    inset 0 0 0 999px
    rgba(116, 86, 174, 0.22);
}

.selectedSquare {
  background:
    #8c52e8 !important;

  box-shadow:
    inset 0 0 0 3px
    rgba(195, 161, 255, 0.34);
}

.chessPiece {
  width: 88%;
  height: 88%;

  display: grid;

  place-items: center;

  font-family:
    "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    "Arial Unicode MS",
    sans-serif;

  font-size:
    clamp(34px, 5.6vw, 68px);

  line-height: 1;

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;

  pointer-events: none;

  position: relative;

  z-index: 2;

  transform:
    translateY(-1px);
}

.whitePiece {
  color: #f9f6ff;

  text-shadow:
    0 1px 0 #4d4258,
    0 2px 1px
      rgba(0, 0, 0, 0.75),
    0 4px 8px
      rgba(0, 0, 0, 0.35);
}

.blackPiece {
  color: #18121f;

  text-shadow:
    0 1px 0
      rgba(255, 255, 255, 0.18),
    0 3px 5px
      rgba(0, 0, 0, 0.35);
}

.moveDot {
  width: 22%;

  aspect-ratio: 1;

  position: absolute;

  border-radius: 999px;

  background:
    rgba(39, 214, 128, 0.68);

  box-shadow:
    0 0 9px
    rgba(39, 214, 128, 0.25);

  z-index: 3;

  pointer-events: none;
}

.captureTarget {
  position: absolute;

  inset: 8%;

  border:
    4px solid
    rgba(46, 225, 138, 0.76);

  border-radius: 999px;

  box-shadow:
    0 0 10px
    rgba(46, 225, 138, 0.16);

  z-index: 3;

  pointer-events: none;
}

.fileCoordinate,
.rankCoordinate {
  position: absolute;

  z-index: 5;

  font-size: 8px;

  font-weight: 900;

  line-height: 1;

  color: rgba(31, 22, 40, 0.62);

  pointer-events: none;

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
}

.fileCoordinate {
  right: 4px;

  bottom: 3px;
}

.rankCoordinate {
  left: 4px;

  top: 4px;
}

.darkSquare .fileCoordinate,
.darkSquare .rankCoordinate {
  color:
    rgba(224, 208, 240, 0.68);
}

/* ======================================
   CHESS SIDEBAR
====================================== */

.chessSidebar {
  background:
    linear-gradient(
      160deg,
      #120f18,
      #0d0a12
    );

  border:
    1px solid #30263d;

  border-radius: 18px;

  padding: 24px;

  position: -webkit-sticky;

  position: sticky;

  top: 95px;
}

.chessSidebar h2 {
  margin-top: 7px;

  font-size: 27px;
}

.gameMeta {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  grid-gap: 10px;

  gap: 10px;

  margin-top: 20px;
}

.gameMeta div {
  background: #0a080e;

  border:
    1px solid #292132;

  border-radius: 10px;

  padding: 13px;

  display: flex;

  flex-direction: column;

  gap: 5px;
}

.gameMeta span {
  font-size: 10px;

  color: #766f81;

  text-transform: uppercase;
}

.gameMeta strong {
  font-size: 15px;
}

.checkWarning {
  margin-top: 15px;

  padding: 10px;

  text-align: center;

  border:
    1px solid #8b3a4d;

  background:
    rgba(
      177,
      49,
      82,
      0.13
    );

  color: #ff9db1;

  border-radius: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}

.moveHistory {
  margin-top: 25px;
}

.moveHistory > span {
  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;

  color: #777080;
}

.moveHistory > p {
  color: #777080;

  font-size: 12px;

  margin-top: 12px;
}

.moveList {
  margin-top: 10px;

  max-height: 300px;

  overflow-y: auto;
}

.moveRow {
  display: grid;

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

  align-items: center;

  padding:
    8px 6px;

  border-bottom:
    1px solid #211b29;

  font-size: 13px;
}

.moveRow span {
  color: #6e6778;
}

.moveRow strong {
  font-weight: 600;
}

.resignButton {
  width: 100%;

  margin-top: 25px;

  padding: 12px;

  border-radius: 9px;

  border:
    1px solid #5c2c3b;

  background:
    rgba(
      145,
      49,
      72,
      0.12
    );

  color: #e58b9e;

  font-weight: 900;
}

.resignButton:hover {
  background:
    rgba(
      145,
      49,
      72,
      0.22
    );
}

.chessLoading {
  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #9d78ff;

  font-weight: 900;
}


/* ======================================
   CHESS CLOCKS
====================================== */

.chessClock {
  min-width: 108px;

  padding:
    9px 14px;

  border-radius: 9px;

  background: #17131f;

  border:
    1px solid #30283d;

  font-size: 23px;

  font-weight: 900;

  font-feature-settings:
    "tnum";

  font-variant-numeric:
    tabular-nums;

  text-align: center;

  color: #8d8699;
}

.activeClock {
  color: white;

  border-color: #7650cf;

  background: #211638;

  box-shadow:
    0 0 20px
    rgba(128, 84, 255, 0.16);
}

.playerClockArea {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items: center;

  gap:
    15px !important;
}


/* ======================================
   PRESENCE
====================================== */

.presenceOnline,
.presenceOffline,
.presenceConnecting {
  display: block;

  margin-top: 4px;

  font-size:
    10px !important;

  font-weight: 800;
}

.presenceOnline {
  color:
    #5ee78b !important;
}

.presenceOffline {
  color:
    #ff728e !important;
}

.presenceConnecting {
  color:
    #a89fb7 !important;
}


/* ======================================
   RESULT SCREEN
====================================== */

.resultOverlay {
  position: fixed;

  inset: 0;

  z-index: 500;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 25px;

  background:
    rgba(
      5,
      4,
      8,
      0.82
    );

  -webkit-backdrop-filter: blur(11px);

          backdrop-filter: blur(11px);
}

.resultCard {
  width: 100%;

  max-width: 610px;

  padding: 38px;

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(
        121,
        72,
        255,
        0.22
      ),
      transparent 45%
    ),
    #100d16;

  border:
    1px solid #392d4c;

  box-shadow:
    0 35px 120px
    rgba(
      0,
      0,
      0,
      0.7
    );

  text-align: center;
}

.resultCard h1 {
  margin-top: 10px;

  font-size: 52px;

  letter-spacing: -2px;
}

.resultVictory {
  color: #8affad;
}

.resultDefeat {
  color: #ff819b;
}

.resultDraw {
  color: #c8b7ff;
}

.resultReason {
  margin-top: 5px;

  color: #8f8999;

  font-size: 14px;
}

.resultPlayers {
  display: grid;

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

  grid-gap: 15px;

  gap: 15px;

  align-items: center;

  margin-top: 30px;
}

.resultPlayer {
  background: #0a080e;

  border:
    1px solid #2e2639;

  border-radius: 14px;

  padding:
    20px 12px;

  display: flex;

  flex-direction: column;

  gap: 7px;
}

.resultPlayer > span {
  color: #716a7c;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}

.resultPlayer > strong {
  font-size: 18px;

  overflow: hidden;

  text-overflow: ellipsis;
}

.resultVs {
  color: #7857c9;

  font-size: 12px;

  font-weight: 900;
}

.resultRating {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 5px;
}

.resultRating b {
  font-size: 25px;
}

.resultRating em {
  font-style: normal;

  font-size: 13px;

  font-weight: 900;

  color: #8c8598;
}

.ratingPositive {
  color:
    #62e28e !important;
}

.ratingNegative {
  color:
    #ff728e !important;
}

.ratingUpdating {
  color: #777080;

  font-size: 11px;

  margin-top: 15px;
}


/* ======================================
   REMATCH + RESULT BUTTONS
====================================== */

.resultButtons {
  display: grid;

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

  grid-gap: 9px;

  gap: 9px;

  margin-top: 25px;

  align-items: stretch;
}

.resultButtons >
.primaryButton,
.resultButtons >
.secondaryButton {
  width: 100%;
}

.rematchBox {
  display: flex;

  flex-direction: column;

  gap: 6px;

  width: 100%;
}

.rematchBox button {
  width: 100%;

  min-height: 100%;
}

.rematchMessage {
  color: #9a92a5;

  font-size: 9px;

  line-height: 1.3;

  text-align: center;

  margin-top: 2px;
}


/* ======================================
   RANKING PAGES
====================================== */

.rankingPage {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(
        123,
        71,
        255,
        0.16
      ),
      transparent 32%
    ),
    #08070c;
}

.rankingContainer {
  width:
    min(
      1100px,
      92%
    );

  margin: 0 auto;

  padding:
    70px 0 100px;
}

.rankingHeader {
  position: relative;

  margin-bottom: 30px;
}

.rankingHeader h1 {
  font-size: 48px;

  letter-spacing: -2px;

  margin-top: 8px;
}

.rankingHeader p {
  color: #8e8799;

  margin-top: 8px;
}

.rankingNavActions {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;
}

.yourRankBox {
  position: absolute;

  right: 0;

  top: 0;

  min-width: 120px;

  padding:
    13px 18px;

  display: flex;

  flex-direction: column;

  gap: 4px;

  background: #15111d;

  border:
    1px solid #332943;

  border-radius: 12px;

  color: #7d758a;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}

.yourRankBox strong {
  color: #a982ff;

  font-size: 25px;
}


/* ======================================
   FULL LEADERBOARD
====================================== */

.leaderboardCard {
  overflow: hidden;

  background: #100d16;

  border:
    1px solid #2e2739;

  border-radius: 17px;
}

.leaderboardRow {
  min-height: 67px;

  display: grid;

  grid-template-columns:
    90px
    minmax(
      180px,
      1fr
    )
    120px
    100px
    100px
    120px;

  align-items: center;

  grid-gap: 10px;

  gap: 10px;

  padding:
    0 22px;

  border-bottom:
    1px solid #24202c;

  color: #aaa3b4;
}

.leaderboardRow:last-child {
  border-bottom: none;
}

.leaderboardLabels {
  min-height: 48px;

  background: #0b090f;

  color: #6e6878;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}

.leaderboardYou {
  background:
    rgba(
      128,
      84,
      255,
      0.1
    );

  border-left:
    3px solid #8054ff;
}

.rankNumber {
  color: #8b8297;

  font-weight: 900;
}

.eloRating {
  color: #a982ff;

  font-size: 19px;
}

.youTag {
  display: inline-block;

  margin-left: 8px;

  padding:
    3px 5px;

  border-radius: 4px;

  background: #6f45df;

  color: white;

  font-size: 7px;
}

.emptyRanking {
  padding: 50px;

  text-align: center;

  color: #7f788b;
}


/* ======================================
   HISTORY
====================================== */

.historyList {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.historyMatch {
  display: grid;

  grid-template-columns:
    100px
    1fr
    150px
    200px;

  align-items: center;

  grid-gap: 20px;

  gap: 20px;

  min-height: 85px;

  padding:
    15px 20px;

  background: #100d16;

  border:
    1px solid #2d2638;

  border-radius: 14px;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}

.historyMatch:hover {
  transform:
    translateY(-2px);

  border-color: #594477;
}

.historyResult {
  width: 65px;

  padding:
    8px 6px;

  border-radius: 7px;

  text-align: center;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;
}

.historyWin {
  background:
    rgba(
      70,
      201,
      112,
      0.12
    );

  border:
    1px solid #316e47;

  color: #69e494;
}

.historyLoss {
  background:
    rgba(
      214,
      66,
      96,
      0.12
    );

  border:
    1px solid #703747;

  color: #ff8097;
}

.historyDraw {
  background:
    rgba(
      159,
      131,
      219,
      0.12
    );

  border:
    1px solid #554670;

  color: #bba1ee;
}

.historyActive {
  background:
    rgba(
      108,
      76,
      189,
      0.12
    );

  color: #9e7eef;
}

.historyOpponent {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.historyOpponent > span,
.historyRating > span {
  color: #6e6878;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1px;
}

.historyOpponent strong {
  font-size: 17px;
}

.historyOpponent small {
  color: #777080;
}

.historyRating {
  display: flex;

  flex-direction: column;

  gap: 5px;
}

.historyRating strong {
  color: #a982ff;

  font-size: 18px;
}

.historyDate {
  color: #777080;

  font-size: 11px;

  text-align: right;
}


/* ======================================
   HOMEPAGE LEADERBOARD
====================================== */

.homeLeaderboard {
  overflow: hidden;

  background: #100d16;

  border:
    1px solid #302841;

  border-radius: 18px;
}

.homeLeaderboardHeader,
.homeLeaderboardRow {
  display: grid;

  grid-template-columns:
    85px
    1fr
    110px
    100px
    100px;

  align-items: center;

  grid-gap: 15px;

  gap: 15px;

  padding:
    0 24px;
}

.homeLeaderboardHeader {
  min-height: 45px;

  background: #0b090f;

  color: #716a7c;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}

.homeLeaderboardRow {
  min-height: 72px;

  border-top:
    1px solid #272130;

  color: #aaa3b4;

  transition:
    background 0.15s ease;
}

.homeLeaderboardRow:hover {
  background:
    rgba(
      128,
      84,
      255,
      0.06
    );
}

.homeLeaderboardRow >
strong:first-child {
  color: #8b8297;

  font-size: 16px;
}

.homeLeaderboardRow
.topRank {
  color:
    #d4a82e !important;
}

.homeLeaderboardPlayer {
  display: flex;

  align-items: center;

  gap: 12px;

  width: -moz-fit-content;

  width: fit-content;
}

.homeLeaderboardPlayer:hover
strong {
  color: #b999ff;
}

.leaderAvatar {
  width: 38px;

  height: 38px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #8754ff,
      #6334cf
    );

  color: white;

  font-weight: 900;
}

.homeLeaderboardPlayer
strong {
  color: white;

  transition:
    color 0.15s ease;
}

.homeLeaderboardRow > b {
  color: #a982ff;

  font-size: 19px;
}

.homeLeaderboardEmpty {
  padding: 45px;

  text-align: center;

  color: #7d7688;
}


/* ======================================
   PLAYER PROFILE
====================================== */

.playerProfilePage {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 35% 0%,
      rgba(
        128,
        75,
        255,
        0.16
      ),
      transparent 32%
    ),
    #08070c;
}

.playerProfileContainer {
  width:
    min(
      1050px,
      92%
    );

  margin: 0 auto;

  padding:
    60px 0 100px;
}

.profileHero {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  grid-gap: 25px;

  gap: 25px;

  padding: 32px;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(
        125,
        69,
        255,
        0.18
      ),
      transparent 45%
    ),
    #100d16;

  border:
    1px solid #332841;

  border-radius: 20px;
}

.profileAvatar {
  width: 92px;

  height: 92px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #9a68ff,
      #6031cf
    );

  color: white;

  font-size: 40px;

  font-weight: 900;

  box-shadow:
    0 0 45px
    rgba(
      126,
      73,
      255,
      0.25
    );
}

.profileIdentity h1 {
  margin-top: 4px;

  font-size: 39px;

  letter-spacing: -1px;
}

.profileIdentity p {
  margin-top: 4px;

  color: #87808f;
}

.profileActions {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;
}

.profileActions span {
  color: #67606f;

  font-size: 9px;
}

.profileStats {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      1fr
    );

  margin-top: 18px;

  overflow: hidden;

  background: #100d16;

  border:
    1px solid #2d2638;

  border-radius: 16px;
}

.profileStat {
  min-height: 100px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 8px;

  border-right:
    1px solid #282130;
}

.profileStat:last-child {
  border-right: none;
}

.profileStat span {
  color: #6f6879;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;
}

.profileStat strong {
  font-size: 23px;
}

.profileGameCard {
  margin-top: 18px;

  padding: 26px;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  grid-gap: 20px;

  gap: 20px;

  border:
    1px solid #302840;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #15101f,
      #0e0b13
    );
}

.profileGameIcon {
  width: 58px;

  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  background: #261b36;

  font-size: 30px;
}

.profileGameCard h2 {
  margin-top: 4px;

  font-size: 25px;
}

.profileGameCard p {
  color: #756e80;

  font-size: 12px;

  margin-top: 4px;
}

.profileBigRating {
  text-align: right;

  display: flex;

  flex-direction: column;

  gap: 3px;
}

.profileBigRating span {
  color: #6f6879;

  font-size: 9px;

  font-weight: 900;
}

.profileBigRating strong {
  color: #a982ff;

  font-size: 34px;
}

.profileHistory {
  margin-top: 55px;
}

.profileMatchList {
  display: flex;

  flex-direction: column;

  gap: 9px;
}

.profileMatch {
  min-height: 80px;

  padding:
    15px 20px;

  display: grid;

  grid-template-columns:
    80px
    1fr
    130px;

  align-items: center;

  grid-gap: 20px;

  gap: 20px;

  background: #100d16;

  border:
    1px solid #2c2536;

  border-radius: 13px;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}

.profileMatch:hover {
  transform:
    translateY(-2px);

  border-color: #554170;
}

.profileMatchOpponent {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.profileMatchOpponent > span {
  color: #8062ca;

  font-size: 9px;

  font-weight: 900;

  text-transform: uppercase;
}

.profileMatchOpponent strong {
  font-size: 16px;
}

.profileMatchOpponent a:hover
strong {
  color: #b99cff;
}

.profileMatchOpponent small {
  color: #716a7a;
}

.profileMatchDate {
  text-align: right;

  color: #716a79;

  font-size: 11px;

  display: flex;

  flex-direction: column;

  gap: 8px;
}

.profileMatchDate a {
  color: #9777ef;

  font-size: 9px;

  font-weight: 900;
}

.profileEmpty {
  padding: 50px;

  text-align: center;

  background: #100d16;

  border:
    1px solid #2c2536;

  border-radius: 15px;

  color: #756e80;
}


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

.challengeButtonBox {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.challengeButtonBox > span {
  color: #8c8497;

  font-size: 10px;

  text-align: right;
}


/* ======================================
   CHALLENGES PAGE
====================================== */

.challengeList {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.challengeCard {
  min-height: 95px;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  grid-gap: 18px;

  gap: 18px;

  padding:
    18px 22px;

  background: #100d16;

  border:
    1px solid #30273d;

  border-radius: 15px;
}

.challengeAvatar {
  width: 55px;

  height: 55px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #955fff,
      #5f32ca
    );

  color: white;

  font-size: 22px;

  font-weight: 900;
}

.challengeInfo {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.challengeInfo strong {
  font-size: 19px;
}

.challengeInfo p {
  color: #7a7385;

  font-size: 12px;
}

.challengeActions {
  display: flex;

  gap: 8px;
}

.challengeEmpty {
  padding: 55px;

  background: #100d16;

  border:
    1px solid #2c2537;

  border-radius: 15px;

  text-align: center;

  color: #777080;
}


/* ======================================
   GLOBAL CHALLENGE NOTIFICATION
====================================== */

.challengeNotification {
  position: fixed;

  top: 92px;

  right: 28px;

  z-index: 99999;

  width:
    min(
      430px,
      calc(
        100vw - 32px
      )
    );

  padding: 20px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(
        139,
        82,
        255,
        0.22
      ),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #18131f,
      #0d0a12
    );

  border:
    1px solid #4e3a6d;

  border-radius: 18px;

  box-shadow:
    0 25px 80px
    rgba(
      0,
      0,
      0,
      0.65
    ),
    0 0 40px
    rgba(
      128,
      84,
      255,
      0.14
    );

  animation:
    challengeSlideIn
    0.28s ease-out;
}

.challengeNotificationGlow {
  position: absolute;

  width: 220px;

  height: 220px;

  top: -130px;

  right: -90px;

  background:
    rgba(
      135,
      78,
      255,
      0.22
    );

  filter: blur(65px);

  pointer-events: none;
}

.challengeNotificationTop {
  display: flex;

  align-items: center;

  gap: 15px;

  position: relative;

  z-index: 2;
}

.challengeNotificationIcon {
  width: 58px;

  height: 58px;

  min-width: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #9a68ff,
      #6536d4
    );

  font-size: 30px;

  box-shadow:
    0 8px 30px
    rgba(
      126,
      73,
      255,
      0.28
    );
}

.challengeNotificationContent {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  min-width: 0;
}

.challengeNotificationEyebrow {
  color:
    #9d7aff !important;

  font-size:
    9px !important;

  font-weight: 900;

  letter-spacing: 1.4px;
}

.challengeNotificationContent strong {
  color: white;

  font-size: 20px;

  line-height: 1.1;
}

.challengeNotificationContent p {
  color: #aaa2b5;

  font-size: 12px;

  line-height: 1.45;

  margin: 0;
}

.challengeNotificationContent p b {
  color: white;
}

.challengeNotificationDivider {
  height: 1px;

  margin:
    17px 0;

  background: #2c2536;
}

.challengeNotificationMeta {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  grid-gap: 8px;

  gap: 8px;

  position: relative;

  z-index: 2;
}

.challengeNotificationMeta > span {
  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 10px;

  background: #0b0910;

  border:
    1px solid #292231;

  border-radius: 9px;

  color: #6e6878;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 0.8px;
}

.challengeNotificationMeta b {
  color: #ddd7e7;

  font-size: 11px;

  letter-spacing: 0;
}

.challengeNotificationButtons {
  display: grid;

  grid-template-columns:
    1.6fr
    1fr;

  grid-gap: 9px;

  gap: 9px;

  margin-top: 17px;

  position: relative;

  z-index: 2;
}

.challengeNotificationButtons button {
  min-height: 43px;

  font-size: 11px;
}

@keyframes challengeSlideIn {
  from {
    opacity: 0;

    transform:
      translateX(30px)
      scale(0.97);
  }

  to {
    opacity: 1;

    transform:
      translateX(0)
      scale(1);
  }
}


/* ======================================
   RESPONSIVE - 1050
====================================== */

@media (max-width: 1050px) {
  .navLinks {
    display: none;
  }

  .balance {
    display: none;
  }
}


/* ======================================
   RESPONSIVE - 950
====================================== */

@media (max-width: 950px) {
  .chessLayout {
    grid-template-columns:
      1fr;
  }

  .chessSidebar {
    position: static;
  }
}


/* ======================================
   RESPONSIVE - 900
====================================== */

@media (max-width: 900px) {
  .stats {
    grid-template-columns:
      1fr 1fr;
  }

  .stat:nth-child(2) {
    border-right: none;
  }

  .stat:nth-child(-n + 2) {
    border-bottom:
      1px solid #282231;
  }

  .gameGrid {
    grid-template-columns:
      1fr;
  }

  .rankPanel {
    grid-template-columns:
      1fr;
  }

  .rankSymbol {
    display: none;
  }

  .walletPanel {
    grid-template-columns:
      1fr;
  }

  .profileStats {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }

  .profileStat:nth-child(3) {
    border-right: none;
  }
}


/* ======================================
   RESPONSIVE - 800
====================================== */

@media (max-width: 800px) {
  .leaderboardRow {
    grid-template-columns:
      55px
      1fr
      85px;

    padding:
      0 14px;
  }

  .leaderboardRow
    > :nth-child(4),
  .leaderboardRow
    > :nth-child(5),
  .leaderboardRow
    > :nth-child(6) {
    display: none;
  }

  .historyMatch {
    grid-template-columns:
      75px
      1fr
      90px;
  }

  .historyDate {
    display: none;
  }

  .yourRankBox {
    position: static;

    width: -moz-fit-content;

    width: fit-content;

    margin-top: 20px;
  }
}


/* ======================================
   RESPONSIVE - 700
====================================== */

@media (max-width: 700px) {
  .navbar {
    padding:
      12px 18px;

    flex-wrap: wrap;
  }

  .navActions {
    width: 100%;

    flex-wrap: wrap;
  }

  .navActions > * {
    flex: 1 1;
  }

  .hero {
    padding-top: 80px;
  }

  .hero h1 {
    font-size: 52px;

    letter-spacing: -3px;
  }

  .heroButtons {
    width: 100%;
  }

  .heroButtons a {
    flex: 1 1;
  }

  .stats {
    margin-top: 55px;
  }

  .sectionHeader {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;
  }

  .rankPanel,
  .walletPanel {
    padding: 28px;
  }

  footer {
    gap: 15px;

    flex-direction: column;

    align-items: flex-start;
  }

  .homeLeaderboardHeader,
  .homeLeaderboardRow {
    grid-template-columns:
      55px
      1fr
      75px;

    padding:
      0 14px;
  }

  .homeLeaderboardHeader
    > :nth-child(4),
  .homeLeaderboardHeader
    > :nth-child(5),
  .homeLeaderboardRow
    > :nth-child(4),
  .homeLeaderboardRow
    > :nth-child(5) {
    display: none;
  }
}


/* ======================================
   RESPONSIVE - 650
====================================== */

@media (max-width: 650px) {
  .profileHero {
    grid-template-columns:
      auto
      1fr;
  }

  .profileActions {
    grid-column:
      1 / -1;

    width: 100%;

    align-items: stretch;
  }

  .profileActions button {
    width: 100%;
  }

  .profileStats {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .profileStat:nth-child(2n) {
    border-right: none;
  }

  .profileGameCard {
    grid-template-columns:
      auto
      1fr;
  }

  .profileBigRating {
    grid-column:
      1 / -1;

    text-align: left;
  }

  .profileMatch {
    grid-template-columns:
      65px
      1fr;
  }

  .profileMatchDate {
    display: none;
  }

  .profileIdentity h1 {
    font-size: 28px;
  }

  .profileAvatar {
    width: 70px;

    height: 70px;

    font-size: 30px;
  }
}


/* ======================================
   RESPONSIVE - 600
====================================== */

@media (max-width: 600px) {
  .chessLayout {
    width: 100%;

    padding-top: 15px;
  }

  .boardArea {
    padding: 10px 0;

    border-left: none;
    border-right: none;

    border-radius: 0;
  }

  .chessBoard {
    border-radius: 0;
  }

  .chessPlayer {
    padding:
      4px 12px;
  }

  .chessSidebar {
    margin:
      0 12px;
  }

  .chessPiece {
    font-size: 11vw;
  }

  .squareLabel {
    display: none;
  }

  .chessClock {
    min-width: 88px;

    font-size: 20px;

    padding:
      8px 11px;
  }

  .resultCard {
    padding:
      28px 20px;
  }

  .resultCard h1 {
    font-size: 42px;
  }

  .resultPlayers {
    grid-template-columns:
      1fr;
  }

  .resultVs {
    display: none;
  }

  .challengeCard {
    grid-template-columns:
      auto
      1fr;
  }

  .challengeActions {
    grid-column:
      1 / -1;
  }

  .challengeActions button {
    flex: 1 1;
  }
}


/* ======================================
   RESPONSIVE - 550
====================================== */

@media (max-width: 550px) {
  .rankingHeader h1 {
    font-size: 37px;
  }

  .historyMatch {
    grid-template-columns:
      65px
      1fr;
  }

  .historyRating {
    display: none;
  }

  .resultButtons {
    grid-template-columns:
      1fr;
  }

  .rematchBox button {
    min-height: 42px;
  }

  .challengeNotification {
    top: 15px;

    left: 15px;

    right: 15px;

    width: auto;

    padding: 17px;
  }

  .challengeNotificationMeta {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }

  .challengeNotificationButtons {
    grid-template-columns:
      1fr;
  }

  .challengeNotificationIcon {
    width: 50px;

    height: 50px;

    min-width: 50px;

    font-size: 25px;
  }

  .challengeNotificationContent strong {
    font-size: 18px;
  }
}
/* ======================================
   CHALLENGE NAV BUTTON
====================================== */

.challengeNavButton {
  position: relative;

  min-height: 42px;

  padding: 0 14px;

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

  gap: 7px;

  border-radius: 10px;

  background: #17141e;

  border: 1px solid #302a3b;

  color: #ddd7e7;

  font-size: 12px;

  font-weight: 800;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.challengeNavButton:hover {
  background: #211c2b;

  border-color: #5f4882;

  transform: translateY(-1px);
}

.challengeNavIcon {
  color: #a77cff;
}

.challengeNavBadge {
  min-width: 19px;
  height: 19px;

  padding: 0 5px;

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

  border-radius: 999px;

  background: #8451fa;

  color: white;

  font-size: 9px;

  font-weight: 900;

  box-shadow:
    0 0 15px rgba(132, 81, 250, 0.4);
}

@media (max-width: 700px) {
  .challengeNavButton {
    flex: 1 1;
  }
}
/* ======================================
   CONNECT FOUR
====================================== */

.connectFourPage {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(111, 57, 218, 0.2),
      transparent 34%
    ),
    #08070c;
}

.connectFourLoading {
  min-height: 100vh;

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

  color: #a986ff;

  font-size: 18px;
  font-weight: 900;
}

.connectFourLayout {
  width: min(
    1120px,
    94%
  );

  margin: 0 auto;

  padding:
    55px 0 90px;

  display: grid;

  grid-template-columns:
    minmax(500px, 720px)
    290px;

  grid-gap: 35px;

  gap: 35px;

  align-items: start;
}

.connectFourArena {
  width: 100%;
}

.connectFourPlayer {
  min-height: 72px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    5px 4px;
}

.connectFourIdentity {
  display: flex;

  align-items: center;

  gap: 11px;
}

.connectFourIdentity > div {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.connectFourIdentity strong {
  font-size: 16px;
}

.connectFourIdentity span {
  color: #837d8e;

  font-size: 11px;
}

.redPlayerDot,
.yellowPlayerDot {
  width: 18px;
  height: 18px;

  border-radius: 50%;

  flex-shrink: 0;
}

.redPlayerDot {
  background:
    #ff4968;

  box-shadow:
    0 0 15px
    rgba(255, 73, 104, 0.5);
}

.yellowPlayerDot {
  background:
    #ffd453;

  box-shadow:
    0 0 15px
    rgba(255, 212, 83, 0.45);
}


/* BOARD */

.connectFourBoard {
  width: 100%;

  aspect-ratio:
    7 / 6;

  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  grid-gap: 5px;

  gap: 5px;

  padding: 14px;

  border-radius: 22px;

  border:
    1px solid #6744b5;

  background:
    linear-gradient(
      180deg,
      #7049db,
      #43228d
    );

  box-shadow:
    0 35px 100px
    rgba(0, 0, 0, 0.5),
    0 0 60px
    rgba(109, 67, 210, 0.18);
}

.connectFourColumn {
  border: none;

  background: transparent;

  padding: 0;

  display: grid;

  grid-template-rows:
    repeat(6, 1fr);

  grid-gap: 5px;

  gap: 5px;

  cursor: pointer;

  border-radius: 10px;

  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.connectFourColumn:hover:not(:disabled) {
  background:
    rgba(255, 255, 255, 0.07);

  transform:
    translateY(-3px);
}

.connectFourColumn:disabled {
  opacity: 1;

  cursor: default;
}

.connectFourSlot {
  position: relative;

  width: 100%;

  aspect-ratio: 1;

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

  border-radius: 50%;

  background:
    rgba(10, 7, 16, 0.78);

  box-shadow:
    inset 0 4px 12px
    rgba(0, 0, 0, 0.7);
}

.connectFourSlot > span {
  width: 82%;
  height: 82%;

  border-radius: 50%;

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.connectFourRed > span {
  background:
    radial-gradient(
      circle at 35% 30%,
      #ff879b,
      #ff3e60 38%,
      #b80d34 100%
    );

  box-shadow:
    0 5px 12px
    rgba(0, 0, 0, 0.45),
    inset 0 2px 3px
    rgba(255, 255, 255, 0.25);

  animation:
    connectFourDrop
    0.22s ease-out;
}

.connectFourYellow > span {
  background:
    radial-gradient(
      circle at 35% 30%,
      #fff1a3,
      #ffd243 38%,
      #d39600 100%
    );

  box-shadow:
    0 5px 12px
    rgba(0, 0, 0, 0.45),
    inset 0 2px 3px
    rgba(255, 255, 255, 0.3);

  animation:
    connectFourDrop
    0.22s ease-out;
}

@keyframes connectFourDrop {
  from {
    transform:
      translateY(-35px)
      scale(0.85);

    opacity: 0;
  }

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

    opacity: 1;
  }
}


/* SIDEBAR */

.connectFourSidebar {
  padding: 25px;

  border-radius: 18px;

  background:
    linear-gradient(
      160deg,
      #15101d,
      #0d0a12
    );

  border:
    1px solid #30263d;

  position: -webkit-sticky;

  position: sticky;

  top: 95px;
}

.connectFourSidebar h2 {
  margin-top: 6px;

  font-size: 28px;
}

.connectFourSidebar > p {
  margin-top: 10px;

  color: #898293;

  line-height: 1.55;

  font-size: 12px;
}

.connectFourStatus {
  margin-top: 14px;

  padding: 13px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  border-radius: 10px;

  background:
    #09070d;

  border:
    1px solid #292230;
}

.connectFourStatus span {
  color: #716a7b;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1px;
}

.connectFourStatus strong {
  font-size: 15px;
}

.connectFourRedText {
  color:
    #ff607a;
}

.connectFourYellowText {
  color:
    #ffd95e;
}


/* MOBILE */

@media (max-width: 900px) {
  .connectFourLayout {
    grid-template-columns:
      1fr;
  }

  .connectFourSidebar {
    position: static;
  }
}

@media (max-width: 600px) {
  .connectFourLayout {
    width: 100%;

    padding-top: 20px;
  }

  .connectFourArena {
    padding:
      0 8px;
  }

  .connectFourBoard {
    padding: 7px;

    gap: 3px;

    border-radius: 13px;
  }

  .connectFourColumn {
    gap: 3px;
  }

  .connectFourSidebar {
    margin:
      15px 12px 0;
  }

  .connectFourPlayer {
    padding:
      5px 8px;
  }
}

/* ======================================
   MULTI-GAME PROFILE CHALLENGES
====================================== */

.challengeButtonTitle {
  color: #777080 !important;

  font-size: 8px !important;

  font-weight: 900;

  letter-spacing: 1px;

  text-align: right;
}

.profileChallengeButtons {
  display: flex;

  gap: 8px;
}

.profileChallengeGame {
  min-height: 42px;

  padding: 0 15px;

  gap: 7px;

  font-size: 10px;
}

.connectFourChallengeButton {
  min-height: 42px;

  padding: 0 15px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border-radius: 10px;

  border:
    1px solid #713747;

  background:
    linear-gradient(
      135deg,
      #5a1d31,
      #31111d
    );

  color: #ff9caf;

  font-size: 10px;

  font-weight: 900;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.connectFourChallengeButton:hover:not(:disabled) {
  transform:
    translateY(-2px);

  border-color:
    #ba526d;

  box-shadow:
    0 8px 25px
    rgba(
      225,
      62,
      100,
      0.16
    );
}

.connectFourChallengeButton:disabled {
  opacity: 0.55;

  cursor: not-allowed;
}

.challengeButtonMessage {
  color: #9991a4 !important;

  font-size: 9px !important;

  line-height: 1.4;

  max-width: 290px;

  text-align: right;
}


/* CONNECT FOUR POPUP ICON */

.connectFourNotificationIcon {
  background:
    linear-gradient(
      135deg,
      #ff526f,
      #a71d3d
    );

  box-shadow:
    0 8px 30px
    rgba(
      255,
      66,
      100,
      0.25
    );
}


@media (max-width: 650px) {
  .profileChallengeButtons {
    flex-direction: column;
  }

  .profileChallengeGame,
  .connectFourChallengeButton {
    width: 100%;
  }

  .challengeButtonMessage,
  .challengeButtonTitle {
    text-align: left !important;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/effects.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ======================================
   SKILLR SITE EFFECTS
====================================== */


/* ======================================
   PAGE ENTRANCE
====================================== */

main {
  animation:
    skillrPageEnter
    0.42s
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}

.navbar {
  animation:
    skillrNavEnter
    0.42s
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}


/* ======================================
   LOGO
====================================== */

.brand {
  position: relative;

  transition:
    transform
      0.2s ease,
    filter
      0.2s ease;
}

.brand:hover {
  transform:
    translateY(
      -1px
    )
    scale(
      1.025
    );

  filter:
    drop-shadow(
      0 0 12px
      rgba(
        138,
        92,
        255,
        0.35
      )
    );
}


/* ======================================
   NAV LINKS
====================================== */

.navLinks a {
  position: relative;
}

.navLinks a::after {
  content: "";

  position:
    absolute;

  left: 50%;

  right: 50%;

  bottom:
    -8px;

  height:
    2px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #7b47ff,
      #be8cff
    );

  opacity:
    0;

  transition:
    left
      0.18s ease,
    right
      0.18s ease,
    opacity
      0.18s ease;
}

.navLinks a:hover::after {
  left:
    0;

  right:
    0;

  opacity:
    1;
}


/* ======================================
   BUTTONS
====================================== */

.primaryButton,
.secondaryButton,
.resignButton,
.userBadge {
  position:
    relative;

  overflow:
    hidden;
}

.primaryButton,
.secondaryButton,
.resignButton {
  transition:
    transform
      0.16s ease,
    filter
      0.16s ease,
    box-shadow
      0.16s ease;
}

.primaryButton::after,
.secondaryButton::after {
  content: "";

  position:
    absolute;

  width:
    42%;

  height:
    180%;

  top:
    -40%;

  left:
    -65%;

  transform:
    rotate(
      18deg
    );

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.16
      ),
      transparent
    );

  transition:
    left
      0.42s ease;

  pointer-events:
    none;
}

.primaryButton:hover::after,
.secondaryButton:hover::after {
  left:
    125%;
}

.primaryButton:hover:not(:disabled),
.secondaryButton:hover:not(:disabled) {
  filter:
    brightness(
      1.08
    );
}

.primaryButton:active:not(:disabled),
.secondaryButton:active:not(:disabled),
.resignButton:active:not(:disabled) {
  transform:
    translateY(
      1px
    )
    scale(
      0.975
    );
}


/* ======================================
   HERO
====================================== */

.hero h1 {
  animation:
    skillrHeroTitle
    0.6s
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}

.hero p {
  animation:
    skillrSoftEnter
    0.65s ease
    0.08s
    both;
}

.heroButtons {
  animation:
    skillrSoftEnter
    0.65s ease
    0.14s
    both;
}

.heroBadge {
  animation:
    skillrBadgeFloat
    2.6s
    ease-in-out
    infinite alternate;
}

.heroGlow {
  animation:
    skillrHeroGlow
    5s
    ease-in-out
    infinite alternate;
}


/* ======================================
   GAME CARDS
====================================== */

.gameCard {
  position:
    relative;

  overflow:
    hidden;

  transition:
    transform
      0.28s
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ),
    border-color
      0.28s ease,
    box-shadow
      0.28s ease;

  animation:
    skillrCardEnter
    0.55s
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}

.gameCard::before {
  content: "";

  position:
    absolute;

  width:
    180px;

  height:
    180px;

  right:
    -100px;

  top:
    -110px;

  border-radius:
    50%;

  background:
    rgba(
      132,
      80,
      255,
      0.14
    );

  filter:
    blur(
      18px
    );

  transition:
    transform
      0.45s ease,
    opacity
      0.45s ease;

  pointer-events:
    none;
}

.gameCard:nth-child(2) {
  animation-delay:
    0.05s;
}

.gameCard:nth-child(3) {
  animation-delay:
    0.1s;
}

.gameCard:nth-child(4) {
  animation-delay:
    0.15s;
}

.gameCard:hover {
  transform:
    translateY(
      -7px
    )
    scale(
      1.008
    );

  border-color:
    #7358a2;

  box-shadow:
    0 20px 55px
      rgba(
        0,
        0,
        0,
        0.32
      ),
    0 0 32px
      rgba(
        116,
        70,
        255,
        0.11
      );
}

.gameCard:hover::before {
  transform:
    translate(
      -24px,
      24px
    )
    scale(
      1.25
    );

  opacity:
    1;
}


/* ======================================
   GAME ICON
====================================== */

.gameIcon {
  position:
    relative;

  z-index:
    1;

  transition:
    transform
      0.32s
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ),
    box-shadow
      0.32s ease;
}

.gameCard:hover .gameIcon {
  transform:
    translateY(
      -3px
    )
    rotate(
      -3deg
    )
    scale(
      1.08
    );

  box-shadow:
    0 12px 30px
    rgba(
      123,
      71,
      255,
      0.2
    );
}


/* ======================================
   STATS
====================================== */

.stat,
.rankPanel,
.walletPanel {
  animation:
    skillrSoftEnter
    0.55s
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}

.stat strong {
  transition:
    transform
      0.2s ease,
    color
      0.2s ease;
}

.stat:hover strong {
  transform:
    scale(
      1.05
    );

  color:
    #bfa8ff;
}


/* ======================================
   ONLINE DOTS
====================================== */

.searchingDot,
.onlineDot,
.presenceOnline::before {
  animation:
    skillrPulseGlow
    1.25s
    ease-in-out
    infinite alternate;
}


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

.chessBoard {
  transition:
    transform
      0.28s ease,
    box-shadow
      0.28s ease;
}

.chessBoard:hover {
  transform:
    translateY(
      -2px
    );

  box-shadow:
    0 30px 90px
      rgba(
        0,
        0,
        0,
        0.44
      ),
    0 0 38px
      rgba(
        132,
        80,
        255,
        0.1
      );
}

.chessSquare {
  transition:
    filter
      0.12s ease,
    background
      0.12s ease,
    box-shadow
      0.12s ease,
    transform
      0.1s ease;
}

.chessSquare:hover {
  filter:
    brightness(
      1.06
    );
}

.chessSquare:active {
  transform:
    scale(
      0.965
    );
}


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

.chessPiece {
  transition:
    transform
      0.15s ease,
    filter
      0.15s ease;
}

.chessSquare:hover
.chessPiece {
  transform:
    translateY(
      -2px
    )
    scale(
      1.045
    );

  filter:
    drop-shadow(
      0 5px 7px
      rgba(
        0,
        0,
        0,
        0.2
      )
    );
}


/* ======================================
   LEGAL MOVE DOT
====================================== */

.moveDot {
  animation:
    skillrMoveDotPulse
    0.9s
    ease-in-out
    infinite alternate;
}


/* ======================================
   CONNECT FOUR
====================================== */

.connectFourBoard {
  transition:
    transform
      0.3s ease,
    box-shadow
      0.3s ease;

  animation:
    skillrBoardGlow
    5s
    ease-in-out
    infinite alternate;
}

.connectFourBoard:hover {
  transform:
    translateY(
      -2px
    );

  box-shadow:
    0 38px 110px
      rgba(
        0,
        0,
        0,
        0.55
      ),
    0 0 75px
      rgba(
        109,
        67,
        210,
        0.25
      );
}

.connectFourColumn {
  transition:
    transform
      0.12s ease,
    filter
      0.12s ease;
}

.connectFourColumn:hover:not(:disabled) {
  filter:
    brightness(
      1.08
    );
}

.connectFourColumn:active:not(:disabled) {
  transform:
    translateY(
      1px
    )
    scale(
      0.98
    );
}

.connectFourRed > span,
.connectFourYellow > span {
  animation-duration:
    0.34s;

  animation-timing-function:
    cubic-bezier(
      0.2,
      0.9,
      0.2,
      1.2
    );
}


/* ======================================
   LEADERBOARD + HISTORY
====================================== */

.leaderboardRow,
.historyMatch {
  animation:
    skillrRowEnter
    0.38s ease
    both;

  transition:
    transform
      0.18s ease,
    background
      0.18s ease,
    border-color
      0.18s ease;
}

.leaderboardRow:hover,
.historyMatch:hover {
  transform:
    translateX(
      4px
    );
}


/* ======================================
   RESULT SCREEN
====================================== */

.resultOverlay {
  animation:
    skillrOverlayFade
    0.24s
    ease-out
    both;
}

.resultCard {
  animation:
    skillrResultPop
    0.48s
    cubic-bezier(
      0.18,
      0.9,
      0.28,
      1.18
    )
    both;
}

.resultVictory {
  animation:
    skillrVictoryGlow
    1.5s
    ease-in-out
    infinite alternate;
}

.resultDefeat {
  animation:
    skillrDefeatPulse
    1.7s
    ease-in-out
    infinite alternate;
}


/* ======================================
   CHALLENGE NOTIFICATION
====================================== */

.challengeNotification {
  animation:
    challengeSlideIn
      0.34s
      cubic-bezier(
        0.2,
        0.9,
        0.2,
        1.12
      ),

    skillrChallengeGlow
      2s
      ease-in-out
      infinite alternate;
}

.challengeNotificationIcon {
  animation:
    skillrChallengeIcon
    1.8s
    ease-in-out
    infinite;
}


/* ======================================
   SOUND TOGGLE
====================================== */

.siteSoundToggle {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    999999;

  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    9px 12px;

  border:
    1px solid
    #3b304b;

  border-radius:
    12px;

  background:
    rgba(
      17,
      13,
      24,
      0.88
    );

  color:
    #ece7f8;

  cursor:
    pointer;

  box-shadow:
    0 12px 35px
      rgba(
        0,
        0,
        0,
        0.35
      ),

    0 0 24px
      rgba(
        124,
        76,
        255,
        0.1
      );

  -webkit-backdrop-filter:
    blur(
      14px
    );

          backdrop-filter:
    blur(
      14px
    );

  transition:
    transform
      0.18s ease,
    border-color
      0.18s ease,
    background
      0.18s ease,
    opacity
      0.18s ease;
}

.siteSoundToggle:hover {
  transform:
    translateY(
      -2px
    )
    scale(
      1.025
    );

  border-color:
    #7656a6;

  background:
    rgba(
      29,
      22,
      40,
      0.96
    );
}

.siteSoundToggle:active {
  transform:
    scale(
      0.96
    );
}

.siteSoundToggle span {
  font-size:
    15px;
}

.siteSoundToggle b {
  font-size:
    9px;

  letter-spacing:
    0.8px;
}

.siteSoundToggle.soundOff {
  opacity:
    0.68;
}


/* ======================================
   KEYFRAMES
====================================== */

@keyframes skillrPageEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        7px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes skillrNavEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        -8px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes skillrHeroTitle {
  from {
    opacity:
      0;

    transform:
      translateY(
        18px
      )
      scale(
        0.98
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


@keyframes skillrSoftEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        9px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes skillrCardEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        14px
      )
      scale(
        0.985
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


@keyframes skillrBadgeFloat {
  from {
    transform:
      translateY(
        0
      );
  }

  to {
    transform:
      translateY(
        -4px
      );
  }
}


@keyframes skillrHeroGlow {
  from {
    opacity:
      0.7;

    transform:
      scale(
        0.96
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1.05
      );
  }
}


@keyframes skillrPulseGlow {
  from {
    opacity:
      0.55;

    transform:
      scale(
        0.9
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1.12
      );
  }
}


@keyframes skillrMoveDotPulse {
  from {
    transform:
      scale(
        0.82
      );

    opacity:
      0.65;
  }

  to {
    transform:
      scale(
        1.08
      );

    opacity:
      1;
  }
}


@keyframes skillrBoardGlow {
  from {
    filter:
      saturate(
        0.98
      )
      brightness(
        0.99
      );
  }

  to {
    filter:
      saturate(
        1.05
      )
      brightness(
        1.03
      );
  }
}


@keyframes skillrRowEnter {
  from {
    opacity:
      0;

    transform:
      translateX(
        -7px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        0
      );
  }
}


@keyframes skillrOverlayFade {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes skillrResultPop {
  from {
    opacity:
      0;

    transform:
      translateY(
        18px
      )
      scale(
        0.93
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


@keyframes skillrVictoryGlow {
  from {
    text-shadow:
      0 0 0
      rgba(
        138,
        255,
        173,
        0
      );
  }

  to {
    text-shadow:
      0 0 28px
      rgba(
        138,
        255,
        173,
        0.35
      );
  }
}


@keyframes skillrDefeatPulse {
  from {
    opacity:
      0.88;
  }

  to {
    opacity:
      1;
  }
}


@keyframes skillrChallengeGlow {
  from {
    box-shadow:
      0 25px 80px
        rgba(
          0,
          0,
          0,
          0.65
        ),

      0 0 35px
        rgba(
          128,
          84,
          255,
          0.1
        );
  }

  to {
    box-shadow:
      0 25px 80px
        rgba(
          0,
          0,
          0,
          0.65
        ),

      0 0 55px
        rgba(
          128,
          84,
          255,
          0.23
        );
  }
}


@keyframes skillrChallengeIcon {
  0%,
  100% {
    transform:
      rotate(
        0deg
      )
      scale(
        1
      );
  }

  50% {
    transform:
      rotate(
        -4deg
      )
      scale(
        1.05
      );
  }
}


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

@media (
  max-width:
    700px
) {
  .siteSoundToggle {
    right:
      10px;

    bottom:
      10px;

    min-width:
      42px;

    padding:
      9px 10px;
  }

  .siteSoundToggle b {
    display:
      none;
  }

  .gameCard:hover,
  .leaderboardRow:hover,
  .historyMatch:hover,
  .connectFourBoard:hover,
  .chessBoard:hover {
    transform:
      none;
  }
}


/* ======================================
   ACCESSIBILITY
====================================== */

@media (
  prefers-reduced-motion:
    reduce
) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }
}