@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
/* PORTAL CUSTOM CSS */
#puzzle-portal .portal-main h1, .portal-main h2 { 
  font-family: 'RobotoCondensed-Bold', sans-serif!important;
}

#puzzle-portal .portal-main {
  font-family: "Roboto", sans-serif!important;
}

#puzzle-portal .portal-main .game-card__button-play {
  font-family: "Roboto", sans-serif!important;
}

#puzzle-portal .portal-main .featured-games {
  background-color: #fff; /* Featured games - mobile background */
}

#puzzle-portal .portal-main .featured-games .game-card {
  background-color: #ededed; /* Featured games - card background */
}

#puzzle-portal .portal-main .highlighted-games {
  background-color: #fff; /* Highlighted games - mobile background */
}

#puzzle-portal .portal-main .highlighted-games .game-card {
  background-color: #ededed; /* Highlighted games - card background */
}

#puzzle-portal .portal-main .main-games {
  background-color: #ededed; /* Main games - mobile background */
}

#puzzle-portal .portal-main .main-games .game-card {
  background-color: #fff; /* Main games - card background */
}

#puzzle-portal .portal-main .game-card__button-play {
  background-color: #ffef42; /* Color 4 */
  color: #191717; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .game-card--disabled .game-card__button-play {
  background-color: #f49317; /* Color 1 */
  color: #191717; /* Color 1 - inner (fonts etc)*/
}

#puzzle-portal .portal-main .archive-game-type-panel {
  background-color: #ededed; /* Archive - panels/cards background */
}

#puzzle-portal .portal-main .archive-game-type-panel--selected {
  background-color: #ffef42; /* Color 4 */
}

#puzzle-portal .portal-main .archive-game-type-panel--selected svg {
  fill: #191717; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .archive-game-type-panel--selected h3 {
  color: #191717; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .archive-game-card__button-play {
  background-color: #ffef42; /* Color 4 */
  color: #191717; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .game-card__new {
  color: #f49317; /* Color 1 */
}

#puzzle-portal .portal-main .archive-game-card {
  background-color: #ededed; /* Archive - panels/cards background */
}

#puzzle-portal .portal-main .player .player__close {
  color: #ffef42; /* Color 4 */
}

#puzzle-portal .portal-main .player .player__close:visited {
  color: #ffef42; /* Color 4 */
}

@media screen and (min-width: 750px) {
  #puzzle-portal .portal-main .featured-games {
    background-color: #ededed; /* Featured games - desktop full width background */
  }

  #puzzle-portal .portal-main .featured-games .game-section-inner {
    background-color: transparent; /* Featured games - desktop inner background */
  }

  #puzzle-portal .portal-main .highlighted-games {
    background-color: #fff; /* Highlighted games - desktop full width background */
  }

  #puzzle-portal .portal-main .highlighted-games .game-section-inner {
    background-color: transparent; /* Highlighted games - desktop inner background */
  }

  #puzzle-portal .portal-main .main-games {
    background-color: #ededed; /* Main games - desktop full width background */
  }

  #puzzle-portal .portal-main .main-games .game-section-inner {
    background-color: transparent; /* Main games - desktop inner background */
  }

  #puzzle-portal .portal-main .archive-menu {
    background-color: #ededed; /* Archive - panels/cards background */
  }

  #puzzle-portal .portal-main .archive-menu__item--selected {
    background-color: #ffef42; /* Color 4 */
    color: #191717; /* Color 4 - inner (fonts etc) */
  }

  #puzzle-portal .portal-main .archive-game-type-panel--selected {
    background-color: #ededed; /* Archive - panels/cards background */
  }

  #puzzle-portal .portal-main .archive-game-type-panel--selected h3 {
    color: #191717;
  }
}

/* PLAYER CUSTOM CSS */

/* Modal buttons */
#puzzle-portal .player .button {
  background-color: #ffef42; /* Color 4 */
  color: #191717; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .player .modal__actions .modal__button--link {
  background-color: transparent; 
  color: #222; 
}

/* Carousel bar - Clue bar will be deprecated. */
#puzzle-portal .player .clue-bar {
  background-color: #0ea4b1; /* Color 2 */
}

#puzzle-portal .player .clue-bar__nav svg {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .clue-bar__selected-clue {
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .carousel-bar {
  background-color: #0ea4b1; /* Color 2 */
}

#puzzle-portal .player .carousel-bar__nav svg {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .carousel-bar__text {
  color: #fff; /* Color 2 - inner (fonts etc) */
}

/* Action bar */
#puzzle-portal .player .action-bar {
  background-color: #ededed; /* Action bar background */
}

#puzzle-portal .player.desktop .action-bar {
  background-color: transparent;
}

#puzzle-portal .player .action-bar__button svg {
  fill: #171717; /* Color 3 */
}

/* Grid cells */
#puzzle-portal .player .grid-cell.grid-cell--selected .grid-cell__rectangle {
  fill: #0ea4b1; /* Color 2 */
}

