@charset "UTF-8";

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

:root {
  --juniora-h: 56px;

  --board-size: min(92vw, calc(100vh - var(--juniora-h) - 40px), 450px);
  --cell-gap: calc(var(--board-size) * 0.022);
  --cell-size: calc((var(--board-size) - var(--cell-gap) * 6) / 3);
  --cell-radius: calc(var(--cell-size) * 0.14);
  --glyph-size: calc(var(--cell-size) * 0.72)
}
* {
  box-sizing: border-box
}
html,
body {
  margin: 0;
  padding: 0;
  background: #1f2330;
  color: #b6b5ca;
  font-family: var(--jn-font);
  -webkit-tap-highlight-color: transparent
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 12px calc(var(--juniora-h) + 16px);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none
}

.tic-tac-toe {
  font-family: var(--jn-font);
  height: var(--board-size);
  width: var(--board-size);
  overflow: hidden;
  position: relative;
  margin: 0 auto
}
.tic-tac-toe input[type="radio"] {
  display: none
}
.tic-tac-toe input[type="radio"]:checked + label {
  cursor: default;
  z-index: 10 !important
}

.tic-tac-toe input[type="radio"].player-1 + label:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='3' x2='17' y2='17'/><line x1='17' y1='3' x2='3' y2='17'/></svg>")
}

.tic-tac-toe input[type="radio"].player-2 + label:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='2.6'><circle cx='10' cy='10' r='7.5'/></svg>")
}
.tic-tac-toe input[type="radio"].player-1:checked + label:after,
.tic-tac-toe input[type="radio"].player-2:checked + label:after {
  opacity: 1
}
.tic-tac-toe input[type="radio"].player-1:checked + label {
  background-color: #dc685a
}
.tic-tac-toe input[type="radio"].player-2:checked + label {
  background-color: #ecaf4f
}
.tic-tac-toe input[type="radio"].turn-1 + label {
  z-index: 1
}
.tic-tac-toe input[type="radio"].turn-2 + label {
  z-index: 2
}
.tic-tac-toe input[type="radio"].turn-3 + label {
  z-index: 3
}
.tic-tac-toe input[type="radio"].turn-4 + label {
  z-index: 4
}
.tic-tac-toe input[type="radio"].turn-5 + label {
  z-index: 5
}
.tic-tac-toe input[type="radio"].turn-6 + label {
  z-index: 6
}
.tic-tac-toe input[type="radio"].turn-7 + label {
  z-index: 7
}
.tic-tac-toe input[type="radio"].turn-8 + label {
  z-index: 8
}
.tic-tac-toe input[type="radio"].turn-9 + label {
  z-index: 9
}
.tic-tac-toe input[type="radio"].turn-1 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-1:checked ~ .turn-2 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-2:checked ~ .turn-3 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-3:checked ~ .turn-4 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-4:checked ~ .turn-5 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-5:checked ~ .turn-6 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-6:checked ~ .turn-7 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-7:checked ~ .turn-8 + label {
  display: block
}
.tic-tac-toe input[type="radio"].turn-8:checked ~ .turn-9 + label {
  display: block
}

.tic-tac-toe input[type="radio"].left   + label {
  left: 0
}
.tic-tac-toe input[type="radio"].top    + label {
  top: 0
}
.tic-tac-toe input[type="radio"].middle + label {
  left: calc(var(--cell-size) + var(--cell-gap) * 2)
}
.tic-tac-toe input[type="radio"].right  + label {
  left: calc((var(--cell-size) + var(--cell-gap) * 2) * 2)
}
.tic-tac-toe input[type="radio"].center + label {
  top: calc(var(--cell-size) + var(--cell-gap) * 2)
}
.tic-tac-toe input[type="radio"].bottom + label {
  top: calc((var(--cell-size) + var(--cell-gap) * 2) * 2)
}

.tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end {
  display: block
}
.tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end > h3:before {
  content: "مساوی شد!"
}

.tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end,
.tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end,
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end,
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end,
.tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end,
.tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end,
.tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end,
.tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end {
  display: block
}
.tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end h3:before,
.tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end h3:before,
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end h3:before,
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end h3:before,
.tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end h3:before,
.tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end h3:before,
.tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end h3:before,
.tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end h3:before {
  content: "بازیکن ۱ برد!" !important
}

.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end,
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end,
.tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end,
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end,
.tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end,
.tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end,
.tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end,
.tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end {
  display: block
}
.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end h3:before,
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end h3:before,
.tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end h3:before,
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end h3:before,
.tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end h3:before,
.tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end h3:before,
.tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end h3:before,
.tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end h3:before {
  content: "بازیکن ۲ برد!" !important
}

.tic-tac-toe label {
  background-color: #78bec5;
  border-radius: var(--cell-radius);
  cursor: pointer;
  color: #fff;
  display: none;
  height: var(--cell-size);
  width: var(--cell-size);
  margin: var(--cell-gap);
  position: absolute;
  transition: background-color 0.3s;
  touch-action: manipulation
}
@media (hover: hover) {
  .tic-tac-toe label:hover {
    background-color: #3d4250
  }
  .tic-tac-toe label:hover:after {
    opacity: .4
  }
}
.tic-tac-toe label:after {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: var(--glyph-size);
  width: var(--glyph-size);
  left: 50%;
  top: 50%;
  margin: calc(var(--glyph-size) / -2) 0 0 calc(var(--glyph-size) / -2);
  opacity: 0;
  position: absolute;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2))
}

.tic-tac-toe .end {
  background: rgba(255, 255, 255, 0.92);
  bottom: var(--cell-gap);
  color: #3d4250;
  display: none;
  left: var(--cell-gap);
  right: var(--cell-gap);
  top: var(--cell-gap);
  padding-top: calc(var(--board-size) * 0.25);
  position: absolute;
  text-align: center;
  z-index: 11;
  border-radius: var(--cell-radius)
}
.tic-tac-toe .end h3 {
  font-size: clamp(22px, 6vw, 40px);
  font-weight: 300;
  margin: 0 0 24px
}
.tic-tac-toe .end a {
  background-color: #3d4250;
  border-radius: 4px;
  color: #fff;
  padding: 14px 38px;
  text-decoration: none;
  transition: background-color 0.2s;
  font-weight: 700;
  display: inline-block
}
.tic-tac-toe .end a:hover {
  background-color: #262934;
  cursor: pointer
}
.tic-tac-toe .end a:active {
  background-color: #1a1d24
}

.juniora-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--juniora-h);
  background: #292929;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 0 16px
}
.juniora-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: var(--jn-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.9
}
.juniora-logo {
  width: 28px;
  height: auto;
  display: block
}
.juniora-text {
  letter-spacing: normal
}
@media (max-width: 480px) {
  :root {
    --juniora-h: 52px
  }
  .juniora-link {
    font-size: 12.5px
  }
}

</content>
</invoke>

.juniora-overlay {
  height: var(--juniora-h)
}
.juniora-link {
  font-family: var(--jn-font);
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: normal;
  gap: 8px;
  white-space: nowrap
}
.juniora-logo {
  width: 22px;
  height: auto
}
.juniora-text {
  letter-spacing: normal
}
@media (max-height: 520px) {
  .juniora-link {
    font-size: 12px
  }
  .juniora-logo {
    width: 18px
  }
}

#jn-cursor {
  position: fixed;
  display: none;
  pointer-events: none;
  border: 3px solid var(--jn-green);
  border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(160, 231, 71, 0.2);
  z-index: 500
}

.tic-tac-toe {
  direction: ltr;
}

.mc-btn, .jump-btn, #jumpBtn, #controls button, .mc-fire {
  font-family: var(--jn-font);
  font-weight: 700;
}