body {
  margin: 0;
  padding: 0
}

:root {
  --link-text-blue: #2f80ed;
  --modal-button-blue: #2d9cdb;
  --skyscraper-blue: #2a87e9;
  --goldenrod: #f8cd05;
  --spellingbee-yellow: #f8cd05;
  --kenken-beige: #ffecd7;
  --wordmaze-cyan: #008b8b;
  --cascade-purple: #b383e4;
  --cascade-purple-light: #d4d0d8;
  --wordmorph-red: #f14e62;
  --geometro-blue: #1ca0ff;
  --bubble-up-teal: #55c1c1;
  --square-dance-green: #82ce92;
  --square-dance-peach: #f8aa9e;
  --word-cross-black: #2a3131;
  --battleships-blue: #cef6ff;
  --tiles-indigo: #054499;
  --jigsaw-brown: #bab1a7;
  --gravity-golf-green: #5e8154;
  --birds-blue: #8f608a;
  --plant-life-orange: #ce751d;
  --order-of-operations-orange: #ffb500;
  --operations-orange: #ffb500;
  --chess-puzzles-green: #29a789;
  --connections-periwinkle: #b3a7ff;
  --ring-ring-raspberry: #dd4d63
}

@keyframes cursor-blink {
  0% {
    border-color: #f8cd0500
  }

  50% {
    border-color: #f8cd0500
  }

  to {
    border-color: #f8cd05
  }
}

@keyframes pulse {
  0% {
    transform: scale(1)
  }

  50% {
    z-index: 10;
    transform: scale(1.3)
  }

  to {
    transform: scale(1)
  }
}

@keyframes blink {
  to {
    opacity: 1
  }
}

@keyframes blink-red {
  50% {
    color: #000
  }

  70% {
    color: #f74d31
  }

  80% {
    color: #000
  }

  to {
    color: #f74d31
  }
}

@keyframes fill-bar {
  to {
    width: 100%
  }
}

@keyframes show-then-hide {
  0% {
    opacity: 1;
    top: 5px
  }

  to {
    opacity: 0;
    top: -5px
  }
}

@keyframes bounce {
  0% {
    opacity: .4;
    transform: translateY(.1em)
  }

  to {
    opacity: 1;
    transform: translateY(-.4em)
  }
}

@keyframes swipe-to-start {
  to {
    margin-top: -400vh
  }
}

@font-face {
  font-family: NYTMagSans;
  src: url(../fonts/magsans-normal-500.4a37b5e9.ttf);
  font-weight: 500
}

@font-face {
  font-family: NYTMagSans;
  src: url(../fonts/magsans-normal-700.9852bcb8.ttf);
  font-weight: 700
}

@font-face {
  font-family: NYTFranklinLight;
  src: url(../fonts/NYTFranklinLight.ed73aac0.otf)
}

@font-face {
  font-family: NYTFranklin;
  src: url(../fonts/NYTFranklinMedium.ab4b15b2.otf);
  font-weight: 500
}

@font-face {
  font-family: NYTFranklin;
  src: url(../fonts/franklin-normal-600.079dadf0.woff2)format("woff2"), url(../fonts/franklin-normal-600.7c86c668.woff)format("woff");
  font-weight: 600
}

@font-face {
  font-family: NYTFranklin;
  src: url(../fonts/NYTFranklinBold.0e64e745.otf);
  font-weight: 700
}

@font-face {
  font-family: NYTFranklin;
  src: url(../NYTFranklinExtraBold.77b9fc4f.otf);
  font-weight: 900
}

@font-face {
  font-family: NYTStymie;
  src: url(../NYTStymieTextExtraBold.50c2f333.otf);
  font-weight: 900
}

@font-face {
  font-family: karnak-bold-condensed;
  src: url(../fonts/NYTKarnakCondensed-Bold.cdd5cdba.otf);
  font-weight: 500
}

@font-face {
  font-family: karnakCondensedBold;
  src: url(../fonts/NYTKarnakCondensed-Bold.cdd5cdba.otf)
}

@font-face {
  font-family: karnakMedium;
  src: url(../fonts/NYTKarnak-Medium.ca971bd9.otf)
}

@font-face {
  font-family: nytFranklinMedium;
  src: url(../fonts/NYTFranklinMedium.ab4b15b2.otf);
  font-weight: 500
}

@font-face {
  font-family: magsans;
  src: url(../fonts/magsans-normal-500.4a37b5e9.ttf);
  font-weight: 500
}

@font-face {
  font-family: magsans-bold;
  src: url(../fonts/magsans-normal-700.9852bcb8.ttf);
  font-weight: 700
}

