@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673tpRgQct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673trRgAct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673toPgAct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673tpRgAct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673tpjgAct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673tqPhwct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673tq2hwct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673trRhwct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwAs572Xtc6ZYQws9YVwnNDZpDyNjGolS673tr4hwct.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuFpi5ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymulpm5ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuSJm5ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuFpm5ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuJJm5ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuyJ65ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymu8Z65ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymulp65ww.ttf) format('truetype');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuv565ww.ttf) format('truetype');
}
@font-face {
  font-family: 'font';
  src: url('../fonts/font.eot?t9g0q4');
  src: url('../fonts/font.eot?t9g0q4#iefix') format('embedded-opentype'), url('../fonts/font.woff2?t9g0q4') format('woff2'), url('../fonts/font.ttf?t9g0q4') format('truetype'), url('../fonts/font.woff?t9g0q4') format('woff'), url('../fonts/font.svg?t9g0q4#font') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'font' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-play:before {
  content: "\f04b";
}
/* Background color utility classes */
.bg-green {
  background-color: #DDFF33;
}
.bg-orange {
  background-color: #FFB700;
}
.bg-black {
  background-color: #262833;
}
.bg-purple {
  background-color: #8F00FF;
}
.bg-gray {
  background-color: #D1D2D4;
}
/* Grayscale utility classes */
.grayscale-100 {
  filter: grayscale(100%);
}
.grayscale-75 {
  filter: grayscale(75%);
}
.grayscale-50 {
  filter: grayscale(50%);
}
.grayscale-25 {
  filter: grayscale(25%);
}
.grayscale-0 {
  filter: grayscale(0%);
}
.bg-gradient-green {
  text-shadow: 0px 1px 3px #DDFF33;
}
.bg-gradient-orange {
  text-shadow: 0px 1px 3px #FFB700;
}
.bg-gradient-black {
  text-shadow: 0px 1px 3px #262833;
}
.bg-gradient-purple {
  text-shadow: 0px 1px 3px #8F00FF;
}
.bg-gradient-gray {
  text-shadow: 0px 1px 3px #D1D2D4;
}
/* GLOBAL LAYOUT */
body {
  min-height: 100vh;
  margin: 0;
  background: #242630;
  font-family: "Public Sans", sans-serif, serif;
  display: flex;
  align-items: center;
}
/* MAIN CONTENT WRAPPER */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.content .sub-content {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: none;
}
.content .sub-content.active {
  display: flex;
}
.content .sub-content .control-buttons {
  display: flex;
  justify-content: center;
  padding: 1rem;
  gap: 0.5rem;
}
.content .sub-content .control-buttons .control-button {
  padding: clamp(0.75rem, 1.5vw, 1.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  font-weight: bold;
  border-radius: clamp(10px, 2vw, 20px);
  background-color: #8F00FF;
  color: white;
  cursor: pointer;
  border: none;
  font-size: clamp(1rem, 2vw, 2rem);
}
.content .sub-content .control-buttons .control-button.animation-button {
  background-color: #DDFF33;
  text-shadow: 0px 1px 3px #262833;
  color: white;
}
.content .sub-content .slider {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .sub-content .slider__slide {
  height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
.content .sub-content .slider__slide.active {
  overflow: visible;
  height: 100%;
  padding: 1rem;
}
/* AUTH BUTTON */
.auth-button {
  padding: 2rem 4rem;
  cursor: pointer;
  background-color: #8f00ff;
  border-radius: 1rem;
  border: none;
  color: white;
  font-weight: bold;
  font-family: "Public Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  /* Icon inside the button */
}
.auth-button .icon {
  width: 4rem;
  margin-right: 1.5rem;
}
/* GRID WRAPPER */
.puzzle-grid {
  --grid-cols: 16;
  --grid-rows: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: 0.2rem;
  box-sizing: border-box;
  max-width: calc(var(--grid-cols) * clamp(40px, 6vw, 160px) + (0.2rem * (var(--grid-cols) - 1)));
  max-height: calc(var(--grid-rows) * clamp(40px, 6vw, 160px) + (0.2rem * (var(--grid-rows) - 1)));
}
/* PUZZLE TILE */
.puzzle-tile {
  width: clamp(40px, 6vw, 160px);
  height: clamp(40px, 6vw, 160px);
  position: relative;
  transition: all 0.3s ease;
  /* -------------------------
     Hover State
     ------------------------- */
}
.puzzle-tile .tile-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  /* -------------------------
     Main Content Area
     ------------------------- */
}
.puzzle-tile .tile-wrapper .tile-wrapper-background {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
}
.puzzle-tile .tile-wrapper .main-content {
  height: calc(100% - clamp(5px, 0.8vw, 20px) / 3);
  width: calc(100% - clamp(5px, 0.8vw, 20px) / 3);
  font-family: "Roboto Light", serif;
  color: white;
  font-size: 1.4rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  position: absolute;
  top: calc(clamp(5px, 0.8vw, 20px) / 6);
  left: calc(clamp(5px, 0.8vw, 20px) / 6);
  overflow: visible;
  z-index: 3;
  /* Progress bar */
}
.puzzle-tile .tile-wrapper .main-content.unactive {
  background-color: #D1D2D4;
}
.puzzle-tile .tile-wrapper .main-content .tile-background {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.puzzle-tile .tile-wrapper .main-content .tile-background.no-picture {
  width: calc(80% - 1rem);
  height: calc(80% - 1rem);
  background-size: 100%;
}
.puzzle-tile .tile-wrapper .main-content .tile-background.unactive {
  background-image: unset;
}
.puzzle-tile .tile-wrapper .main-content .tile-category {
  font-family: "Public Sans", sans-serif, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}
.puzzle-tile .tile-wrapper .main-content .progressBar-block {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  height: 0.5rem;
  width: calc(100% - 1rem);
  z-index: 3;
  box-shadow: 0px 10px 49px 0px rgba(255, 255, 255, 0.75);
  /* Inner bar with different width and color based on progress percentage */
}
.puzzle-tile .tile-wrapper .main-content .progressBar-block .progressBar {
  height: 100%;
  background-color: #8BBD00;
  border-radius: 0.5rem;
}
.puzzle-tile .tile-wrapper .main-content .progressBar-block .progressBar-0 {
  width: 0;
}
.puzzle-tile .tile-wrapper .main-content .progressBar-block .progressBar-25 {
  width: 25%;
  background-color: #FF6655;
}
.puzzle-tile .tile-wrapper .main-content .progressBar-block .progressBar-50 {
  width: 50%;
  background-color: #FFEE55;
}
.puzzle-tile .tile-wrapper .main-content .progressBar-block .progressBar-75 {
  width: 75%;
  background-color: #CCFF55;
}
.puzzle-tile .tile-wrapper .add-content {
  position: absolute;
  left: 0;
  top: 0;
  background-color: white;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 1;
  transition: all 0.5s ease;
  opacity: 0;
  visibility: hidden;
}
.puzzle-tile .tile-wrapper .add-content .tile-goal {
  font-family: "Public Sans", sans-serif, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  height: 100%;
}
.puzzle-tile:hover,
.puzzle-tile.active {
  transform: scale(2);
  z-index: 1000 !important;
  /* Position adjustments for different tile edge/corner types */
  /* Hide cut-outs and tabs when hovered */
}
.puzzle-tile:hover .add-content,
.puzzle-tile.active .add-content {
  opacity: 1;
  visibility: visible;
}
.puzzle-tile:hover .add-content .tile-goal,
.puzzle-tile.active .add-content .tile-goal {
  font-size: 1rem;
}
.puzzle-tile:hover .add-content.to-right,
.puzzle-tile.active .add-content.to-right {
  left: 90%;
  width: 200%;
  padding: 0.5rem 0.5rem 0.5rem calc(10% + 0.5rem);
}
.puzzle-tile:hover .add-content.to-left,
.puzzle-tile.active .add-content.to-left {
  left: -190%;
  width: 200%;
  padding: 0.5rem calc(10% + 0.5rem) 0.5rem 0.5rem;
}
.puzzle-tile:hover.top,
.puzzle-tile.active.top {
  transform: translate(0, 50%) scale(2);
}
.puzzle-tile:hover.bottom,
.puzzle-tile.active.bottom {
  transform: translate(0, -100%) scale(2);
}
.puzzle-tile:hover.left,
.puzzle-tile.active.left {
  transform: translate(50%, 0) scale(2);
}
.puzzle-tile:hover.right,
.puzzle-tile.active.right {
  transform: translate(-50%, 0) scale(2);
}
.puzzle-tile:hover.top-left,
.puzzle-tile.active.top-left {
  transform: translate(50%, 50%) scale(2);
}
.puzzle-tile:hover.top-right,
.puzzle-tile.active.top-right {
  transform: translate(-50%, 50%) scale(2);
}
.puzzle-tile:hover.bottom-left,
.puzzle-tile.active.bottom-left {
  transform: translate(50%, -100%) scale(2);
}
.puzzle-tile:hover.right-bottom,
.puzzle-tile.active.right-bottom {
  transform: translate(-50%, -100%) scale(2);
}
.puzzle-tile:hover .cut-outs,
.puzzle-tile.active .cut-outs,
.puzzle-tile:hover .inside-tabs,
.puzzle-tile.active .inside-tabs {
  opacity: 0;
  visibility: hidden;
  transition: all 0s ease;
}
.puzzle-tile.active {
  transition: all 0.8s ease;
}
/* LAYER WRAPPERS */
.cut-outs,
.inside-tabs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  transition: all 1s ease;
  z-index: 4;
  height: 100%;
  width: 100%;
}
.cut-outs .tile-content,
.inside-tabs .tile-content {
  position: relative;
  height: 100%;
  width: 100%;
}
.cut-outs.cut-outs .tile-content,
.inside-tabs.cut-outs .tile-content {
  overflow: hidden;
}
/* SHAPE BASE */
.right-cut-out,
.left-cut-out,
.top-cut-out,
.bottom-cut-out,
.right-inside-tab,
.left-inside-tab,
.top-inside-tab,
.bottom-inside-tab {
  position: absolute;
  height: calc(clamp(5px, 0.8vw, 20px) * 2);
  width: calc(clamp(5px, 0.8vw, 20px) * 2);
  border-radius: 50%;
  pointer-events: none;
}
.right-inside-tab,
.left-inside-tab,
.top-inside-tab,
.bottom-inside-tab {
  height: calc(clamp(4px, 0.7vw, 17px) * 2);
  width: calc(clamp(4px, 0.7vw, 17px) * 2);
}
/* CUT-OUTS */
.right-cut-out {
  right: calc(-1 * clamp(5px, 0.8vw, 20px) - 0.2rem);
  top: 50%;
  transform: translateY(-50%);
  background-color: #242630;
}
.left-cut-out {
  left: calc(-1 * clamp(5px, 0.8vw, 20px) - 0.2rem);
  top: 50%;
  transform: translateY(-50%);
  background-color: #242630;
}
.top-cut-out {
  top: calc(-1 * clamp(5px, 0.8vw, 20px) - 0.2rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: #242630;
}
.bottom-cut-out {
  bottom: calc(-1 * clamp(5px, 0.8vw, 20px) - 0.2rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: #242630;
}
/* TABS */
.right-inside-tab {
  right: calc(-1 * clamp(4px, 0.7vw, 17px) - 0.2rem);
  top: 50%;
  transform: translateY(-50%);
}
.left-inside-tab {
  left: calc(-1 * clamp(4px, 0.7vw, 17px) - 0.2rem);
  top: 50%;
  transform: translateY(-50%);
}
.top-inside-tab {
  top: calc(-1 * clamp(4px, 0.7vw, 17px) - 0.2rem);
  left: 50%;
  transform: translateX(-50%);
}
.bottom-inside-tab {
  bottom: calc(-1 * clamp(4px, 0.7vw, 17px) - 0.2rem);
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1600px) {
  .puzzle-tile .tile-wrapper .main-content .progressBar-block {
    height: 0.35rem;
  }
}
@media (max-width: 960px) {
  .puzzle-tile .tile-wrapper .main-content .progressBar-block {
    height: 0.2rem;
  }
}
/*# sourceMappingURL=styles.css.map */