:root {
  --hueMain: 140;
  --hueTheme: 140;
  --hueCreating: 195;
  --hueGuessing: 140;
  --hueReviewing: 335;
  --hueSolved: 235;
  --hueHighlight: 140;
  --statusBarHSL: var(--hueTheme), 100%, 92%;

  --appBackgroundLightestHSL: var(--hueTheme), 40%, calc(var(--dm) * 50%);
  --appBackgroundLighterHSL: var(--hueTheme), 40%, calc(var(--dm) * 58%);
  --appBackgroundHSL: var(--hueTheme), 100%, calc(var(--lm) * 83%);
  --appBackgroundDarkHSL: var(--hueTheme), 100%, 92%;
  --appBackgroundDarkestHSL: var(--hueTheme), 100%, 98%;
  --appForegroundHSL: var(--hueTheme), 100%, 06%;
  --appForegroundDiminishedHSL: var(--hueTheme), 0%, 35%;

  --linkColorLightHSL: var(--hueHighlight), 80%, 35%;
  --linkColorDarkHSL: var(--hueHighlight), 60%, 35%;
  --messageColorHSL: var(--hueCreating), 100%, 40%;
  --tipColorHSL: 324, 100%, 38%;
  --highlightColorHSL: 50, 100%, 30%;
  --trayBackgroundHSL: var(--hueMain), 100%, 50%;
  --trayCreatingBackgroundHSL: var(--hueCreating), 100%, 50%;
  --trayGuessingBackgroundHSL: var(--hueGuessing), 100%, 40%;
  --trayReviewingBackgroundHSL: var(--hueReviewing), 100%, 57%;
  --traySolvedBackgroundHSL: var(--hueSolved), 86%, 73%;
  --simpleCardForegroundHSL: 0, 0%, 0%;
  --simpleCardBackgroundHSL: 0, 100%, 100%;
  --statBackground: hsla(var(--hueTheme), 100%, 98%, 0.7);
  --statBorder: hsla(var(--hueTheme), 60%, 80%, 1);
  --textureSource: radial-gradient(circle at center 400px, hsla(var(--appBackgroundDarkestHSL), calc(var(--lm) * 0.7)) 1%, hsla(var(--appBackgroundDarkestHSL), calc(var(--lm) * 0.7)) 40%, hsla(var(--appBackgroundHSL), 1) 80%);
  --textureSize: cover;
  --textureBlendMode: normal;
  --statShadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  --glassBackgroundImage: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--lm) * 0.3)), rgba(255, 255, 255, calc(var(--lm) * 0.3)) 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, calc(var(--lm) * 0.3)), rgba(255, 255, 255, 0));
}

/* body {
  background-image: linear-gradient(hsla(var(--appBackgroundDarkHSL), 1), hsla(var(--appBackgroundDarkestHSL), 0.5) 200px), var(--textureHue), var(--texture2);
} */

/*#region stats page (game/stats.html) only */
.boxed {
  border: 1px solid hsla(var(--messageColorHSL), 1);
  background: hsla(var(--messageColorHSL), 1);
  color: hsl(var(--appBackgroundHSL));
}

.boxed.highlighted {
  box-shadow: none;
  border: 1px solid hsla(var(--messageColorHSL), 1);
}

stats stat.boxed value {
  color: hsl(var(--appBackgroundDarkestHSL));
}

stats stat.boxed small {
  color: hsl(var(--appBackgroundDarkHSL));
}
/*#endregion */

button.scream {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.6) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  background-color: hsla(var(--linkColorLightHSL), 0.95);

  color: hsl(var(--linkColorDarkHSL));
}

button.scream icon {
  background-color: hsl(var(--linkColorDarkHSL));
}

button.update {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid hsla(var(--hueCreating), 80%, 40%, 1);
  background: hsla(var(--hueCreating), 80%, 40%, 1);
  color: white;
}

.creating button.update,
.reviewing.guessing button.update {
  border-color: hsla(var(--hueGuessing), 80%, 40%, 1);
  background: hsla(var(--hueGuessing), 80%, 40%, 1);
}

.creating.guessing button.update {
  border-color: hsla(var(--hueCreating), 80%, 40%, 1);
  background: hsla(var(--hueCreating), 80%, 40%, 1);
}

button.update.show {
  transform: translateY(calc(-1 * var(--defaultGap)));
}

button.update icon {
  background: white;
}

button badge {
  color: hsl(var(--appBackgroundDarkestHSL));
}

checkbox toggle:before {
  background: hsl(var(--appBackgroundDarkestHSL));
}

message {
  text-shadow: none;
}

notification message,
splash message {
  background-color: hsl(var(--appBackgroundDarkestHSL));
}

row,
checkbox {
  border: 1px solid hsla(var(--appBackgroundLighterHSL), 1);
}

leftright callout,
row callout,
select {
  background: hsl(var(--hueMain), 100%, 100%);
}

word.pointout {
  color: hsl(var(--tipColorHSL));
}

tray spot.pointout,
tray spot.pointadjacent {
  outline: 1px solid hsl(var(--tipColorHSL));
}

arrow {
  background: hsl(var(--tipColorHSL));
}

pointer {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  background: hsl(var(--tipColorHSL));
}

pointer p.controls a,
pointer p.controls a:hover,
pointer p.controls a:focus,
pointer p.controls a:visited,
pointer p.controls a:active {
  color: hsl(0, 50%, 80%);
}

pointer p.controls a:hover {
  color: hsl(0, 70%, 90%);
}