@font-face {
  font-family: franklin-extra-bold;
  src: url(../NYTFranklinExtraBold.77b9fc4f.otf);
  font-weight: 900
}

@font-face {
  font-family: magslab;
  src: url(../fonts/magslab-normal-700.c9b8a0b3.ttf);
  font-weight: 700
}

@font-face {
  font-family: karnak;
  src: url(../NYTKarnakDisplay.15812e46.otf);
  font-weight: 700
}

:root {
  --header-height: 50px
}

header {
  height: var(--header-height);
  min-height: var(--header-height);
  color: #fff;
  width: 100vw;
  max-width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw;
  display: flex
}

header h1 {
  height: 30px;
  color: #000;
  letter-spacing: -.5px;
  margin: 0;
  font-family: karnak-bold-condensed;
  font-size: 1.5em
}

header .tools {
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  display: flex
}

header .tools * {
  color: var(--link-text-blue);
  cursor: pointer;
  margin-left: 10px;
  font: 1em NYTFranklin
}

header button {
  background: #fff;
  border: none;
  outline: none;
  padding: 0
}

header button:disabled {
  color: gray;
  cursor: default
}

#concierge {
  background-color: var(--teal);
  height: 400vh;
  width: 100%;
  font-family: magsans;
  display: block
}

#concierge.swipe {
  animation: 1s swipe-to-start
}

#welcome {
  pointer-events: none;
  color: #fff;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 1.5em;
  display: flex
}

#welcome>div {
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  display: flex
}

#welcome h1 {
  text-align: center;
  margin-bottom: 15px;
  font-family: karnak-bold-condensed;
  font-size: 3em
}

#welcome p,
#welcome ul,
#welcome li,
#help-modal ul,
#help-modal li {
  font-size: 1em;
  line-height: 1.3
}

#welcome p {
  margin-top: 20px
}

#welcome ul {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 1rem
}

#welcome li~li {
  margin-top: 4px
}

#welcome a:first-of-type {
  margin-top: 35px
}

.arrow {
  height: 27px;
  width: 17px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNOC41IDMuNXYxMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPjxwYXRoIGQ9Ik0xIDlsNy41LTYuODE2TDE2IDkiLz48L2c+PC9zdmc+);
  background-repeat: no-repeat;
  margin: 15px auto 0
}

.bounce {
  animation: 1s infinite alternate bounce
}

main {
  width: 100%
}

@media (min-width:960px) {
  #concierge {
    display: none
  }
}

main.obscured,
.page.obscured {
  filter: blur(5px)
}

.modal {
  height: 100vh;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  inset: 0
}

.modal .modal-content {
  max-width: 500px;
  text-align: center;
  width: 86%;
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5em 1em;
  display: flex;
  position: relative;
  box-shadow: 0 3px 12px -1px #0000004d
}

.close-x {
  color: #000;
  width: 24px;
  height: 24px;
  background: url(../fonts/close-x.88a3b98e.svg) 50%/24px 24px no-repeat;
  position: absolute;
  top: 12px;
  right: 12px
}

.modal h1 {
  margin-bottom: 10px;
  font-family: karnak-bold-condensed;
  font-size: 2em;
  line-height: 1
}

.modal .oblong-button {
  background-color: var(--goldenrod);
  height: 40px;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  padding: .4em 1em;
  font-size: 1.5em;
  display: block
}

.modal p {
  color: #000;
  text-align: center;
  margin: 10px 0;
  font-size: 1em;
  line-height: 1.5
}

.modal p span {
  font-size: 1em
}

.modal .score {
  font-size: 2em;
  line-height: 1
}

.modal hr {
  height: 3px;
  width: 40px;
  background-color: #333;
  border: none;
  margin: 10px 0
}

.modal a {
  color: #333;
  border-bottom: 3px solid var(--goldenrod)
}

.modal-content ul {
  text-align: left;
  padding: 0 1em
}

.modal-content h2 {
  font-family: karnakCondensedBold
}

.pressable {
  margin-top: 0;
  box-shadow: 0 4px #ccc
}

.pressable:active,
.gold.pressable:active {
  position: relative;
  top: 4px;
  box-shadow: 0 0
}

.modal button {
  border-spacing: 0;
  color: #26589f;
  text-align: left;
  text-indent: 0;
  background: 0 0;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.42rem;
  text-decoration: none;
  list-style: none
}

.modal button:focus {
  outline: 0
}

.modal button[disabled=disabled],
.modal button:disabled {
  color: #999 !important;
  background-color: #f2f2f2 !important;
  top: 4px !important;
  box-shadow: 0 0 !important
}

