@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* -------- Color System (inspired by NYT Games) -------- */
:root{
  --nyt-bg: #f6f6f6;
  --nyt-surface: #ffffff;
  --nyt-text: #121212;
  --nyt-subtle-text: #878787;
  --nyt-sep: #e6e6e6;
  --nyt-light: #dcdcdc;

  /* Feedback colors */
  --nyt-correct: #6aaa64; /* Wordle green */
  --nyt-present: #c9b458; /* Wordle yellow */
  --nyt-absent:  #787c7e; /* Wordle gray */
  --nyt-accent:  #f7da21; /* Spelling Bee yellow */

  /* Brand-ish highlights */
  --nyt-blue: #326891;
  --shadow-1: 0 4px 12px rgba(0,0,0,.10);
  --shadow-2: 0 10px 24px rgba(0,0,0,.15);
}


html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  min-height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background-color: #F3F3F3;
  overflow: hidden;
}

#main-container {
  width:100vw;
  text-align:center;
  font-family: 'PT Serif', serif;
}
#headline {
  width: 100vw;
  height: 7vh;
}

hr {
  border: 0.5px solid #d3d3d3;
  width: 100vw;
  margin: 5px 0;
}

#article-link, #article-link:visited {
  color: black;
}

.modal-logo{
  height: 5vh;
  min-height: 25px;
  width: auto;
}

#main-logo{
  height: 5vh;
  width: auto;
  margin: 1vh;
}

.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#headlinecontainer{
  position: absolute;
  bottom: 50vh;
  top: 8vh;
  left: 0;
  right: 0;
  margin:0 10vw 10px 10vw;
  overflow: hidden;
}

#headline2 {
  font-size:calc(16px + 4vh);
  display: inline-block;
}

.spaced {
  padding: 0 5px;
}

.greyspan {
  color: #d9d9d9;
  /*font-size:calc(16px + 4vh);*/
  font-style: italic;
}

.greenspan {
/*   color:#4b9444; */
  /*color:#2EB86E;*/
  color: #d9d9d9;
  /*font-size:calc(16px + 4vh);*/
  padding: 0 4px;
  font-style: italic;
/*   font-weight: bold; */
}

.highlight {
/*   text-shadow:0px 0px 5px #4b9444; */
/*   color: #eda43e; */
  /*color: #EB8D52;*/
  color: #336AD2;
  font-weight:bold;
  font-style: italic;
  /*-webkit-text-stroke: 1px #2EB86E;*/
  -webkit-text-stroke: 1px #336AD2;
  text-decoration: underline;
  padding: 0;
  animation-name: letterselect;
  animation-duration: 0.5s;
}

@keyframes letterselect{
/*   0%    {font-size:calc(16px + 6vh); color:#3e8aed;text-shadow:0px 0px 15px #ed553e;}
  50%   {font-size:calc(16px + 5vh); color:#5bed3e;text-shadow:0px 0px 10px #ed553e;}
  100%  {font-size:calc(16px + 4vh); color:#eda43e;text-shadow:0px 0px 5px #ed553e;} */
    0%  {color:#3e8aed;text-shadow:0px 0px 15px #ed553e;}
  50%   {color:#5bed3e;text-shadow:0px 0px 10px #ed553e;}
  100%  {color:#eda43e;text-shadow:0px 0px 5px #ed553e;}
/*   0%    {text-shadow:0px 0px 15px #4b9444;}
  50%   {text-shadow:0px 0px 10px #4b9444;}
  100%  {text-shadow:0px 0px 5px #4b9444;} */
}

.fullopacity{
  opacity: 1;
  visibility: visible;
}

.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

#container-wrapper {
  display: flex;
  flex-direction: row;
}

#word-container{
  background-color: #d3d3d3;
  padding: 5px;
  width: 15vw;
  min-width: 160px;
  height: 21vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /*overflow: scroll;*/
  border-radius: 10px 0 0 10px;
  font-family: 'PT Sans', sans-serif;
}

#word-count {
  color: green;
}

#valid-words {
  background-color: #dbdbdb;
  font-size: 12px;
  font-family: 'PT Sans', sans-serif;
  color: green;
  flex-grow: 1;
  min-width: 120px;
  max-width: 80%;
  overflow: auto;
  border-radius: 10px;
}

#top-7 {
  font-weight: bold;
  color: #336AD2;
}