modal {
  background-image: linear-gradient(hsla(var(--appBackgroundDarkHSL), 1), hsla(var(--appBackgroundDarkHSL), 1) 6px, hsla(var(--appBackgroundDarkestHSL), calc(var(--lm) * 0.5)) 200px), var(--textureHue), var(--texture2);
}

modal callout,
modal select {
  border: 1px solid hsla(var(--appBackgroundLighterHSL), 1);
}

notification {
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, hsla(var(--appBackgroundDarkHSL), 1), hsla(var(--appBackgroundHSL), calc(var(--lm) * 0.5)) calc(120px));
}

notification.meta {
  background-image: linear-gradient(hsla(var(--appBackgroundDarkHSL), 1), hsla(var(--appBackgroundDarkHSL), 1) 6px, hsla(var(--appBackgroundDarkestHSL), calc(var(--lm) * 0.5)) 200px), var(--textureHue), var(--texture2);
}

notification button.inline {
  border-color: hsla(var(--appBackgroundLighterHSL), 1);
  background-color: hsla(var(--appBackgroundDarkHSL), 0.1);
}

gamelinks item.yay {
  border-color: hsla(var(--hueYay), 90%, 58%, 1);
  background-color: hsla(var(--hueYay), 100%, 85%, 0.5);
}

gamelinks item.yay p a {
  color: hsla(var(--hueYay), 100%, 38%, 1);
}

gamelinks item.awaiting_solution {
  border-color: hsla(var(--hueYay), 100%, 46%, 1);
  background-color: hsla(var(--hueYay), 100%, 62%, 0.2);
}

gamelinks item.awaiting_solution p text {
  color: hsla(var(--hueYay), 100%, calc(var(--dm) * 38%), 1);
}

gamelinks item p icon.check,
gamelinks item p icon.nope {
  background-color: hsla(var(--hueYay), 100%, calc(var(--dm) * 38%), 1);
}

gamelinks item.awaiting_solution p a > span {
  color: hsla(var(--hueYay), 100%, 28%, 1);
  text-decoration: line-through;
}

gamelinks item.awaiting_solution.yay {
  border-color: hsla(var(--hueYay), 100%, calc(var(--dm) * 46%), 1);
  background-color: hsla(var(--hueYay), 100%, 72%, 0.5);
}

gamelinks item.awaiting_solution.yay p a > span {
  color: hsla(var(--hueYay), 100%, 30%, 1);
  font-style: normal;
  text-decoration: none;
}

gamelinks item.awaiting_review p a {
  color: hsl(var(--appForegroundDiminishedHSL));
}

gamelinks item.guess {
  border-color: hsla(var(--hueGuessing), 100%, 16%, 1);
  background-color: hsla(var(--hueGuessing), 100%, 12%, 0.5);
}

gamelinks item.guess p a {
  color: hsla(var(--hueNope), 100%, 58%, 1);
}

.blueText {
  color: hsl(var(--hueCreating), 100%, 48%);
}

.greenText {
  color: hsl(var(--hueGuessing), 80%, 34%);
}

/* fixed invalid selectors: card.ghost → ghost card (ghost is the element, card sits inside it) */
ghost card,
ghost card.empty,
.guessing ghost card.empty,
.reviewing ghost card.empty {
  border-color: hsla(var(--hueMain), 100%, 40%, 0.7);
}

tray diamond {
  background-image: url(../images/diamond-light.svg), url(../images/diamond-light.svg);
}

hints hint input {
  text-shadow: 0px 1px 1px hsla(var(--appBackgroundDarkestHSL), 0.6);
}

.creating hints hint input {
  color: hsla(var(--hueCreating), 100%, 30%, 1);
}

hints hint input::placeholder {
  color: hsla(var(--hueGuessing), 70%, 62%, 1);
  user-select: none;
  -webkit-user-select: none;
}

.creating hints hint input::placeholder {
  color: hsla(var(--hueCreating), 70%, 62%, 1);
}

.guessing hints hint input::placeholder {
  color: hsla(var(--hueGuessing), 70%, 62%, 1);
}

.reviewing hints hint input::placeholder {
  color: hsla(var(--hueReviewing), 70%, 62%, 1);
}

.solved hints hint input::placeholder,
.guessing.solved hints hint input::placeholder,
.reviewing.solved hints hint input::placeholder {
  color: hsla(var(--hueSolved), 70%, 62%, 1);
}

hints hint input.readonly {
  color: hsl(var(--hueGuessing), 100%, 32%);
}

.creating hints hint input.readonly {
  color: hsl(var(--hueCreating), 100%, 30%);
}

.guessing hints hint input.readonly {
  color: hsl(var(--hueGuessing), 94%, 30%);
}

.reviewing hints hint input.readonly {
  color: hsl(var(--hueReviewing), 94%, 30%);
}

.solved hints hint input.readonly,
.guessing.solved hints hint input.readonly,
.reviewing.solved hints hint input.readonly {
  color: hsl(var(--hueSolved), 94%, 30%);
}

spot rotators button icon {
  background: hsla(var(--appForegroundDiminishedHSL), 0.2);
}

parking spot rotators button icon {
  background: hsla(var(--hueMain), 100%, 40%, 0.46);
}

card,
.creating card {
  color: hsl(var(--hueCreating), 100%, 14%);
}

.guessing card {
  color: hsl(var(--hueGuessing), 94%, 10%);
}

.reviewing card {
  color: hsl(var(--hueReviewing), 94%, 10%);
}

.solved card,
.solved.guessing card,
.solved.reviewing card {
  color: hsl(var(--hueSolved), 94%, 10%);
}