.oblong-button {
  color: #000;
  height: 50px;
  letter-spacing: .5px;
  background-color: #fff;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  padding: .4em 1.7em;
  font-family: magslab;
  font-size: 2em;
  text-decoration: none;
  display: flex
}

.gold.pressable {
  background-color: var(--goldenrod);
  box-shadow: 0 4px #e0b70a
}

#alert-modal {
  background-color: #000c
}

.bold {
  font-family: magsans-bold
}

.close-x:hover {
  cursor: pointer
}

#hamburger {
  width: 20px;
  height: 3px;
  background-color: #000;
  border-radius: 4px;
  display: block;
  position: absolute
}

#hamburger:before {
  content: "";
  width: 20px;
  height: 3px;
  background-color: #000;
  border-radius: 4px;
  display: block;
  position: absolute;
  top: -7px
}

#hamburger:after {
  width: 20px;
  height: 3px;
  content: "";
  background-color: #000;
  border-radius: 4px;
  display: block;
  position: absolute;
  bottom: -7px
}

#nav {
  height: 45px;
  min-width: 45px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex
}

.nav-menu-container {
  justify-content: left;
  align-items: unset;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background-color: #0000;
  display: flex;
  position: absolute;
  top: 0;
  left: 0
}

#nav-menu-content-container {
  display: block
}

.nav-collapsed,
.nav-collapsed * {
  z-index: 0;
  display: none
}

#nav-menu-content {
  color: #000;
  max-width: 375px;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100% - var(--toolbar-mobile-height) - 1px);
  margin-top: calc(var(--toolbar-mobile-height) + 1px);
  background-color: #fff;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  animation: .1s linear SlideIn;
  display: flex;
  position: relative;
  overflow-y: auto;
  box-shadow: 3px 5px 5px #00000026
}

#nav-menu-content.closing {
  animation: .1s linear SlideOut
}

#nav-header {
  padding: 18px 0 0 18px
}

.nav-more-text {
  text-transform: uppercase;
  margin: 32px 0 24px;
  padding-left: 18px;
  font-family: NYTFranklin;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px
}

#nav-game-list,
#nav-nyt-list {
  color: #000;
  padding: unset;
  margin: unset;
  list-style: none
}

#nav-nyt-list {
  border-top: 1px solid #dcdcdc;
  margin-top: 5px;
  padding: 12px 0
}

.nav-item {
  height: 40px;
  justify-content: left;
  align-items: center;
  padding-left: 18px;
  font-family: NYTFranklin;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  display: flex
}

.nav-item:hover {
  background-color: #f4f4f4
}

.nav-item-icon {
  content: "";
  height: 20px;
  width: 28px;
  vertical-align: middle;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  padding-right: 8px;
  display: inline-block
}

.icon-sb {
  background-image: url(../fonts/spelling-bee.7e6c5164.svg);
  background-size: 20px
}

.icon-daily {
  background-image: url(../fonts/daily.a2422c10.svg);
  background-size: 20px
}

.icon-mini {
  background-image: url(../fonts/mini.0ce1d918.svg);
  background-size: 20px
}

.icon-wordle {
  background-image: url(../fonts/wordle.72aa0a1b.svg);
  background-size: 20px
}

.icon-digits {
  background-image: url(../fonts/digits.fb1e2c24.svg);
  background-size: 20px
}

.icon-connections {
  background-image: url(../fonts/connections.f9ee7c3c.svg);
  background-size: 20px
}

.icon-nyt {
  background-image: url(../fonts/nyt-backgrounded.2c63fc3d.svg);
  background-size: 20px
}

.icon-cooking {
  background-image: url(../fonts/cooking-backgrounded.9441a82f.svg);
  background-size: 20px
}

.icon-wirecutter {
  background-image: url(../fonts/wirecutter-backgrounded.aa603cc6.svg);
  background-size: 20px
}

.icon-athletic {
  background-image: url(../fonts/athletic-backgrounded.b48936cc.svg);
  background-size: 20px
}

.beta-pill {
  width: 50px;
  height: 15px;
  color: #fff;
  background-color: #4f85e5;
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  margin-left: 1em;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  display: inline-flex
}

#nav-privacy {
  letter-spacing: .5px;
  color: #000;
  text-align: right;
  border-top: 1px solid #dcdcdc;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 25px 0 17px;
  padding: 12px 0;
  font-family: NYTFranklin;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  bottom: 0;
  left: 0;
  right: 0
}

#nav-privacy>a,
#nav-game-list>a,
#nav-nyt-list>a {
  color: #000;
  text-decoration: none
}

#logo-nav,
#title-bar {
  display: none
}

#nav.toolbar-nav {
  display: flex
}

.nav-logo {
  height: 26px;
  width: 148px
}