#scorebox{
  font-family: 'PT Sans', sans-serif;
  width: 15vw;
  min-width: 160px;
}

#playerScore {
  margin-bottom:5px;
}

#status {
  padding: 0 20px;
  color: green;
  background-color: lightgreen;
  font-size: 14px;
  /*font-weight: bold;*/
  line-height: 3vh;
  height:  14vh;
  width: 100%;
  border-radius: 0 10px 0 0;
  font-family: 'PT Sans', sans-serif;
}
/* progress circle */
.RadialProgress {
  --hue: 220;
  --holesize: 65%;
  --track-bg: hsl(233 34% 92%);
  
  block-size: 12vh;
  inline-size: 12vh;
  /* min-inline-size: 100px;
  min-block-size: 100px; */
  display: grid;
  place-items: center;
  position: relative;
  /* font-weight: 700;
  font-size: max(10vmin, 1.4rem); */
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    /* z-index: -1; */
    background: conic-gradient(
      hsl(var(--hue) 100% 70%),
      hsl(var(--hue) 100% 40%),
      hsl(var(--hue) 100% 70%) var(--progress, 0%),
      var(--track-bg) var(--progress, 0%) 100%
    );
    
    mask-image: radial-gradient(
      transparent var(--holesize),
      black calc(var(--holesize) + 0.5px)
    );
  }
}

#groupscore{
  padding: 0 20px;
  color: #c25f2a;
  background-color: #e8b396;
  font-size: 14px;
  /*font-weight: bold;*/
  line-height: 3vh;
  height:  7vh;
  width: 100%;
  font-family: 'PT Sans', sans-serif;
}

#topscore {
  padding: 0 20px;
  color: #336AD2;
  background-color: lightblue;
  font-size: 14px;
  /*font-weight: bold;*/
  line-height: 3vh;
  height:  7vh;
  width: 100%;
  border-radius: 0 0 10px 0;
  font-family: 'PT Sans', sans-serif;
}

.pointDisplay {
  height: 3vh;
  background-color: #F5F5F5;
  width: 60%;
  border-radius: 1.75vh;
  font-weight: bold;
  /*border: 0.5px solid green;*/
}

span {
  display: inline-block;
}

.main-input {
  width: 50vw;
  height: 5vh;
  min-height: 12px;
  font-size: 3vh;
  font-family: Helvetica, sans-serif;
  text-transform: lowercase;
}

#attribution {
  margin: 30px;
}

#copyright {
  margin: 20px;
}

.hidden{
  visibility: hidden;
}

#contact{
  padding: 2vh 30px 0 0;
  font-size: 2.5vh;
}

#howToPlay{
  cursor: pointer;
  padding: 2vh 25px 0 0;
  font-size: 2.5vh;
}

.help-info-buttons {
  position: absolute;
  top: 0px;
  right: 0px;
}

.share-button {
  position: absolute;
  top: 0px;
  left: 0px;
}

/* NYT Styling */
/* .share-button a, .help-info-buttons a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--nyt-surface);
  border: 1px solid var(--nyt-light);
  box-shadow: var(--shadow-1);
  color: var(--nyt-text);
  transition: transform .1s ease, background .15s ease;
}
.share-button a:hover, .help-info-buttons a:hover{ background: #f0f0f0; transform: translateY(-1px); } */

#share {
  padding: 2vh 0 0 30px;
  font-size: 2.5vh;
}

#group {
  padding: 2vh 0 0 25px;
  font-size: 2.5vh;
}

.modal-content {
  background-color: #F5F5F5;
}

.modal-body-text {
  font-family: 'PT Sans', sans-serif;
  font-size:14px;
}

#example-demo {
  width:60%;
  height:auto;
  border:1px solid black;
}

#example-demo-label {
  width:60%;
}

#wordbox-container {
  position: absolute;
  bottom: 44vh;
  font-size: 3vh;
  height: 5vh;
  width: 70vw;
  max-width: 500px;
  border: 1px solid black;
  border-radius: 2.5vh;
  display:flex;
}

.wordbox-shake{
  animation-name: shake;
  animation-duration: 1.25s;
}

@keyframes shake {
  0% { transform: skewX(-25deg); color:red; }
  5% { transform: skewX(25deg); color:red;}
  10% { transform: skewX(-25deg); color:red;}
  15% { transform: skewX(25deg); color:red;}
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}