#puzzle-portal .player .grid-cell.grid-cell--in-selected-clue .grid-cell__rectangle {
  fill: #b1d9dd; /* Color 2 at 50% */
}

#puzzle-portal .player .grid-cell.grid-cell--in-selected-category:not(.grid-cell--initial) .grid-cell__rectangle {
  fill: #b1d9dd; /* Color 2 at 50% */
}

#puzzle-portal .player .grid-cell--selected .grid-cell__text {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .grid-cell--selected .grid-cell__label {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .grid-cell__note {
  fill: #0ea4b1; /* Color 2 */
}

#puzzle-portal .player .grid-cell.grid-cell--selected .grid-cell__note {
  fill: #fff;
}

#puzzle-portal .sudoku .grid-cell--color-1.grid-cell--selected .grid-cell__rectangle {
  fill: #0ea4b1; /* Color 2 */
}

#puzzle-portal .sudoku .grid-cell--color-2.grid-cell--selected .grid-cell__rectangle {
  fill: #0ea4b1; /* Color 2 */
}

#puzzle-portal .player .grid-cell.grid-cell--revealed .grid-cell__visual-feedback {
  fill: #ee9000;
}

#puzzle-portal .player .grid-cell.grid-cell--incorrect .grid-cell__visual-feedback {
  fill: #f23c39;
}

#puzzle-portal .player .grid-cell.grid-cell--correct .grid-cell__visual-feedback {
  fill: #28c301;
}

/* Clues */
#puzzle-portal .player .clues__item--selected {
  background-color: #0ea4b1; /* Color 2 */
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .clues__item--selected-opposite .clues__item-label span {
  background-color: #b1d9dd; /* Color 2 at 50% */
}

/* Result word */
#puzzle-portal .player .result-word__cell--with-active-result-word {
  background-color: #b1d9dd; /* Color 2 at 50% */
}

#puzzle-portal .player .result-word__cell--with-active-result-word--selected {
  background-color: #0ea4b1; /* Color 2 */
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .result-word__cell--selected {
  background-color: #b1d9dd; /* Color 2 at 50% */
}

#puzzle-portal .player .result-word__cell--prizepuzzle {
  background-color: #ec990f;
}

/* Attention color */
#puzzle-portal .filippine .grid-cell__rectangle-result,
#puzzle-portal .filippine-mini .grid-cell__rectangle-result,
#puzzle-portal .filippine-crypto .grid-cell__rectangle-result {
  fill: #ec990f;
}

/* Arrowword */
#puzzle-portal .arrowword .grid-cluecell .grid-cell__rectangle {
  fill: #f3f3f9;
}

#puzzle-portal .arrowword .grid-cluecell__rectangle-background-selected {
  fill: #ee9000;
}

/* Sudoku/tectonic */
#puzzle-portal .sudoku .keyboard__button-inner--active,
#puzzle-portal .tectonic .keyboard__button-inner--active {
  background-color: #0ea4b1; /* Color 2 */
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .sudoku .grid-cell--color-1 .grid-cell__rectangle {
  fill: #fff;
}
#puzzle-portal .sudoku .grid-cell--color-2 .grid-cell__rectangle {
  fill: #ecf3f5;
}

#puzzle-portal .tectonic .grid-cell--color-1 .grid-cell__rectangle {
  fill: #d8edba;
}
#puzzle-portal .tectonic .grid-cell--color-2 .grid-cell__rectangle {
  fill: #fbdeb2;
}
#puzzle-portal .tectonic .grid-cell--color-3 .grid-cell__rectangle {
  fill: #b2d3f6;
}
#puzzle-portal .tectonic .grid-cell--color-4 .grid-cell__rectangle {
  fill: #edb2c0;
}
#puzzle-portal .tectonic .grid-cell--color-5 .grid-cell__rectangle {
  fill: #bc9af5;
}

#puzzle-portal .sudoku_chaos .grid-cell--color-1 .grid-cell__rectangle {
  fill: #f49a89;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-2 .grid-cell__rectangle {
  fill: #cfc5af;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-3 .grid-cell__rectangle {
  fill: #ffee90;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-4 .grid-cell__rectangle {
  fill: #a6e8d8;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-5 .grid-cell__rectangle {
  fill: #d8edba;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-6 .grid-cell__rectangle {
  fill: #fbdeb2;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-7 .grid-cell__rectangle {
  fill: #b2d3f6;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-8 .grid-cell__rectangle {
  fill: #edb2c0;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-9 .grid-cell__rectangle {
  fill: #bc9af5;
}

#puzzle-portal .tectonic .grid-cell--color-1.grid-cell--selected .grid-cell__rectangle {
  fill: #79ae2d;
}
#puzzle-portal .tectonic .grid-cell--color-2.grid-cell--selected .grid-cell__rectangle {
  fill: #d6850b;
}
#puzzle-portal .tectonic .grid-cell--color-3.grid-cell--selected .grid-cell__rectangle {
  fill: #176bc5;
}
#puzzle-portal .tectonic .grid-cell--color-4.grid-cell--selected .grid-cell__rectangle {
  fill: #ab2847;
}
#puzzle-portal .tectonic .grid-cell--color-5.grid-cell--selected .grid-cell__rectangle {
  fill: #4d12b1;
}