.nav-title {
  transform: scale(1), translateY(0);
  opacity: 1;
  height: 100%;
  flex-flow: row;
  flex: 3 2 auto;
  justify-content: flex-start;
  align-items: center;
  transition: all .225s cubic-bezier(.785, .135, .15, .86) 50ms;
  display: flex
}

.title-bar-date {
  vertical-align: baseline;
  font-family: NYTFranklinLight;
  font-size: 28px;
  font-weight: 300;
  display: inline-block
}

.pz-newsreader #logo-nav,
.pz-newsreader #nav.toolbar-nav,
.pz-games-app #logo-nav,
.pz-games-app #nav.toolbar-nav {
  display: none
}

@media screen and (min-width:768px) and (min-height:600px) {
  #logo-nav {
    display: flex
  }

  #logo-nav>#nav {
    height: 65px;
    min-width: 65px;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    display: flex
  }

  #nav-header {
    display: none
  }

  #nav-menu-content {
    max-height: calc(100% - var(--toolbar-desktop-height) - 1px);
    margin-top: calc(var(--toolbar-desktop-height) + 1px)
  }

  .nav-more-text {
    margin: 18px 0 24px
  }

  #nav.toolbar-nav {
    display: none
  }
}

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translate(-100%)
  }

  to {
    opacity: 1;
    transform: translate(0%)
  }
}

@keyframes SlideOut {
  0% {
    opacity: 1;
    transform: translate(0%)
  }

  90% {
    opacity: 0
  }

  to {
    opacity: 0;
    transform: translate(-100px)
  }
}

:root {
  --toolbar-desktop-height: 65px;
  --toolbar-mobile-height: 46px
}

#toolbar {
  width: 100%;
  z-index: 1;
  border-bottom: 1px solid var(--light-grey);
  display: flex;
  position: relative
}

.title-bar-wrapper {
  border: 0;
  flex: auto;
  margin: 12px 12px 0;
  padding: 0;
  display: block
}

.title-bar-game {
  margin-right: 16px;
  font-family: karnakCondensedBold;
  font-size: 42px;
  font-weight: 700
}

.toolbar-container {
  vertical-align: baseline;
  min-height: 45px;
  width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
  font: 700 15px NYTFranklin
}

.toolbar-content {
  vertical-align: baseline;
  max-width: 1280px;
  flex-wrap: nowrap;
  margin: 0 auto;
  padding-right: 12px;
  display: flex
}

.toolbar-button {
  color: #000;
  border: none;
  padding: 6px 4px;
  font-size: 1.125em
}

.toolbar-left {
  flex: 1;
  justify-content: flex-start;
  display: flex
}

.toolbar-center {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex
}

.toolbar-right {
  flex: 1;
  justify-content: flex-end;
  display: flex
}

.help-icon,
.settings-icon {
  height: 24px;
  width: 24px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block
}

.help-icon {
  background-image: url(../fonts/help.4c14e1e5.svg)
}

.help-icon:hover {
  cursor: pointer
}

.settings-icon {
  background-image: url(../fonts/settings.a6d6b6f9.svg)
}

button {
  background: 0 0;
  border: none
}

#toolbar>#nav {
  display: flex
}

@media screen and (min-width:768px) and (min-height:600px) {
  #logo-nav {
    vertical-align: baseline;
    min-height: 1px;
    border-bottom: 1px solid var(--light-grey);
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    margin: 0 auto;
    display: flex
  }

  #title-bar {
    vertical-align: baseline;
    min-height: 1px;
    max-width: 1280px;
    flex-wrap: wrap;
    flex: 1;
    align-items: stretch;
    margin: 0 auto;
    padding: 24px 12px;
    display: flex
  }

  #toolbar {
    border-top: 1px solid var(--light-grey)
  }

  .toolbar-button {
    padding: 6px 6px 4px;
    line-height: 45px
  }

  .toolbar-container {
    padding: 0 12px
  }

  .toolbar-content {
    padding: unset
  }

  .settings-icon,
  .help-icon {
    height: 28px;
    width: 28px
  }

  #toolbar>#nav {
    display: none
  }
}

.invalid-shake {
  animation: .2s ease-in 1.5 shake
}

.solved-pulse {
  animation: .3s linear forwards pulse
}

.short-bounce {
  animation: .3s ease-in forwards bounce
}

.short-down-bounce {
  animation: .4s ease-in forwards downBounceText
}

.pop {
  animation: .4s ease-in forwards pop
}

.fade {
  animation: .4s ease-in forwards fadeoutandshorten
}

@keyframes shake {

  0%,
  to {
    transform: translate(0)
  }

  25% {
    transform: translate(-5px)
  }

  75% {
    transform: translate(5px)
  }
}