#wordbox {
  background-color: white;
  flex:8;
  border-radius: 2.5vh 0 0 2.5vh;
}

#clear-button {
  flex:2;
  display: flex;
  flex-direction: column;
  background-color:#ACD1AF;
  color:white;
  border-radius: 0 2.5vh 2.5vh 0;
  font-size: 1.75vh;
  padding: 0 10px;
  justify-content: center;
  align-items: center;
  font-family: 'PT Sans', sans-serif;
  cursor: pointer;
}

/* KEYBOARD -------------------------------------- */
#clear-button:hover {
  background-color:#AFE1AF;
}

.keyboard-container {
  display: flex;
  height: 20vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width:1200px;
}

.keyboard-row {
  display:flex;
  flex:1;
}

.keyboard-key {
  height: 95%;
  width: 10vw;
  max-width:120px;
  padding:0;
  font-size: 3vh;
  flex:1;
  font-weight: bold;
  border-radius: 12px;
  border: 1px white solid;
  background-color: grey;
  color:white;
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.keyboard-key:hover {
  background-color: lightgrey;
}


.double-key {
  flex:1.5;
  width:15vw;
  max-width:180px;
  font-size: 2vh;
}
/* END KEYBOARD */

.dashboard {
  width:100vw;
  height:20vh;
  position: absolute;
  bottom: 22vh;
  border-radius: 5vh;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

.bottom-center {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

.wordbox-already-found{
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: red;
  z-index: 2;
  opacity: 0;
  animation-name: wordbox-change;
  animation-duration: 1.5s;
}

.wordbox-word-added{
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: green;
  z-index: 2;
  opacity: 0;
  animation-name: wordbox-change;
  animation-duration: 1.5s;
}

@keyframes wordbox-change{
  0%  {top: 0%; opacity: 1;}
  100%{top: -30%; opacity: 0; font-size: 20px;}
}

.wordlist-animation{
  animation-name: wordlist-add;
  animation-duration: 1.5s;
}

@keyframes wordlist-add{
  0%  {background-color:#50C878;}
  100%{background-color:#dbdbdb;}
}

.score-animation{
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: green;
  z-index: 2;
  opacity: 0;
  animation-name: scorechange;
  animation-duration: 1.5s;
}

@keyframes scorechange{
    0%  {top:0%;opacity:1;}
  /*50%   {top:-15%;opacity: 0.5;font-size:18px;}*/
  100%  {top:-30%;opacity: 0;font-size:20px;}
}

@media (hover: none) and (pointer: fine){
  .keyboard-key:hover {
      background-color: grey;
  }
  #clear-button:hover {
    background-color:#50C878;
  }
}

.group-button{
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.add-group-button{
  background-color: #ACD1AF;
  border-width: 0;
  flex: 1;
}

.button-spacer{
  flex: 1;
}

.addGroupForm{
  display: flex;
}

.groupNicknameInput{
  flex: 8;
}

.groupCodeInput{
  flex: 6;
}

#groupList{
  /*display: flex;*/
}

.savedGroupInfo{
  display: flex;
  height: 1.5rem;
  border: solid lightslategray 1px;
  border-radius: 0.75rem;
}

.make-current-button{
  flex: 1.5;
  background-color: #ACD1AF;
  border-radius: 0.75rem 0 0 0.75rem;
}

.savedGroupNickname{
  flex: 7;
  overflow-x: auto;
  white-space: nowrap;
  background: white;
}

.savedGroupCode{
  flex: 7;
  background: white;
}

.del-group-button{
  background-color:#F8998D;
  flex: 1.5;
  border-radius: 0 0.75rem 0.75rem 0;
}

.current-group{
  border: 1px solid #c25f2a;
  border-radius: 5px;
  margin: 0 0 10px 0;
}

#current-group-nickname, #current-group-code{
  color: #c25f2a;
}

.animate span {
	display: inline-block;
}

.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate span:nth-of-type(20) {
	animation-delay: .95s;
}

.level span {
	opacity: 0;
	transform: translate(-150px, 0) scale(.3);
	animation: leftRight .5s forwards;
}


@keyframes leftRight {
	40% {
		transform: translate(50px, 0) scale(.7);
		opacity: 1;
		color: #348c04;
	}

	60% {
		color: #0f40ba;
	}

	80% {
		transform: translate(0) scale(2);
		opacity: 0;
	}

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