#puzzle-portal .sudoku_chaos .grid-cell--color-1.grid-cell--selected .grid-cell__rectangle {
  fill: #a2260f;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-2.grid-cell--selected .grid-cell__rectangle {
  fill: #6f6143;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-3.grid-cell--selected .grid-cell__rectangle {
  fill: #c3a500;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-4.grid-cell--selected .grid-cell__rectangle {
  fill: #289a7e;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-5.grid-cell--selected .grid-cell__rectangle {
  fill: #79ae2d;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-6.grid-cell--selected .grid-cell__rectangle {
  fill: #d6850b;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-7.grid-cell--selected .grid-cell__rectangle {
  fill: #176bc5;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-8.grid-cell--selected .grid-cell__rectangle {
  fill: #ab2847;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-9.grid-cell--selected .grid-cell__rectangle {
  fill: #4d12b1;
}

#puzzle-portal .sudoku .grid-cell--selected .grid-cell__text,
#puzzle-portal .sudoku_chaos .grid-cell--selected .grid-cell__text,
#puzzle-portal .tectonic .grid-cell--selected .grid-cell__text {
  fill: #fff;
}

@keyframes custom-fading_completed-set-color {
  0%, 70% {
    fill: #b1d9dd;
  }
  100% {
  }
}

#puzzle-portal .player .grid-cell--in-completed-set .grid-cell__rectangle {
  animation: custom-fading_completed-set-color 1s;
}

/* Hashi */
#puzzle-portal .hashi .grid__background {
  fill: #fff;
}
#puzzle-portal .hashi.desktop .grid__background {
  fill: #ededed;
}
#puzzle-portal .hashi .grid__raster-line {
  stroke: #ddd;
}
#puzzle-portal .hashi .grid__bridge--preview {
  stroke: #ffbb95;
}
#puzzle-portal .hashi .grid__node--correct {
  fill: #e0f0d9;
  stroke: #549139;
}
#puzzle-portal .hashi .grid__node--excessive {
  fill: #ffa3a8;
  stroke: #a30009;
}

/* Wordsearch */
#puzzle-portal .wordsearch .clues {
  background-color: #0ea4b1; /* Color 2 */
}

#puzzle-portal .wordsearch .clue-item {
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .wordsearch .grid__line {
  stroke: #0ea4b1;
  stroke-opacity: 0.8;
}

/* Fitword */
#puzzle-portal .fitword .clues__block--selected {
  color: #0ea4b1; /* Color 2 */
}

#puzzle-portal .fitword .clues__title:hover {
  background-color: #b1d9dd; /* Color 2 at 50% */
}

#puzzle-portal .portal-main .game-card__button-play, 
#puzzle-portal .portal-main .archive-game-card__button-play,
#puzzle-portal .player .button {
   font-family: 'RobotoCondensed-Bold', sans-serif;
   transition: background-color 0.2s;
   text-transform: uppercase;
}

#puzzle-portal .portal-main .game-card__button-play:hover, 
#puzzle-portal .portal-main .archive-game-card__button-play:hover,
#puzzle-portal .player .button:hover {
    background-color: #edde41;
}

#puzzle-portal .wordsearch .modal__result-word-character {
    background-color: #ec6a05;
    color: #fff;
}

#puzzle-portal .wordsearch .grid-cell__result-circle circle {
    fill: #ec6a05;
}

/* desktop */

@media screen and (min-width: 750px){
    #puzzle-portal .portal-main .game-section-inner {
    width: calc(100% - 6em);
    padding: 0 3em;
  }

  #puzzle-portal .portal-main .featured-games .game-card {
    width: calc(33% - 2em);
    margin-left: auto;
    margin-right: auto;
  }

  #puzzle-portal .portal-main .featured-games .game-card__image img {

  }

  #puzzle-portal .portal-main .game-card:nth-child(3n) {
    margin-right: 0;
  }
  
  #puzzle-portal .portal-main .game-card {
    width: calc(33% - 2em);
    margin-right: 3em;
  }

  #puzzle-portal .portal-main.template-kryss .featured-games .game-card__image {
    margin-top: 3em;
  }

  #puzzle-portal .portal-main .game-cards {
    background-color: #ededed;
    margin-bottom: 2em;
  }

}

#puzzle-portal .portal-main .game-card__difficulty-sticker--1 {
   background-color: #0ea4b1;
}

#puzzle-portal .portal-main .game-card__difficulty-sticker--3 {
   background-color: #ec6a05;
}

#puzzle-portal .portal-main .game-card__difficulty-sticker--4 {
   background-color: #000;
}