@keyframes pulse {
  0% {
    z-index: 4;
    transform: scaleY(1)scaleX(1)
  }

  40% {
    transform: scale(1.2)
  }

  70% {
    transform: scale(1.2)
  }

  to {
    z-index: 4;
    transform: scaleY(1)scaleX(1)
  }
}

@keyframes pulsestartsmallstaybig {
  0% {
    transform: scale(.7)
  }

  to {
    transform: scaleY(1)scaleX(1)
  }
}

@keyframes fadein {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeout {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes fadeoutandshorten {
  0% {
    opacity: 1;
    transform: scaleY(1)
  }

  to {
    opacity: 0;
    transform: scaleY(0)
  }
}

@keyframes bounce {

  0%,
  to {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes downBounceText {

  0%,
  to {
    top: 0
  }

  50% {
    top: 10px
  }
}

@keyframes shrink2 {
  0% {
    transform: scaleY(1)scaleX(1)
  }

  to {
    transform: scale(.7)
  }
}

@keyframes flip {
  0% {
    transform: rotateX(0)
  }

  to {
    transform: rotateX(180deg)
  }
}

@keyframes pop {
  25% {
    transform: scale(1.2)
  }

  75% {
    transform: scale(.4)
  }

  to {
    transform: scale(0)
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(30px)
  }

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

@keyframes slideOut {
  0% {
    opacity: 1;
    transform: translateY(0)
  }

  90% {
    opacity: 0
  }

  to {
    opacity: 0;
    transform: translateY(60px)
  }
}

@media screen and (min-width:768px) {
  @keyframes pulse {
    0% {
      z-index: 4;
      transform: scaleY(1)scaleX(1)
    }

    40% {
      transform: scale(1.1, 1.15)
    }

    70% {
      transform: scale(1.1, 1.15)
    }

    to {
      z-index: 4;
      transform: scaleY(1)scaleX(1)
    }
  }
}

.flex-grid {
  width: 100vw;
  flex-wrap: wrap;
  display: flex;
  position: relative
}

.flex-grid * {
  width: calc(24px + 4*var(--mobile-item-size));
  margin: auto
}

.flex-grid,
.flex-grid * {
  gap: 8px
}

.item {
  width: var(--mobile-item-size);
  max-width: var(--mobile-max-item-size);
  min-width: 20px;
  min-height: 70px;
  height: 22.5vw;
  max-height: 22.5vw;
  background-color: var(--item-grey);
  color: #000;
  text-align: center;
  z-index: 0;
  border-radius: 6px;
  outline: none;
  font-family: NYTFranklin;
  font-size: 15px;
  font-weight: 700;
  transition: opacity .4s;
  position: absolute
}

.item:hover {
  cursor: pointer
}

.item.inactive {
  pointer-events: none
}

#emoji-recap {
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex
}

.nyt-emoji-row {
  flex-direction: row;
  margin: auto;
  display: flex
}

.nyt-emoji {
  width: 32px;
  height: 32px;
  background-color: #000;
  border-radius: 4px;
  margin: 2px 0
}

@keyframes textfadein {
  0% {
    color: #000
  }

  0% {
    color: #0000
  }

  to {
    color: #000
  }
}

@keyframes textfadeinwhite {
  0% {
    color: #fff
  }

  0% {
    color: #0000
  }

  to {
    color: #fff
  }
}

@keyframes textfadeout {
  0% {
    color: #000
  }

  to {
    color: #0000
  }
}

@keyframes colorfadeout {
  0% {
    background-color: var(--selected-color);
    color: #000
  }

  to {
    background-color: var(--item-grey);
    color: #0000
  }
}

.item.fadewhite {
  animation: 1s textfadeinwhite
}

.item.fade {
  animation: 1s textfadein
}

.item.fadeout {
  animation: .6s ease-in-out forwards textfadeout
}

.item.fadein,
.answer-banner.fadein {
  animation: .6s ease-in-out forwards textfadein
}

.item.selected-color-fadeout {
  animation: .6s ease-in-out forwards colorfadeout
}

.flex-col,
.item,
#puzzle-buttons {
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  display: flex
}

.flex-col {
  min-height: 70px;
  height: 22.5vw
}

#board {
  width: calc(24px + 4*var(--mobile-item-size));
  height: calc(24px + 4*var(--mobile-item-size));
  margin: auto
}

#canvas {
  background-color: #0000;
  position: absolute
}

.item.selected {
  background-color: var(--selected-color);
  color: #fff
}

.item.correct {
  outline: none
}

.item.correct.group-0,
.answer-banner.group-0,
.nyt-emoji.group-0 {
  background-color: var(--group-0-color)
}

.item.correct.group-1,
.answer-banner.group-1,
.nyt-emoji.group-1 {
  background-color: var(--group-1-color)
}

.item.correct.group-2,
.answer-banner.group-2,
.nyt-emoji.group-2 {
  background-color: var(--group-2-color)
}

.item.correct.group-3,
.answer-banner.group-3,
.nyt-emoji.group-3 {
  background-color: var(--group-3-color)
}

.item.invalid-shake {
  background-color: var(--incorrect-color)
}

#attempts-remaining-counter {
  position: relative
}

.answer-banner {
  width: 100%;
  z-index: 5;
  background-color: var(--main-game-color);
  color: #000;
  min-height: 70px;
  height: var(--mobile-max-item-size);
  max-height: 22.5vw;
  text-align: center;
  text-overflow: wrap;
  border-radius: 6px;
  flex-direction: column;
  place-content: center;
  gap: 2px;
  margin: auto;
  font-size: 16px;
  display: flex;
  position: absolute;
  left: 0
}

.growShrink {
  animation: .5s ease-in growShrink
}

@keyframes growShrink {
  0% {
    transform: scale(1)
  }

  20% {
    transform: scale(1.2)
  }

  to {
    transform: scale(1)
  }
}

@keyframes shrink {
  0% {
    transform: scale(1)
  }

  20% {
    transform: scale(.9)
  }

  to {
    transform: scale(.9)
  }
}

.shrunk {
  animation: .5s ease-in forwards shrink
}

.item-row-0 {
  top: 0
}

.item-col-0 {
  left: 0
}

.item-row-1 {
  top: calc(8px + var(--mobile-item-size))
}

.item-col-1 {
  left: calc(8px + var(--mobile-item-size))
}

.item-row-2 {
  top: calc(16px + 2*var(--mobile-item-size))
}

.item-col-2 {
  left: calc(16px + 2*var(--mobile-item-size))
}

.item-row-3 {
  top: calc(24px + 3*var(--mobile-item-size))
}

.item-col-3 {
  left: calc(24px + 3*var(--mobile-item-size))
}

@media screen and (min-width:768px) {
  .flex-grid * {
    width: 100%
  }

  .item {
    z-index: 2;
    width: var(--desktop-item-width);
    max-width: var(--desktop-max-item-size);
    min-height: 70px;
    height: var(--desktop-item-height);
    width: var(--desktop-item-width);
    margin: auto;
    font-size: 24px
  }

  #board {
    width: calc(24px + 4*var(--desktop-item-width));
    height: calc(24px + 4*var(--desktop-item-height))
  }

  .flex-grid,
  .flex-grid * {
    gap: unset
  }

  .item-row-1 {
    top: calc(8px + var(--desktop-item-height))
  }

  .item-col-1 {
    left: calc(8px + var(--desktop-item-width))
  }

  .item-row-2 {
    top: calc(16px + 2*var(--desktop-item-height))
  }

  .item-col-2 {
    left: calc(16px + 2*var(--desktop-item-width))
  }

  .item-row-3 {
    top: calc(24px + 3*var(--desktop-item-height))
  }

  .item-col-3 {
    left: calc(24px + 3*var(--desktop-item-width))
  }

  .flex-col {
    height: 8vw
  }

  .answer-banner {
    width: calc(24px + 4*var(--desktop-item-width));
    height: var(--desktop-item-height);
    left: unset;
    gap: unset;
    font-size: 20px
  }
}

.modal-content h2 {
  font-size: 30px;
  font-weight: unset;
  font-style: unset;
  margin-block: .5em 0
}

.modal-content button {
  margin: 10px 0 0 !important
}

#help-modal li {
  font-weight: 400
}

#help-modal .modal-content {
  max-height: 95%;
  text-align: left;
  border-radius: 10px 10px 0 0;
  align-items: flex-start;
  font-weight: 400
}

#congrats-modal .modal-content {
  height: 100%;
  justify-content: space-between;
  overflow: scroll
}

#congrats-modal .puzzle-results img {
  width: 56px
}

#inner-help {
  overflow-y: auto
}

#help-modal p {
  text-align: left;
  width: auto;
  margin: 15px 0 0;
  font-weight: 400
}

#help-modal ul {
  margin-block-start: 0
}

#help-modal h2 {
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 8px;
  font-family: karnakCondensedBold;
  font-size: 28px;
  line-height: 30px;
  display: block
}

#help-modal ul {
  margin-block-end: .7em
}

#color-descriptions {
  position: relative
}

#help-arrow {
  height: 2.2rem;
  position: absolute;
  bottom: 1.4rem;
  left: 2.6rem
}

#puzzleselect-modal {
  position: absolute;
  top: 0;
  overflow-y: scroll
}

#feedback>p {
  text-align: left;
  color: #000;
  font-size: 16px
}

.modal {
  flex-direction: row;
  align-items: flex-end
}

.modal .modal-content {
  width: 100%;
  max-width: 520px;
  padding: 32px;
  animation: .2s slideIn
}

.modal-content.closing {
  animation: .2s slideOut
}

.congrats-contents {
  flex-direction: column;
  gap: 28px;
  margin: auto;
  display: flex
}

#congrats-title {
  margin: 8px 0;
  font-size: 36px
}

#puzzle-title {
  font-family: NYTFranklin;
  font-size: 20px;
  font-weight: 500
}

@media screen and (min-width:520px) {
  .modal {
    flex-direction: column;
    align-items: center
  }

  #congrats-modal .modal-content {
    height: auto;
    max-height: 95%;
    overflow-y: auto
  }
}

html {
  font-size: 16px
}

* {
  box-sizing: border-box
}

a {
  color: #000;
  text-decoration: none
}

h1 {
  color: var(--main-game-color);
  margin: 0;
  font-family: magslab;
  font-size: 3rem;
  font-weight: 400
}

.modal .oblong-button {
  background-color: var(--main-game-color)
}

.modal a {
  border-bottom: 3px solid var(--main-game-color)
}

.modal button {
  color: #000
}

.has-error {
  backface-visibility: hidden;
  perspective: 1000px;
  animation: .9s cubic-bezier(.36, .07, .19, .97) both shake;
  transform: translate(0, 0)
}

:root {
  --blue: #729eeb;
  --green: #b5e352;
  --yellow: #fbd400;
  --red: #ff6767;
  --purple: #bc70c4;
  --orange: #f8a765;
  --main-game-color: #b3a7ff;
  --selected-color: #5a594e;
  --incorrect-color: #5a594ebf;
  --light-grey: #d4d4d4;
  --grey: #e2e2e2;
  --ui-grey: #7f7f7f;
  --item-grey: #efefe6;
  --top-section-desktop-height: 233.5px;
  --top-section-mobile-height: 46px;
  --group-0-color: var(--yellow);
  --group-1-color: var(--green);
  --group-2-color: var(--blue);
  --group-3-color: var(--purple)
}

body {
  -webkit-user-select: none;
  user-select: none;
  --desktop-item-width: 150px;
  --desktop-item-height: 80px;
  --desktop-max-item-size: 200px;
  --mobile-item-size: 22.5vw;
  --mobile-max-item-size: 22.5vw;
  background-color: #fff;
  margin: 0;
  padding: 0;
  font-family: NYTFranklin
}

.fullscreen.pz-newsreader,
.fullscreen.pz-games-app {
  height: 100vh
}

#mobile-indicator {
  display: none
}

#cover {
  background-color: var(--main-game-color);
  height: 100vh;
  width: 100vw;
  z-index: 30;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: auto;
  display: flex;
  position: fixed;
  bottom: 0;
  overflow: auto;
}

#cover-content {
  width: 60vw;
  flex-direction: column;
  display: flex
}

#cover.hide,
.hide,
#tool-buttons.hide {
  display: none
}

#edited-by {
  color: #000;
  font-family: NYTFranklin;
  font-size: 16px
}

#four-connect-icon {
  width: 65px;
  align-self: center
}

.page {
  height: calc(100% - var(--top-section-mobile-height));
  flex-direction: column;
  display: flex
}

#game {
  flex-direction: column;
  justify-content: center;
  display: flex
}

#game-title {
  margin-top: 8px;
  font: 40px karnakCondensedBold
}

#game-beta {
  text-transform: uppercase;
  height: 26px;
  justify-content: center;
  align-items: center;
  font-family: NYTFranklin;
  font-size: 16px;
  font-weight: 700;
  display: flex
}

#game-subtitle {
  width: 200px;
  align-self: center;
  margin-top: 8px;
  font: 20px karnakMedium
}

@media screen and (min-width:768px) {
  #game-subtitle {
    width: 100%
  }
}

#todays-date-title {
  color: #000;
  margin-top: 15px;
  font: 700 18px NYTFranklin
}

#play-button {
  border: unset;
  width: 100px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  letter-spacing: .05em;
  background-color: #000;
  border-radius: 20px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  font: 600 16px NYTFranklin
}

#concierge {
  background-color: #000
}

#tool-buttons,
#results-buttons {
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  display: flex
}

#extra-buttons {
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex
}

#results-buttons {
  display: none
}

#submit-button,
#copy-button,
#shuffle-button,
#deselect-all-button,
#share-button,
#results-button {
  width: -moz-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 5.5em;
  height: 3em;
  text-align: center;
  max-width: 80vw;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  font-family: NYTFranklin;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5em;
  display: flex
}

#submit-button {
  color: #fff;
  border: unset;
  background-color: #000
}

#shuffle-button,
#deselect-all-button,
#share-button,
#results-button,
#copy-button {
  color: #000;
  background-color: #fff
}

#deselect-all-button {
  width: 120px
}

#results-button {
  min-width: 7em
}

#results-buttons.active {
  display: flex
}

#submit-button.touched,
#copy-button.touched,
#shuffle-button.touched,
#deselect-all-button.touched,
#share-button.touched {
  background-color: var(--grey)
}

#purple-text {
  color: var(--purple)
}

#top-text {
  height: 3.5em;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 6px;
  font-size: 18px;
  display: flex
}

#puzzle-buttons {
  margin: auto
}

#toast {
  visibility: hidden;
  color: #fff;
  opacity: 1;
  z-index: 100;
  text-align: center;
  background-color: #000;
  border: none;
  border-radius: 4px;
  margin: 30px;
  padding: 13px;
  font-family: NYTFranklin;
  font-size: 14px;
  line-height: 16px;
  position: fixed;
  left: 50%;
  transform: translate(calc(-50% - 30px))
}

#toast.show {
  visibility: visible;
  animation: .5s fadein, .5s 2s forwards fadeout
}

.modal {
  height: unset;
  z-index: 8;
  justify-content: center;
  position: fixed
}

.modal.obscure-behind {
  background-color: #fffc
}

.modal p {
  text-align: left;
  margin-bottom: 0;
  line-height: 1.2em
}

.modal-content ul,
.modal-content h2 {
  margin: 0
}

.modal a {
  color: var(--link-text-blue);
  border-bottom: none;
  text-decoration: none
}

#mobile-indicator {
  display: block
}

#attempts-remaining-text {
  justify-content: center;
  margin-top: 24px;
  display: inline-flex
}

#attempts-remaining-bubbles {
  width: 118px;
  justify-content: space-evenly;
  align-items: center;
  display: flex
}

.bubble {
  opacity: 100;
  background-color: var(--selected-color);
  width: 16px;
  height: 16px;
  border-radius: 9999px
}

.bubble.lost {
  opacity: 0
}

#tool-buttons>span.inactive {
  border: var(--ui-grey)solid 1px;
  color: var(--ui-grey);
  pointer-events: none;
  background-color: #fff
}

#text-label-attempts-remaining.inactive {
  color: var(--ui-grey)
}

#countdown-container {
  margin: 5px;
  font-family: NYTFranklin
}

.countdown-label {
  text-transform: uppercase;
  font-size: 18px
}

#timer {
  font-size: 36px
}

#share-and-upnext {
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  display: flex
}

#share-button,
#play-sb {
  height: 48px;
  min-width: 162px;
  max-width: 180px;
  border-radius: 9999px;
  flex-wrap: wrap;
  place-content: center;
  font-family: NYTFranklin;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  display: flex
}

#share-button {
  color: #fff;
  background-color: #000
}

#play-sb,
#play-sb a {
  color: #000
}

#play-sb {
  vertical-align: middle;
  background-color: #f7da21;
  align-items: center;
  display: flex
}

#share-and-upnext .icon-sb {
  content: "";
  height: 16px;
  width: 16px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 16px;
  margin-bottom: 2px;
  margin-left: 4px;
  display: inline-flex
}

.help-emojis {
  flex-direction: column;
  display: flex
}

.help-emojis>div {
  height: 20px;
  align-items: center;
  display: inline-flex
}

.help-emoji {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  margin-bottom: 1.5px;
  margin-right: 5px
}

.help-emoji.group-0 {
  background-color: var(--group-0-color)
}

.help-emoji.group-1 {
  background-color: var(--group-1-color)
}

.help-emoji.group-2 {
  background-color: var(--group-2-color)
}

.help-emoji.group-3 {
  background-color: var(--group-3-color)
}

@media screen and (min-width:768px) and (min-height:600px) {
  #mobile-indicator {
    display: none
  }

  .modal.obscure-behind {
    margin-top: var(--top-section-desktop-height)
  }

  .modal {
    flex-direction: column;
    align-items: center
  }
}

.puzzle-item {
  border: unset;
  height: 40px;
  width: 200px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  letter-spacing: .05em;
  background-color: #000;
  border-radius: 20px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  font: 600 16px NYTFranklin;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  display: flex
}

.answer-banner span {
  font: 600 14px NYTFranklin;
}